Unofficially, the HTML tags are divided into two types:
- Container tags that have separate opening and closing tags
- Empty tags that are immediately closed after their definition
The empty tags are also called void tags sometimes. They are self-closing tags like <img />, <br />, <input /> tags.
The container tags are tags that have some content between their opening and closing tags.
Some examples are the <html>, <head>, and <body> tags.
The <html> tag is used to contain all other tags that make up your webpage.
The <head> tag is used to add meta information to your webpage that will be used by the browser. This is where you add the charset, title, external style and script files to your HTML page.
Finally, there is the <body> tag where you define the structure of your webpage and determines the content to display in the browser.
Inside the <body> tag, you have two kinds of container tags divided from their intent:
- Styled container tags
- Block container tags
Let’s learn about styled container tags, then we’ll move on to structure container tags
HTML styled container tags
Styled container tags are container tags that have unique default styling applied to them by the browser.
The hyperlink tag <a> is an example of a styled container tag because the browser will apply a certain default styling to it.
In Google Chrome, the <a> tag will be styled as follows:
a:-webkit-any-link {
color: -webkit-link;
cursor: pointer;
text-decoration: underline;
}
The CSS for the <a> tag above comes from user agent stylesheet, which is the default style provided by browsers to visually present the <a> element in a manner that satisfies the HTML standard.
The full list of styled container tags are as follows:
- Hyperlink
<a>tag - Header tags from
<h1>to<h6> - Paragraph
<p>tag - Text style tags like
<i>that makes your text italic and<b>for bold style - The
<button>tag for buttons - List tags like
<ol>,<ul>, and<li>
The browser will apply the default styling for the elements above so they have the right visual representations.
Finally, there are block container tags that are used to structure your webpage semantically.
HTML block container tags
HTML block container tags are used to divide your HTML documents between sections so that they are easier to understand for both web developers and browsers.
Before HTML5, the only block container tag is the <div> tag which has the following default style:
div {
display: block;
}
The <div> tag is a generic container tag that you can use to divide your HTML body into several sections.
For example, you can divide a single blog post into three sections:
- The post header
- The post content
- The post footer
Here’s how you divide the post using <div> tags:
<div id="article">
<div id="header">
<h1>Blog post title</h1>
<p>Publish date</p>
</div>
<div id="content">Here's the blog post content</div>
<div id="footer">Thank you for reading!</div>
</div>
Or you can also use the <div> tag to group together your navigation bar elements at the top of the page:
<div id="nav">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/blog">Blog</a></li>
</ul>
</div>
Using the <div> tags to divide and contain specific parts of your HTML document serves two purposes:
- The document structure will be more intuitive (easier to maintain and modify)
- You can apply more sophisticated CSS styling for your webpage
Overtime, using the <div> tag with id attributes for dividing an HTML document structure becomes a common pattern.
Still, using the id attribute to describe the meaning behind the <div> tag means that there is no standard approach to sectioning an HTML document.
When drafting the specs for HTML5, the W3C organization decided to add new semantic tags to replace the generic <div> tag. They are as follows:
<nav>tag for your navigation elements grouping<main>tag describes the main content of your page<aside>tag describes the secondary content of your page, usually for sidebars<article>tag describes independent article section(s) of your page<header>tag describes a header for the page or an article<section>tag describes a separate generic section<footer>tag describes the footer for the page or an article
These new tags are rendered on the browser just like the <div> tag. They only have the display:block property style applied by default:
nav {
display: block;
}
main {
display: block;
}
aside {
display: block;
}
For web developers, these semantic tags mean that structuring an HTML document becomes more intuitive.
For example, you can use the <nav> tag instead of the <div id="nav"> tag for your navigation bar:
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/blog">Blog</a></li>
</ul>
</nav>
For a blog post, you can use a mix of semantic elements as shown below:
<article>
<header>
<h1>Blog post title</h1>
<p>Publish date</p>
</header>
<section>Here's the blog post content</section>
<footer>Thank you for reading!</footer>
</article>
The semantic tags also make your document more informative to browsers and search engines.
When you’re writing a blog post, search engines will look for semantic tags to interpret your content more accurately.
Since HTML5 is the living standard for writing HTML documents, web developers are expected to use semantic tags to structure their HTML documents properly.
