Semantic HTML: HTML Semantic Tags for Better SEO

You can build a whole page out of div elements, and it will look fine in the browser. But to a screen reader, a search engine or another developer, it is a pile of anonymous boxes. Writing semantic HTML fixes that by using elements whose names describe their purpose, such as nav, article and footer.

This guide shows the main semantic elements, how they fit together, and why they matter for accessibility and search. For the groundwork, see the HTML basics guide.

What "semantic" means

Semantic simply means "carrying meaning." A div says nothing about its content. A nav element says, "this is a group of navigation links." The browser displays both the same way by default, but the meaning is what machines read.

Compare these two versions of a page skeleton.

<!-- Non-semantic: every box is a div -->
<div class="header">...</div>
<div class="nav">...</div>
<div class="content">...</div>
<div class="footer">...</div>

<!-- Semantic: the tags explain themselves -->
<header>...</header>
<nav>...</nav>
<main>...</main>
<footer>...</footer>

The second version is shorter, easier to read, and does not rely on class names to explain itself.

The elements you will use most

• header: introductory content for a page or a section, often a logo and title.
• nav: a block of major navigation links. Not every group of links needs one, just the main menus.
• main: the central content of the page. Use it once per page.
• article: a self-contained piece that makes sense on its own, such as a blog post, news story or product card.
• section: a themed group of content, normally with its own heading.
• aside: related but secondary content, like a sidebar or a pull quote.
• footer: closing information such as copyright, contact links or related pages.
• figure and figcaption: an image, chart or code sample with a caption.
• time: a date or time, with a machine-readable value.

Putting it together

Here is a small blog page using these elements.

<body>
  <header>
    <h1>Coffee Notes</h1>
    <nav>
      <a href="/">Home</a>
      <a href="/about">About</a>
    </nav>
  </header>

  <main>
    <article>
      <h2>How to brew a better cup</h2>
      <p>Published <time datetime="2026-10-08">8 October 2026</time></p>
      <p>Start with fresh beans...</p>
    </article>
    <aside><p>Subscribe for weekly tips.</p></aside>
  </main>

  <footer><p>&copy; Coffee Notes</p></footer>
</body>

Notice what the structure tells you before you read a single word: there is a site header with navigation, one main area holding an article and a side note, and a footer.

Related reading: HTML Accessibility Best Practices for Inclusive Websites

Article, section or div?

This is the choice that confuses beginners most. A quick test helps.

1. Could this content be lifted out and published on its own, like a news item or a comment? Use article.
2. Is it one themed chunk of a larger page that deserves its own heading? Use section.
3. Is it only a wrapper for styling or layout? Use div.

Nobody will penalise you for picking div when you are unsure. A wrong semantic element can be worse than a neutral one, because it tells assistive tools something untrue.

Why it helps accessibility

People who use screen readers often jump between landmarks instead of listening to a page from top to bottom. Elements like nav, main and footer create those landmarks for free. A user can say "skip to main content" and land in the right place. Semantic buttons and links also work with the keyboard automatically, which a clickable div does not.

Why it helps SEO, and what it does not do

Search engines read your HTML to understand what a page is about and how it is organized. Clear headings, an article wrapper and a main region make that job easier. That is a real benefit, but be realistic. Using semantic tags does not guarantee a higher ranking on its own. Content quality, relevance and speed still carry far more weight. Think of semantic markup as removing obstacles, not adding magic. Pair it with good titles and descriptions, which we cover in meta tags for SEO.

A quick way to test your page

Try reading your page with the CSS turned off, or use the browser's reader mode. If the content still appears in a sensible order with clear headings and lists, your markup is doing its job. You can also press Tab repeatedly and watch the focus: links and buttons should be reachable in a logical order without any extra work from you.

Headings: the outline of your page

Headings are semantic too. Use h1 for the main topic, then h2 for sections and h3 for subsections, without skipping levels just because you like the font size. Pick the level by meaning and change the size with CSS. A page should normally have one h1.

Use the right element for the job

A few swaps make a big difference:

• Use button for actions and a for links, not clickable div elements.
• Use ul and li for lists, not lines of text with dashes.
• Use strong and em for importance and emphasis, not only for bold and italic looks.
• Use table for data tables, not for page layout.

The div and span elements still have a place. They are fine when nothing more meaningful fits, usually as a styling hook. If you want to know how they behave on screen, read about inline and block elements.

Common mistakes

• Div soup: wrapping everything in div out of habit.
• Using section as a generic wrapper. If it has no heading and is only for styling, a div is the honest choice.
• Several main elements on one page.
• Picking tags for their looks, such as a heading for big text or a blockquote just to indent.
• Skipping heading levels, which confuses people who navigate by headings.

Our list of common HTML mistakes has more of these, and you can keep learning in the HTML category.

Conclusion

Semantic markup is a habit more than a technique. Keep these points:

• Choose elements for their meaning, then style them with CSS.
• Use header, nav, main, article, aside and footer to outline the page.
• Keep a logical heading order with a single h1.
• Expect better accessibility and clearer structure, not guaranteed rankings.
• Fall back to div only when no meaningful element fits.