Skip to content

Semantic HTML: header, nav, main, article, section, aside and footer (with Examples)

Two pages can look identical and still be built very differently. One is a pile of <div> boxes; the other says "this is the site header, this is the navigation, this is the main content, this is a related sidebar". The second one lets a screen reader user jump straight to the content, helps search engines find the main text and is much easier for the next developer to change.

Quick answer

Use <header> for the site or section intro, <nav> for main navigation links, one <main> for the page’s main content, <article> for a self-contained piece such as a post, <section> for a themed part with a heading, <aside> for related side content and <footer> for the closing information. Use <div> only when no element has the right meaning.

20 min read and practice · Content checked on 20 October 2026

In this lesson you will

  • Lay out a full page with landmark elements
  • Choose between article, section and div
  • Explain how landmarks help screen reader users

Landmarks: the map of a page

Some elements create landmarks, regions that assistive technology lists so users can jump to them. A <header> that is not inside an article or section becomes the "banner" landmark, <nav> is "navigation", <main> is "main", <aside> is "complementary" and a top-level <footer> is "contentinfo". Screen readers such as NVDA and VoiceOver have keys to move between landmarks.

A page should have exactly one visible <main>. Put the content that is unique to this page in it, and keep repeated parts, such as the site header and footer, outside. Many sites also add a "Skip to content" link at the very top that points to #main; keyboard users then skip the menu with one key press.

Try it: A full page skeleton with landmarks
Code
ResultUpdates as you type
Console
  1. Console messages, errors, form data and clicked links appear here.

The result looks plain because there is no CSS yet. The structure is what matters here; the CSS course styles this same page.

article, section and div

Use <article> for content that would make sense on its own if you shared or reposted it: a blog post, a news story, a product card, a comment. Ask: "Could this appear alone in a feed?" If yes, it is an article. Articles can have their own <header> and <footer>, such as a byline and date.

Use <section> for a part of a page or article that has its own topic, and give it a heading. If you only need a box for styling, such as a wrapper for a grid, that is a <div>: it has no meaning, which is exactly right for a styling hook.

A few more semantic elements are worth knowing: <time datetime="2026-10-20">20 October</time> gives machines an exact date, <address> holds contact details for the page or article author, and <details> with <summary> makes a native expand and collapse block, used for the FAQ on this page.

Try it: An article with its own header and footer
Code
ResultUpdates as you type
Console
  1. Console messages, errors, form data and clicked links appear here.

Why it pays off

Semantic HTML is not only for accessibility. Browser reading modes use it to find the main text, search engines use it to separate content from menus, and your own CSS and JavaScript become simpler because you can target main nav instead of .div-wrapper-3. It costs nothing extra to write.

If a page has more than one <nav>, for example main menu and footer links, give each an aria-label such as "Main" or "Footer" so screen reader users can tell them apart.

Common mistakes

  • Div soup

    <div class="header">, <div class="nav"> and <div class="footer"> look the same but create no landmarks. Use the real elements.

  • More than one main

    Only one <main> should be visible per page. If you have two big areas, one is the main content and the other is probably an <aside>.

  • Section without a heading

    A <section> with no heading is usually just a box. Add a heading that names the topic, or use a <div>.

Exercise

Rewrite the div page with semantic elements: a header that contains a nav with at least two links, one main with an h1, an article with an h2 inside main, and a footer.

Code
ResultUpdates as you type
Console
  1. Console messages, errors, form data and clicked links appear here.
  • A header with a nav holding two links
  • A main element with an h1
  • An article with an h2 inside main
  • A page footer
Show one possible solution
<header>
  <nav aria-label="Main"><a href="/">Home</a> <a href="/blog">Blog</a></nav>
</header>
<main>
  <h1>My blog</h1>
  <article>
    <h2>First post</h2>
    <p>Hello!</p>
  </article>
</main>
<footer>© 2026</footer>

Quick quiz

  1. 1. A news site lists ten stories on its home page. Which element wraps each story card?
  2. 2. How many visible <main> elements should a page have?
  3. 3. You need a wrapper only to put three cards in a grid. Which element?
  4. 4. Which element gives a machine-readable date?
Answer every question to check.

Finished the lesson?

Questions people ask

Does semantic HTML improve Google rankings?

Google does not promise a ranking boost for any element. Semantic markup helps it understand which text is the main content, and it improves accessibility and reading modes, which is reason enough.

Can I have a header inside an article?

Yes. A <header> inside an article or section is that part’s intro, usually its heading and byline. Only the top-level header becomes the page banner landmark.

Is every group of links a nav?

No. Use <nav> for major navigation blocks such as the main menu, a table of contents or pagination. A few links inside a paragraph or a list of related articles do not need it.

What is ARIA and should I use it here?

ARIA attributes add accessibility information that HTML cannot express. The first rule of ARIA, from W3C, is to use a native HTML element when one exists, so prefer <nav> to <div role="navigation">.

How can I see the landmarks of a page?

Browser developer tools show the accessibility tree (in Chrome and Edge, open DevTools, then the Accessibility pane), and free extensions list landmarks. Screen readers also have a landmarks list.

Sources

Facts in this lesson were checked against these official pages on 20 October 2026.

Code examples stay in English and run in a sandbox on your device. Arabic text is pending native review. If you spot a mistake, tell us through the contact page.