HTML5 Semantic Tags Explained: header, nav, main, article, section, and SEO
Semantic tags are an HTML5 mechanism for telling browsers and search engines what role each part of a page plays. This article explains the roles of header, nav, main, article, section, aside, and footer, how they differ from div, their effect on SEO and accessibility, and how to think about correct markup.
When you look at the source of a web page, you may see tags with descriptive names like <header> or <article>. These are HTML5 semantic tags. "Semantic" means "relating to meaning," and these tags express what role an element plays within the page, not as appearance but as meaning. This article explains the roles of the main semantic tags step by step, and why they are better than markup full of <div> elements.
What Are Semantic Tags
Semantic tags are HTML elements whose names themselves describe "what" their contents are. For example, <nav> means "an area of navigation," and <footer> means "the closing area of a page or article." Just by looking at the tag name, both humans and programs can understand the role that part fulfills.
By contrast, <div> and <span> are "just boxes" that carry no meaning of their own. They are handy for grouping elements for layout, but you cannot tell from the tag whether that box is a heading, a menu, or body text. HTML5 recommends replacing such "meaningless boxes" with meaningful tags that fit the content.
Semantic HTML accurately conveys a page's structure to non-human readers such as browsers, search engines, and assistive technologies (like screen readers). When you want to check whether your HTML is well organized, tidy the indentation with the HTML Formatter so the nesting structure and tag correspondence become clear at a glance.
Roles of the Main Tags: header/nav/main/article/section/aside/footer
The representative semantic tags added in HTML5 include the following. Understanding the area each one covers lets you build a page by dividing it into meaningful blocks.
| Tag | Role |
|---|---|
| <header> | The opening of a page or article; holds the logo, site name, headings, etc. |
| <nav> | The area of primary navigation (menus or link collections) |
| <main> | The page's primary content; only one per page |
| <article> | Self-contained, independent content (an article, a post, etc.) |
| <section> | A meaningful grouping; usually a chapter or section with a heading |
| <aside> | Supplementary content set apart from the body, like a sidebar or related links |
| <footer> | The end of a page or article; copyright notices, supplementary links, etc. |
<header> and <footer> can be used not only for the whole page but also as the "opening" and "ending" inside an <article>. In other words, there may be several per page. On the other hand, <main> represents the central content of the page, so the rule is to place only one per page.
<article> and <section> are often confused, but the test is "does it still make sense if you cut it out on its own?" Think of it this way: content that stands alone, like a blog post, news item, or a single comment, is <article>, while a grouping that is part of a document, like a chapter, is <section>. <aside> is supplementary information off the main line, used for parts that can be removed without hurting understanding of the body.
How They Differ From div: Meaningful Markup
The value of semantic tags becomes clear when compared with <div>. The following two can look exactly the same, yet the information they convey is completely different.
<div class="nav">…</div> / <nav>…</nav>
On the left, <div class="nav"> lets a human guess its meaning from the class name "nav," but a class name is merely a label the developer added for convenience. To a browser or search engine, there is no guarantee that it is navigation. On the right, <nav> declares as part of the specification that "this is navigation," so any program that reads it interprets it the same way.
Of course, <div> has not become unnecessary. When there is no semantic role and you simply want to group elements for layout, <div> is still appropriate. What matters is the distinction: "if it has meaning, use a semantic tag; if it has no meaning and is only for appearance, use <div>." If you are unsure which tag to choose, first tidy the structure with the HTML Formatter and take a bird's-eye view of which block represents what.
Effect on SEO: Conveying Structure
Search engine crawlers read a page's HTML and try to understand "where the body is, and where the navigation or supplements are." Using semantic tags lets you explicitly help this understanding.
- Identifying the body: parts wrapped in
<main>or<article>are more easily recognized as the page's central content. - Distinguishing helper areas:
<nav>and<aside>can signal that they are guidance or supplements rather than body text, making it easier to focus what gets evaluated. - Consistency with heading structure: combining
<section>with appropriate headings (h1–h6) makes the document hierarchy clear.
That said, it is not as simple as semantic tags directly raising your ranking. They are merely a foundation for accurately conveying content structure and reducing misunderstanding. Similarly, the <title> and meta tags that summarize the page's content also aid structural understanding. When you want to prepare these quickly, the Meta Tag Generator is handy: just enter a title and description to produce the proper markup. Giving markup meaning and arranging meta information both point in the same direction, namely explaining the page carefully to crawlers.
Effect on Accessibility: Screen Readers
The effect of semantic tags is most pronounced in accessibility. A screen reader, used by people with visual impairments, does not "see" the screen but conveys the page by reading out the HTML structure. Here, the meaning of the tags directly becomes a cue for operation.
Many screen readers have a feature to jump straight to regions (landmarks) such as <nav> or <main>. If regions are defined with semantic tags, users can intuitively perform actions like "jump to the main content" or "move to navigation." Conversely, on a page built only with <div>, there are no such cues, and the only option is to read everything in order from the top.
In other words, semantic HTML serves to deliver the structure visible by mouse to those who cannot see it, in the same way. This is not an issue for only some users; it improves usability across many environments, such as keyboard operation and voice browsers. Choosing tags that match meaning directly means building "a page usable by more people."
How to Think About Correct Markup
Semantic markup is not about memorizing difficult rules; it is the habit of honestly asking "what is this part?" and choosing the tag that fits. Keep a few guidelines in mind.
- Do not choose by appearance: decide the tag by "what its role is," not because it is blue or laid out side by side. Styling is CSS's job.
- Ask whether it has meaning: use a semantic tag if it has a semantic role, and
<div>if it is purely for layout. - Use headings correctly: add a heading to each
<section>and do not skip the h1–h6 order. - Only one main: gather the page's lead content into a single
<main>.
Semantic tags are not for changing appearance; they are for conveying a page's structure and meaning accurately. Meaningful markup is kind to search engines, to screen readers, and to whoever reads the code in the future. Start by tidying your HTML with the HTML Formatter, and while checking the structure, replace <div> with meaningful tags. If you also arrange your title and description with the Meta Tag Generator, the overall "clarity" of the page rises another notch.
Please note that this article is intended to provide general information. HTML specifications and the recommended use of each tag can be updated. When implementing, make your decision after checking the latest official specifications and documentation.
FAQ
What are semantic tags?
Semantic tags are HTML elements whose names themselves describe "what" their contents are. For example, header is the opening area, nav is navigation, and main is the primary content. Because the role is clear just from the tag name, the page structure is conveyed accurately to non-human readers such as browsers, search engines, and screen readers.
How do I choose between div and semantic tags?
The basic rule is to use a semantic tag if there is a semantic role, and div if you simply want to group elements for layout. A div is a meaningless box, so for parts with a clear role like navigation or body text, choose tags that fit the content such as nav, main, or article. div has not become unnecessary; it is still used as a grouping element for appearance.
What is the difference between article and section?
The test is "does it still make sense if you cut it out on its own?" Use article for content that stands alone, like a blog post, a news item, or a single comment, and section for a grouping that is part of a document, like a chapter. A section usually carries a heading to show what the grouping is.
Do semantic tags help SEO?
Semantic tags are not magic that directly raises your ranking, but they form a foundation for accurately conveying structure such as body, navigation, and supplements to search engines. Showing primary content with main or article, and clarifying the hierarchy with section and headings, helps crawlers understand the page without misunderstanding.
Are the WAZA TOOLS HTML Formatter and Meta Tag Generator safe to use?
Yes. The WAZA TOOLS HTML Formatter and Meta Tag Generator run entirely in your browser, so the HTML and text you enter are never sent to or stored on a server. They work on smartphones too, and you can use them as many times as you like, for free.