Command Palette

Search for a command to run...

Hectal
PHASE 2Beginner ~26 min· topic 2 of 7

Topic 2.2

Semantic Page Layout

In one line

Elements like header, nav, main, article, section, aside and footer name the regions of a page, so browsers, search engines and screen readers know where the navigation, the main content and the extras are.

0/7 · 0%

Think of it like this

A newspaper. Everyone knows where to look: the masthead with the paper's name at the top, the sections (Sports, Business), each article with its own headline, a sidebar with the weather, and the small print at the bottom. You find things fast because every newspaper uses the same layout. Semantic elements give web pages that same shared layout, in code.

Words you'll meet

New words in this topic, in plain English. Come back here whenever one feels fuzzy.

Semantic
Having meaning. A semantic element says what its content is (navigation, an article), not how it looks.
Landmark
A named region of a page, like main or navigation, that screen-reader users can jump to directly.
Screen reader
Software that reads a page aloud (or to a braille display) for people who can't see the screen, e.g. NVDA, JAWS, VoiceOver.
Assistive technology
Any tool that helps disabled people use a computer: screen readers, switch controls, magnifiers, voice control.
header / footer
Introductory and closing content of the page, or of the article or section they sit in.
main
The one region holding the content that is unique to this page.
article
A self-contained piece that makes sense on its own: a post, a story, a comment, a product card.
section / aside
section: a themed group with a heading. aside: related extras beside the main flow, like a sidebar.

Step by step

01Start from a div page

Many old pages look like this: every region is a div with a class name. It works visually, but to a screen reader or search engine it's one long stream of unlabelled boxes.

before.htmlwhole filehtml
<div class="header">
  <div class="logo">Hectal Bakes</div>
  <div class="menu"><a href="/">Home</a> <a href="/recipes">Recipes</a></div>
</div>
<div class="content">
  <div class="post">...</div>
</div>
<div class="sidebar">...</div>
<div class="footer">© 2026</div>

02Name the page regions

Swap each region for the element that says what it is. The look stays the same (these elements are plain blocks by default), but now the page has a banner, navigation, main content, a complementary sidebar and contentinfo.

after.htmlwhole filehtml
<header>
  <p class="logo">Hectal Bakes</p>
  <nav>
    <a href="/">Home</a> <a href="/recipes">Recipes</a>
  </nav>
</header>
<main>
  <article>...</article>
</main>
<aside>...</aside>
<footer>© 2026</footer>
Name the page regionsdiagram
Rendering diagram…

03Decide between article, section and div

Ask three questions in order. Would this make sense on its own, outside the page? Use article. Is it a themed part with its own heading? Use section. Is it only a box for styling or layout? Use div.

Decide between article, section and divdiagram
Rendering diagram…

04Nest them where it makes sense

An article can have its own header (title, author, date) and footer (tags, share links), and can be split into sections. A blog post's comments can each be an article nested inside the post's article, because each comment stands alone too.

post.htmlwhole filehtml
<article>
  <header>
    <h2>Soft bread at home</h2>
    <p>By Asha</p>
  </header>
  <section>
    <h3>Ingredients</h3>
    ...
  </section>
  <section>
    <h3>Method</h3>
    ...
  </section>
  <footer>Tags: bread, baking</footer>
</article>

05Label repeated landmarks

If a page has two nav elements (a main menu and a footer menu), screen readers announce both as "navigation". Give each a name with aria-label so users can tell them apart.

index.htmlwhole filehtml
<nav aria-label="Main">...</nav>
...
<nav aria-label="Footer">...</nav>

06Add a skip link

Keyboard users press Tab to move through links. Without help, they tab through every menu link on every page. A skip link as the first thing in the body jumps straight to main. It's often hidden until it gets keyboard focus.

index.htmlwhole filehtml
<a class="skip" href="#content">Skip to main content</a>
<header>...</header>
<main id="content">...</main>

Try it yourself

  1. 1

    Convert the div page

    In the second example, predict how many landmarks you'll get if you change .header to <header>, .menu to <nav>, .content to <main> and .footer to <footer>. Change them (keep the classes so the CSS still works) and run. The console should say 4.

  2. 2

    Add the missing heading

    Still in the second example, turn <div class="big"> into an <h1>. Run it: the heading count becomes 1, and the page looks almost the same.

  3. 3

    See the accessibility tree

    In Chrome DevTools → Elements, open the Accessibility pane and select the <header> in the first example. Its computed role is banner. Select the <article>'s parent <main>: role main.

Code & diagrams

A complete semantic page New tab

Every region names itself. The CSS grid is only for looks; you'll learn grid in the CSS course.

Preview

Press Run to see the page.

Console

Nothing logged yet.

Expected console output

header > nav > main > article > aside > footer
main elements: 1
Same look, no meaning: a div page New tab

It looks fine, but a screen-reader user hears one long list of text and links with nothing to navigate by.

Preview

Press Run to see the page.

Console

Nothing logged yet.

Expected console output

Landmarks a screen reader can jump to: 0
Headings it can jump to: 0
Element to landmark role (when it is a landmark)diagram
Rendering diagram…

