Runnable HTML Docs: Semantic HTML

Q: What are the semantic tags in HTML?

The layout tags are , , , , , and . Other common semantic tags include , , , , , and the headings to .

Q: Is div a semantic element?

No. has no meaning of its own; it is a generic box for styling and layout. Use it when no semantic tag fits, and use , , and the others when one does.

Q: How many main elements can a page have?

One visible per page. It wraps the content that is unique to that page, and it should not sit inside , , , or .

What semantic HTML is

Semantic HTML means picking each tag for what the content is: navigation goes in <nav>, the main content in <main>, a blog post in <article>. The tags look like plain boxes, but they tell the browser, screen readers and search engines what each part of the page does. Here is a full page built from the semantic layout tags, with each one outlined and labelled:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Semantic layout</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    header, nav, main, article, aside, footer {
      border: 2px dashed #2563eb; padding: 8px; margin: 6px 0;
    }
    header::before, nav::before, main::before,
    article::before, aside::before, footer::before {
      display: block; font: 12px monospace; color: #2563eb;
    }
    header::before { content: "<header>"; }
    nav::before { content: "<nav>"; }
    main::before { content: "<main>"; }
    article::before { content: "<article>"; }
    aside::before { content: "<aside>"; }
    footer::before { content: "<footer>"; }
    .cols { display: flex; gap: 8px; }
    .cols article { flex: 2; }
    .cols aside { flex: 1; }
  </style>
</head>
<body>
  <header>
    <strong>My Blog</strong>
    <nav><a href="#">Home</a> | <a href="#">Posts</a> | <a href="#">About</a></nav>
  </header>
  <main>
    <div class="cols">
      <article>
        <h1>Learning HTML</h1>
        <p>A post about semantic tags.</p>
      </article>
      <aside>Related posts</aside>
    </div>
  </main>
  <footer>&copy; 2026 My Blog</footer>
</body>
</html>

Delete the <style> element and the page looks like plain text, but the structure is still there for anyone reading the code, and for software that reads it without looking at the pixels.

The semantic layout tags

Tag	Use it for	Screen reader landmark
`<header>`	The intro of the page or of an article: logo, title, byline	banner (only when it is not inside `article`, `aside`, `main`, `nav` or `section`)
`<nav>`	A block of major navigation links	navigation
`<main>`	The content unique to this page, once per page	main
`<article>`	A self-contained piece that makes sense on its own: a post, a comment, a product card	none by default
`<section>`	A themed group of content with its own heading	region, only when it has an accessible name
`<aside>`	Related content beside the main flow: a sidebar, a note	complementary
`<footer>`	Closing info of the page or of an article: copyright, author, links	contentinfo (only at page level)

Each tag has its own page with more detail: header, nav, section and footer. This page covers how they fit together.

Why not just use div

