Making even a simple webpage (or a web app) requires the existence of a structure where that project can be built on.
This gets done with the use of HTML tags. In the Brief intro to HTML, by explaining the paired and unpaired tags, we have already mentioned some of them and starting from this article we are going to look at some more, essential for shaping our website’s skeleton. Let’s get started!
Elements
Following the elements we’re going to discuss in this first part. Click on an element to jump to its relative section.
Div
The div element is used to gather other HTML elements and by default takes all available width, and comes with line breaks before and after. These properties can be anyway changed through CSS code.
Form
The form element is generally used to get and transfer user inputs to a server.
Example:
<form method="GET" action="./form_handler.php">
<input id="full_name" name="full_name" type="text" placeholder="Full Name">
<input type="submit" value="Send">
</form>Obviously this is a very basic form that has a text and a submit input, but don’t worry about them now: they will be discussed in the HTML Elements – Part 2.
For the moment what we can notice is that a form is an element containing other elements and is used to collect user inputs.
For transferring these inputs to a server, a form requires the definition of a method and an action. A method specifies how to send these inputs, while an action points out a file where a script is in place to process this data.
Even though in this example there is not any recall to it, the id attribute (being used to identify an element) covers a very important role. We will see how useful it is in some other article: here we make use of it in a form, but its utility doesn’t stop there.
About the name attribute, instead, is used to reference the form data after the form is submitted. If an input has been assigned no name, it will not be sent to the processing file.
Footer
The footer element, placed at the bottom of the webpage, typically contains info about the author or company and the copyright information, as well as sitemap and website documents.
Example:
<footer>
<p>Example Company<br><br>
<a href="mailto:company@example.com">company@example.com</a><br><br>
<a href="https://example.com/privacy" target="_blank"> Privacy policy</a><br><br><br>
Copyright © All rights reserved.</p>
</footer>The provided info could be in the form of links. Check out the paragraph about hyperlinks to know more about that.
Heading
A heading element consists in paired tag having a h followed by an index which can go from 1 to 6 and that it’s related to the importance of that heading. Greater is the importance, greater is the heading’s font size and lower will be the index to choose:
<h1>All about Web Development</h1>
<h2>Tools to build your website</h2>
<h3>Must know programming languages</h3>
<h4>What's HTML?</h4>
<h5>Guide to HTML elements</h5>
<h6>Example</h6>All about Web Development
Tools to build your website
Must know programming languages
What’s HTML?
Guide to HTML elements
Example
Hyperlink
A hyperlink element is defined by the tags <a></a>. The content between these tags is often a text or an image.
This element is used to let the user open a new content (webpage, website, etc). If the link is assigned to a text is by default underlined and blue, but changes its color either the link gets visited (purple) or is active (red). It’s possible though to tweak the style of the link through CSS code.
The link associated is inserted through the attribute href. Another attribute is target used to specify where to open a linked document. In the following example the hyperlink is set to open the homepage in a new browser tab:
<a href="https://intothedev.com" target="_blank">Home Page</a>Iframe
Iframe stands for inline frame and is used to embed another document within the current webpage. The document can be either an image, a pdf, a html file and so on.
Here a couple of examples:
<iframe src="https://intothedev.com/img/agave.jpeg" width="300" height="200" title="Agave Plants"></iframe><iframe src="http://intothedev.com" title="Into the Dev"></iframe>Label
This element is used to indicate what kind of data is associated to its own element, therefore it is largely used in the forms’ creation.
Example:
<form method="GET" action="./form_handler.php">
<label for="uni">University </label>
<input id="uni" name="uni" type="text">
</form>The for attribute indicates the id of the element which the label refers to.
Line Break
The line break element consists in an unpaired tag (<br>) and is used to introduce a line break and it does not require any attribute. Here an example:
<p>Even so my sun one early morn did shine,<br>
With all triumphant splendour on my brow;<br>
But out, alack, he was but one hour mine,<br>
The region cloud hath mask’d him from me now …</p>Even so my sun one early morn did shine,
With all triumphant splendour on my brow;
But out, alack, he was but one hour mine,
The region cloud hath mask’d him from me now …
Script
This tag is used to embed a JavaScript code, i.e. code that will be executed client-side. Through JavaScript code is possible to manipulate images, dynamically change content and style as well as carry out some action when an event i triggered.
The script element can be used either for containing JavaScript code between its tags or to start the execution of an external JavaScript file (.js) specified in the src attribute.
either contains scripting statements, or it points to an external script file through the src attribute.
<script>
function showMessage(ans) {
const message = document.getElementById("message");
if (ans === 1) {
message.style.color = "slateblue";
message.style.backgroundColor = "orange";
message.innerHTML = "Thanks! That's so kind of you 🙂";
} else {
message.style.color = "red";
message.style.backgroundColor = "black";
message.innerHTML = "Oh no! 🙁 I'll do my best to make it better 😉";
}
}
</script>
<p id="message">Hopefully you like this blog ...</p>
<input type="button" id="yes_btn" onclick="showMessage(1)" value="Yes">
<input type="button" id="no_btn" onclick="showMessage(0)" value="No">Hopefully you like this blog …
In this case we defined the JavaScript function showMessage(ans) within the <script> tag and called it from the onclick attribute within the button inputs.
During this journey in the HTML tags, some JavaScript code is used behind the scene to add a bit of interactivity.
Style
The <style> tag allows to edit the style of a webpage or part of it. As the instructions inside the element defined by this tag are the same we would use in a CSS file, the possibilities to modify elements within the same HTML document are many.
<style>
#fairy-tale {
background-color: #e88;
line-height: 30px;
padding: 20px 60px;
font-size: 18px;
font-style: italic;
border: 3px solid black;
border-radius: 24px;
}
</style>
<p id="fairy-tale">Once upon a time there was a sweet little girl. Everyone who saw her liked her, but most of all her grandmother, who did not know what to give the child next. Once she gave her a little cap made of red velvet. Because it suited her so well, ...</p>Once upon a time there was a sweet little girl. Everyone who saw her liked her, but most of all her grandmother, who did not know what to give the child next. Once she gave her a little cap made of red velvet. Because it suited her so well, …
It is possible to define the style of an element within its opening tag (or its unique tag for unpaired tags like <img>). This is due to the fact that style is also one of the HTML Global Attributes. Here a quick example:
<p style="background: linear-gradient(slateblue, #c77, #fc5); color: #fff; line-height: 80px; padding: 10px; text-align: center; font-family: serif; font-size: 21px; font-weight: bold; font-style: italic;">I like sunsets.</p>I like sunsets.
As you can see, it’s possible to use the style element similarly how the script element gets used: either putting the CSS code between its tags or within an opening tag of another element.
Go on to learn more about HTML by checking out the input element and other form elements 📝 populating HTML websites 🚀.