Break it on purpose

Errors are the best teachers. Make each change, read the error, guess what went wrong, then reveal the answer.

Break #1

Use two main elements

Wrap the <aside> in the first example in a second <main>.

terminal
$ W3C validator (validator.w3.org)
── what you'll see ──
Error: A document must not include more than one visible main element.

Break #2

Use section as a styling box

Wrap every card and row in <section> without headings, to get a box for CSS.

terminal
$ W3C validator
── what you'll see ──
Warning: Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections, or else use a div element instead for any cases where no heading is needed.

Myth vs fact

Myth

Semantic elements change how the page looks.

Fact

By default they render as plain blocks, almost exactly like div. Their value is meaning, not appearance.

Myth

A page can have only one header and one footer.

Fact

One page-level banner and contentinfo, yes. But each article or section can have its own header and footer.

Myth

section is a fancier div.

Fact

section is a themed part with a heading. If you need a box for styling, div is the right element.

Myth

Every group of links needs nav.

Fact

nav is for major navigation blocks. A couple of links in a footer or inside a paragraph don't need it.

Pro corner

Extra depth for experienced readers. New to this? Skip it for now and come back later.

  • ▸

    The mapping from elements to roles is defined by the HTML-AAM spec (HTML Accessibility API Mappings). header maps to banner only when it's not a descendant of article, aside, main, nav or section; otherwise browsers expose it as a generic element (Chrome shows sectionheader in some versions).

  • ▸

    First rule of ARIA: if a native element with the role exists, use it instead of role="…" on a div. <nav> beats <div role="navigation">: less code, and it works even where ARIA support is weak.

  • ▸

    Search engines don't rank you higher for using article, but they use structure to find the main content, choose snippets and ignore boilerplate. Browser reader modes (Safari Reader, Firefox Reader View) rely heavily on article and main.

  • ▸

    <search> is a newer element for a search form region (maps to the search landmark). It became Baseline in 2023; before that, people wrote <form role="search">.

Remember this

  1. 1

    Semantic means "having meaning". A semantic element says what its content is, not how it looks. <div class="top"> looks like anything you style it to; <header> tells every program reading the page "this is the introductory part". Both render the same by default: the difference is meaning.

  2. 2

    The layout elements: **<header> is introductory content (logo, site name, search, often the main navigation). <nav> is a block of major navigation links. <main>** is the main content of this page, the part unique to it; use exactly one visible <main>, never inside article, aside, header, footer or nav. **<footer> is closing information (copyright, contact, related links). <aside>** is content related to the surroundings but separate from them: a sidebar, a tip box, related posts.

  3. 3

    **<article> is a self-contained piece that would make sense on its own, even copied to another site: a blog post, a news story, a product card, a comment. The test: could it be syndicated (shared in a feed) alone? <section> is a thematic group of content with a heading**: a chapter, a tab panel, the "Features" part of a landing page. If you only need a box for styling, that's a <div>, not a <section>.

  4. 4

    Assistive technologies like screen readers (software that reads the page aloud for blind and low-vision users) turn these elements into landmarks: named regions a user can jump between with one key, the way you glance at a newspaper's layout. header becomes the banner landmark, nav navigation, main main, aside complementary, footer contentinfo. A section becomes a region landmark only when it has an accessible name (for example aria-labelledby pointing at its heading).

  5. 5

    Context matters: header and footer are landmarks only when they belong to the whole page. A <header> inside an <article> is that article's header (its title and date), and is not a banner landmark. That's why one page can have many header and footer elements but only one banner and one contentinfo.

  6. 6

    Why it's worth it: accessibility (keyboard and screen-reader users skip straight to main), SEO (search engines find the main content and ignore repeated menus more easily), reader modes in browsers pick out the article, and maintenance (<nav> is easier to read than <div class="nav-wrapper-2">). It costs nothing: you were going to write a container anyway.

Explain it without notes

01

What does "semantic HTML" mean, and why does it matter if the page looks the same either way?

02

How do you decide between article, section and div?

03

What is a landmark, and which elements create them?

04

Can a page have several header elements? Explain.

Practice

01

Write the semantic skeleton of a blog home page: site header with a logo and main navigation, a main area with two article previews (each with an h2), a sidebar with "About me", and a footer.

02

A page has a top menu and a footer menu, both in nav. Make them distinguishable to screen-reader users.

03

Add a skip link to the skeleton from task 1.

Trade-offs

  • ↔

    Semantic elements cost nothing extra to write, but using them wrongly (a section for every box, article for things that aren't self-contained) adds noise to the landmark list; when in doubt, use div.

  • ↔

    Labelling every landmark with aria-label helps when there are duplicates, but labels on unique landmarks add chatter for screen-reader users; label only when two of the same kind exist.

Done when you can

  • I can lay out a page with header, nav, main, aside and footer.

  • I can choose between article, section and div using the three questions.

  • I know a page has exactly one visible main.

  • I can name the landmark role each layout element maps to.

  • I can label two nav elements so they are distinguishable.