HTML semantic tags cheat sheet

Choose the tag that explains the job.

A practical reference for <header>, <nav>, <main>, <article>, <section>, <aside>, and <footer>. Start with meaning, then use the complete example and six checks to review your page.

Learn semantic HTML in 18 minutes

Free course overview · Full lesson readable before signup

A semantic page anatomyMeaning before styling
<header>
Page title<nav>
<main>
<article>
Self-contained storyHeading + content
<aside>Related context
<footer>Source and authorship

The fast rule

Pick an element for what the content is, not how it looks.

Semantic elements describe the role of content. CSS controls its appearance. That separation makes a document easier to navigate, maintain, and interpret without forcing a particular visual design.

Start by asking what job a block performs. Is it the page’s unique content? Use <main>. Could it stand alone? Try <article>. Is it one named topic within something larger? Consider <section>. If the wrapper has no content meaning, <div> remains the honest choice.

Quick reference

Eight tags and the job each one does.

<header>Introduces a page or a section.

Use it when: Use it for a title, introductory copy, logo, or local navigation that belongs to the nearest page, article, or section.

Watch for: Do not assume every header must sit at the very top of the document. An article can have its own header.

<nav>Groups major navigation links.

Use it when: Use it for a primary menu, a table of contents, or a set of links that helps people move through the site or page.

Watch for: Do not wrap every small group of links in nav. Footer policies and one-off links often need no navigation landmark.

<main>Contains the page’s unique central content.

Use it when: Use one visible main element for the content that makes this page different from the rest of the site.

Watch for: Do not place repeated site navigation, the site-wide footer, or more than one visible main region inside a document.

<article>Holds a self-contained composition.

Use it when: Use it when the content could stand on its own or be reused elsewhere, such as a post, tutorial, review, or forum message.

Watch for: Do not use article merely because a block is visually large. Independence is the test, not size.

<section>Groups a themed part of a document.

Use it when: Use it when a heading can name the group and the group belongs to a larger page or article.

Watch for: Do not use section as a styling wrapper. If no useful heading exists, a div may describe the structure more honestly.

<aside>Adds related but nonessential context.

Use it when: Use it for a glossary, pull quote, related links, author note, or sidebar that supports the surrounding content.

Watch for: Do not put information in aside if understanding the main content depends on it.

<figure>Connects media or an example with its caption.

Use it when: Use it for an image, diagram, code sample, or table that can be referenced as one unit. Pair it with figcaption when a caption helps.

Watch for: Do not use figure just to center an image. The content-and-caption relationship is what gives it meaning.

<footer>Closes a page or section with supporting information.

Use it when: Use it for authorship, related links, legal text, or source details that belong to the nearest page, article, or section.

Watch for: Do not limit footer to the bottom of the website. An article can have its own footer too.

The common fork

Article, section, or div?

These elements can all wrap a block, but they do not communicate the same thing. Use the smallest decision that fits the content.

  1. 01

    Could this content stand on its own?

    If it still makes sense in a feed, search result, or another page, use <article>.

  2. 02

    Can a heading name this part?

    If it is one distinct topic inside a larger document, use <section>.

  3. 03

    Is the wrapper only for layout or behavior?

    If it has no content role of its own, use <div>.

Complete example

A small page with a clear reading order.

Read the structure without the CSS. The element names still tell you where the page begins, what matters most, what can stand alone, and what is supplementary.

<body>
  <header>
    <a href="/">Field Notes</a>
    <nav aria-label="Primary">
      <a href="/guides">Guides</a>
      <a href="/about">About</a>
    </nav>
  </header>

  <main>
    <article>
      <header>
        <p>HTML foundations</p>
        <h1>How landmarks shape a page</h1>
      </header>

      <section aria-labelledby="why-landmarks">
        <h2 id="why-landmarks">Why landmarks matter</h2>
        <p>They give each region a recognizable job.</p>
      </section>

      <aside aria-labelledby="quick-check">
        <h2 id="quick-check">Quick check</h2>
        <p>Can you find the page’s unique content?</p>
      </aside>

      <footer>
        <p>Written by the Field Notes team.</p>
      </footer>
    </article>
  </main>

  <footer>
    <p>© Field Notes</p>
  </footer>
</body>

1The site header and site footer sit outside main because they repeat across pages.

2The article has its own header and footer because both describe that self-contained story.

3The section and aside each have a heading, so their purpose stays clear in the document outline.

Before you ship

Review the page in six checks.

A semantic page should make sense before its colors, columns, and spacing load. Use these checks on the HTML itself.

  1. 01

    One visible main

    The page has one main element around its unique content, outside the repeated site header and footer.

  2. 02

    A logical heading outline

    The h1 names the page, and lower-level headings describe nested topics without jumping levels for visual size.

  3. 03

    Navigation earns its landmark

    Nav wraps a meaningful route or table of contents, not every cluster of links.

  4. 04

    Articles can stand alone

    Each article makes sense if it appears in a feed, search result, or another page.

  5. 05

    Sections have names

    Each section represents a real topic and normally begins with a heading that identifies it.

  6. 06

    Generic wrappers stay generic

    Div and span handle layout or styling when no semantic element describes the content’s job.

Want to apply the reference to a real page? Build a saved semantic HTML article in the focused lesson.

Short answers

Semantic HTML FAQ

What is semantic HTML?

Semantic HTML uses elements whose names describe the role of their content. A main element communicates more than a generic div because its purpose is built into the markup.

Should I use section or div?

Use section for a named topic within a larger document, usually with its own heading. Use div when you only need a neutral wrapper for layout, styling, or scripting.

Can an article contain sections?

Yes. An article can contain sections when each section covers a distinct part of that self-contained article. A section can also contain articles when it groups several independent entries under one theme.

Does semantic HTML improve SEO?

It helps search engines and assistive technology understand page structure, but it does not guarantee rankings. Useful content, crawlability, links, and a clear answer to the search query still matter.