A page built only from <div> elements can look identical to a semantic one. The difference is what the markup says. Press the buttons to outline the elements that carry meaning in each version:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>div vs semantic</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .page { border: 1px solid #e5e7eb; padding: 6px; margin-bottom: 10px; }
    .page > * { padding: 4px 8px; background: #f3f4f6; margin: 4px 0; }
    .on { outline: 3px solid #16a34a; }
  </style>
</head>
<body>
  <div class="page" id="divs">
    <div class="header">Site name</div>
    <div class="nav"><a href="#">Home</a> <a href="#">Posts</a></div>
    <div class="main">Page content</div>
    <div class="footer">Footer</div>
  </div>
  <div class="page" id="semantic">
    <header>Site name</header>
    <nav><a href="#">Home</a> <a href="#">Posts</a></nav>
    <main>Page content</main>
    <footer>Footer</footer>
  </div>
  <button onclick="mark('divs')">Outline meaning in div version</button>
  <button onclick="mark('semantic')">Outline meaning in semantic version</button>
  <p id="out"></p>
  <script>
    function mark(id) {
      document.querySelectorAll('.on').forEach(el => el.classList.remove('on'));
      const found = document.querySelectorAll('#' + id + ' :is(header, nav, main, aside, article, footer)');
      found.forEach(el => el.classList.add('on'));
      document.getElementById('out').textContent = found.length + ' semantic elements found';
    }
  </script>
</body>
</html>

The div version finds 0, the semantic version finds 4. That is what assistive technology sees: a screen reader user can jump straight to the navigation or the main content on the semantic page, and has to read through everything on the div page. Class names like class="nav" mean nothing to the browser.

<div> is still the right choice for boxes that exist only for styling or layout, like the .cols flex wrapper in the first example.

main, article and aside

<main> wraps what is unique to this page and appears once. Inside it, <article> marks content that would make sense copied to another site on its own, and <aside> marks content that is related but could be removed without breaking the article:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>article and aside</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    article { border: 2px solid #e5e7eb; padding: 0 12px; }
    aside.note {
      float: inline-end; width: 40%; margin: 0 0 8px 12px;
      background: #fef3c7; border: 1px solid #f59e0b; padding: 8px; font-size: 14px;
    }
    time { color: #6b7280; }
  </style>
</head>
<body>
  <main>
    <article>
      <header>
        <h1>Baking bread at home</h1>
        <p>By Dana, <time datetime="2026-09-24">September 24, 2026</time></p>
      </header>
      <aside class="note">
        <strong>Note:</strong> flour types vary, so adjust the water a little.
      </aside>
      <p>Mix flour, water, salt and yeast. Knead for ten minutes, then let the dough rise for an hour.</p>
      <p>Shape the loaf and bake it at 230&deg;C until the crust is dark.</p>
      <footer>Filed under: cooking</footer>
    </article>
  </main>
</body>
</html>

The article has its own <header> and <footer>. They are not limited to the page level: each one introduces or closes its nearest article or section. The <time datetime> element gives the date in a machine-readable form while showing it in a human one.

Check your heading outline

Headings are the other half of the structure. Screen reader users often move through a page heading by heading, so the levels should read like a table of contents with no skipped levels. This script prints the outline of the page it runs in:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Outline</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    pre { background: #111827; color: #e5e7eb; padding: 10px; }
  </style>
</head>
<body>
  <h1>Coffee guide</h1>
  <h2>Beans</h2>
  <h3>Arabica</h3>
  <h3>Robusta</h3>
  <h2>Brewing</h2>
  <h4>French press</h4>
  <pre id="outline"></pre>
  <script>
    const lines = [...document.querySelectorAll('h1, h2, h3, h4, h5, h6')].map(h => {
      const level = Number(h.tagName[1]);
      return '  '.repeat(level - 1) + h.tagName + ' ' + h.textContent;
    });
    document.getElementById('outline').textContent = lines.join('\n');
  </script>
</body>
</html>

The h4 under "Brewing" skips a level. Change it to h3 and the outline reads cleanly. Pick heading levels by structure, and change their size with CSS if you want them bigger or smaller.

More semantic tags

Semantics are not only about layout. These text-level tags carry meaning too:

Tag	Meaning
`<strong>`	Important text (bold by default)
`<em>`	Stressed emphasis (italic by default)
`<figure>` and `<figcaption>`	An image, chart or code sample with its caption
`<time datetime="...">`	A date or time in a machine-readable form
`<address>`	Contact details for the page or article author
`<mark>`	Highlighted text, such as a search match
`<abbr title="...">`	An abbreviation with its full form
`<button>`	Something that performs an action

<!DOCTYPE html>
<figure style="margin: 0; border: 1px solid #e5e7eb; padding: 8px; display: inline-block;">
  <img alt="Blue square" width="120" height="80"
    src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='80'%3E%3Crect width='120' height='80' fill='%232563eb'/%3E%3C/svg%3E">
  <figcaption>Figure 1: a caption tied to its image.</figcaption>
</figure>
<p>Search results for <mark>semantic</mark>. The <abbr title="World Wide Web Consortium">W3C</abbr> writes web standards.</p>

Hover the "W3C" abbreviation to see its full form in a tooltip.

Common mistakes

Using a tag for its look. <blockquote> is for quotations, not indentation; <h3> is for a heading level, not for medium-sized bold text. Style with CSS.
Wrapping everything in <section>. A section should have a heading and a theme. If you need a box for styling, use <div>.
More than one visible <main>. Keep one per page, and never nest it inside <article>, <aside>, <header>, <nav> or <footer>.
Putting every link list in <nav>. Save it for major navigation blocks, like the site menu or a table of contents. A few links in a footer do not need one.
Clickable <div> elements. A <div onclick> cannot be reached with the keyboard. Use <button> for actions and <a href> for navigation.

Frequently Asked Questions

What is semantic HTML?

Semantic HTML is markup where each tag describes the meaning of its content: <nav> for navigation, <article> for a self-contained piece, <button> for a button. The browser, screen readers and search engines can then understand the page without guessing from class names or styles.

What are the semantic tags in HTML?

The layout tags are <header>, <nav>, <main>, <article>, <section>, <aside> and <footer>. Other common semantic tags include <figure>, <figcaption>, <time>, <address>, <strong>, <em> and the headings <h1> to <h6>.

Is div a semantic element?

No. <div> has no meaning of its own; it is a generic box for styling and layout. Use it when no semantic tag fits, and use <header>, <main>, <nav> and the others when one does.

What is the aside tag used for?

<aside> holds content related to the main content but not part of its flow: a sidebar, a box of related links, a glossary note or a pull quote. At page level, screen readers list it as a complementary landmark.

How many main elements can a page have?

One visible <main> per page. It wraps the content that is unique to that page, and it should not sit inside <header>, <nav>, <article>, <aside> or <footer>.

Does semantic HTML help SEO?

It helps search engines understand which part of the page is the main content, which is navigation and how headings relate. It is not a ranking shortcut on its own, but it removes guesswork and it improves accessibility, which is worth doing anyway.

Related concepts