Originally published on CodingCush.
HTML semantic tags are elements that clearly describe their meaning and the type of content inside them, for both browsers and people reading the code. Tags such as header, nav, main, article, section and footer tell everyone what each part of a page is for, without guessing from class names. A header is for introductory content, nav is for main links, main holds the primary content, article holds a self contained piece, section groups related content, and footer holds closing information. Using them makes your pages easier to read, more accessible for screen readers, and clearer for search engines.
What Are Semantic Tags, in Simple Words?
The word semantic simply means related to meaning. A semantic tag carries meaning in its name. When you see a nav element in code, you instantly know it contains navigation links. When you see a generic div element, you know almost nothing. It could be a menu, a product card, a warning box, or just a wrapper someone added at midnight and forgot about.
Before HTML5, developers built almost every layout with div elements and added class names like header or footer to explain them. That worked visually, but the browser had no idea what those boxes really were. HTML5 gave us proper elements with built in meaning, so structure is clear in the markup itself.
If you are still getting comfortable with how a page is put together, it helps to first understand the difference between HTML, CSS and JavaScript. HTML provides this structure and meaning, CSS styles it, and JavaScript adds behaviour. Semantic tags belong firmly to the HTML side of that team.
Why Semantic Tags Matter
First, accessibility. Screen readers use landmarks such as header, nav, main and footer to help users jump straight to the part they need, instead of listening to every link on every page. That is a real kindness, not just a technical detail.
Second, search engines read your structure to understand a page. Clear structure does not magically rank you first, and anyone who promises that is selling magic beans. It does make content easier to parse, which supports good SEO. Third, maintainability: six months later, main and article explain themselves, while a pile of div elements named box2-wrapper-final does not. Browsers can also use the structure for reader modes that pull out the main article cleanly.
The HTML reference page on MDN, developer.mozilla.org, which lists the semantic elements.
The Main Tags: header, nav and main
The header element represents introductory content for a page or a section. On a full page, it usually holds the logo, site title and search box. An article can also have its own header, with its title, author and publish date.
The nav element is for a major block of navigation links, such as the main menu or a table of contents. You do not need to wrap every small group of links in it. The full list of elements is documented in the HTML reference on MDN at developer.mozilla.org, which is worth bookmarking.
The main element holds the dominant, unique content of the page. There should be only one visible main per page, and it should not include repeated parts such as sidebars, logos or the main menu.
article, section and footer Explained
An article represents a complete, self contained piece that could make sense on its own if shared separately. Blog posts, news stories, reviews and comments are classic examples. A simple test helps: if you copied that block elsewhere and it still made sense, it is probably an article.
A section groups related content together, usually with its own heading. Use it to divide a long page into chapters, such as features, pricing and testimonials. If you are grouping things only for styling, a plain div is still the honest choice.
The footer holds closing information, such as copyright text, contact details and policy links. An article footer might hold the author bio or tags. Two helpful relatives are aside, for loosely related content such as a sidebar, and figure, which groups media with its caption.
A Complete Page Layout Example
Here is a small but complete page that uses all six tags together. Notice how the structure tells the story of the page before any CSS is added. Our guide to CSS Flexbox explained with examples is a good next step for styling it.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>My Simple Blog</title> </head> <body> <header> <h1>My Simple Blog</h1> <p>Notes on learning web development.</p> </header> <nav> <a href="/">Home</a> <a href="/about">About</a> <a href="/contact">Contact</a> </nav> <main> <article> <header> <h2>My First Post</h2> <p>Published on 6 November 2026</p> </header> <section> <h3>Introduction</h3> <p>This is the opening part of the post.</p> </section> <section> <h3>Main Points</h3> <p>This section holds the key ideas.</p> </section> <footer> <p>Written by a beginner developer.</p> </footer> </article> </main> <footer> <p>Copyright 2026 My Simple Blog.</p> </footer> </body> </html> Notice that header and footer appear twice, once for the page and once inside the article, and that is perfectly valid. Also notice the heading order: h1, then h2, then h3. Keeping headings in order helps readers and assistive tools follow the outline.
Semantic Tags vs Generic div Elements
Div elements are not banned, and you do not need to delete every one of them in a panic. A div is still the right tool for a pure styling wrapper with no meaning. The point is to choose the semantic element when a clear one exists, and fall back to div only when none fits.
| Need | Semantic choice | Generic div version |
|---|---|---|
| Top of a page or article | header, meaning is clear to browsers and screen readers | div with a class, meaning only in the class name |
| Main navigation links | nav, announced as a navigation landmark | div with a class, no landmark created |
| Primary page content | main, one per page, easy to jump to | div with a class, tools must guess its role |
| Independent piece of content | article, can stand alone and be shared | div with a class, relationship stays unclear |
| Thematic group with a heading | section, groups related content clearly | div with a class, grouping is visual only |
| Closing information | footer, recognised as closing content | div with a class, no built in meaning |
The visual result can look identical in both columns. The difference is what the code communicates behind the scenes. MDN also explains grouping in its guide to content categories on MDN.
Common Mistakes and Good Habits
A common mistake is using section for everything. If a block has no heading and no real meaning, a div is cleaner. Another mistake is having more than one main, or placing the site header and menu inside main.
Avoid skipping heading levels just to change font size. Use CSS for size, and keep headings in order. Do not replace a button with a styled div either: a real button gives you keyboard support for free.
Good habits are simple. Sketch each page outline with header, nav, main and footer, then add article and section where content naturally splits. Ask whether the structure still makes sense with styling removed. If it does, you are on the right track.
Frequently Asked Questions
Do semantic tags change how a page looks?
No, not by themselves. Most semantic elements look like plain block boxes by default. You still use CSS to style them, just as you would style a div.
Can I use more than one header or footer on a page?
Yes. A page can have a header and footer for the whole page, and each article or section can have its own. Each one belongs to its nearest parent section.
How many main elements can a page have?
Only one visible main element per page. It must hold the unique, primary content of that page, not menus, logos or other repeated blocks.
Is a section better than a div?
Use section when you are grouping related content, usually with a heading. Use div when the group exists only for styling and carries no meaning of its own.
Do semantic tags help SEO?
They help search engines understand your structure more clearly, which supports good SEO. They are not a ranking shortcut, so combine them with helpful content and clear headings.
Conclusion
Semantic tags are a small habit with a long payoff. Use header for introductions, nav for major links, main for the unique content, article for self contained pieces, section for related groups, and footer for closing information. Your code becomes easier to read, your pages become kinder to assistive tools, and search engines get a clearer picture. Start with your next small page, write the outline first, and let the tags describe the content honestly. That is most of the job done.
