Semantic HTML is the use of HTML tags that provide meaning and context to the content they enclose, beyond their mere visual appearance.
The idea is that, instead of using generic containers that say nothing about what they hold inside, we use specific tags that explain the function of each block of our page.
Why is Using Semantic HTML Important?
You might be thinking that if the page looks the same visually whether you use <div> or <article>, why bother learning new tags?
There are two reasons:
Accessibility
Screen readers used by people with visual impairments read these tags to help them navigate. If you use <nav>, the machine can tell the user, “Here is a menu.” If you use a <div>, the user has no idea what that list of links is.
SEO (Search Engine Optimization)
Google’s bots are blind. They can’t see how beautiful your page looks with CSS; they only read your HTML code. If you put your most important text inside an <article> and a <main>, Google will understand that this is the relevant content and rank you better.
Semantic Tags
The div tag (from division) is a generic container. It serves to group things, but it provides no information about what type of content it is grouping.
By using a <div> for the header, another for the navigation menu, another for the main content, and twenty more for articles, the page code becomes much harder to understand.
To solve this, the HTML5 standard introduced a series of structural tags that work exactly like a div, but with a proper name.
The Main Structural Tags
Let’s review the fundamental pieces that you should use from now on to structure the skeleton of your web pages.
Represents the introductory header of the page or a section. It is typically where we place the website logo, the main title, and sometimes a search bar or login buttons.
It can also appear inside an <article> or a <section> to introduce that specific block. For example, a news card could have its own <header> with the title, date, and author.
(Do not confuse it with the <head> we saw earlier, which is the technical and invisible header of the document).
As its name suggests, it groups the main navigation links of the site. That top menu with its unordered lists, which we saw in the previous article, should always be wrapped inside a <nav>.
You don’t need to use <nav> for every group of links. For example, a list of scattered links within the content can remain a simple list. Reserve it for blocks that genuinely help the user navigate the website.
This is the most important container in terms of content. It defines the main and unique block of information for that specific page.
Everything that constitutes the “core” of the matter (the text of an article, the products in a store, the content of a tool, or the main listing of a page) should go here.
There should only be one visible <main> per document, and it should not contain elements that repeat across other pages, such as sidebars, footers, or main menus.
It is used to group a block of thematic content within your page. For example, on a homepage, you might have a <section> for “Our Services,” another for “Testimonials,” and another for “Contact.”
A good rule of thumb is that a <section> should normally be able to have its own heading. If you are only grouping elements for CSS styling purposes, a <div> is often still a perfectly valid option.
It is used for content that makes sense on its own and could be distributed independently. The classic example is a blog post, a newspaper article, or a product card in an online store.
The key is to think if that block could be taken out of the page and still be understood by itself. A comment, a review, a recipe, or a social media post could also be good candidates for using <article>.
Represents related but secondary content concerning the main content. It could be a sidebar, a box of related links, a complementary note, or an information block accompanying the article.
It is not the page’s protagonist but helps complete the context. For example, within an article, you could use an <aside> to show recommended links, a brief author biography, or an additional clarification.
<aside>
<h2>Related articles</h2>
<ul>
<li><a href="/html-basico/">Basic HTML</a></li>
<li><a href="/css-selectores/">CSS Selectors</a></li>
</ul>
</aside>
Represents the page footer. That classic block at the very bottom where we usually put the legal notice, links to social media, and the copyright year (and other information that no one ever reads 🤭).
It can also be used inside other blocks, like an <article>, to include closing information: author, publication date, related links, or sharing buttons. It doesn’t always have to be the global footer of the entire website.
A Complete Example
Looking at each tag individually, semantic HTML might seem like a list of new names to memorize. But in practice, it’s easier to understand when we see all the pieces working together.
<body>
<header>
<h1>My Tech Blog</h1>
<nav>
<a href="/">Home</a>
<a href="/articles/">Articles</a>
<a href="/contact/">Contact</a>
</nav>
</header>
<main>
<article>
<h2>How to Get Started with Semantic HTML</h2>
<p>Semantic HTML helps structure our pages better.</p>
</article>
</main>
<footer>
<p>© 2026 My Tech Blog</p>
</footer>
</body>
Notice that we haven’t eliminated containers. What we have done is chosen containers with meaning. The browser, screen readers, and anyone reading the code understand the role of each part much better.
