Semantic Page Layout

HTML has elements that describe the parts of a page — header, navigation, main content, articles, sections, sidebars and footer. They look no different from <div>s, but they tell browsers, screen readers and search engines what each region is, which makes pages easier to navigate and understand.

A typical page skeleton

<style>
  body { font-family: sans-serif; }
  header, nav, main, aside, footer, article, section { border: 1px dashed #b9c2d4; padding: 8px; margin: 6px 0; }
  .label { font: 12px monospace; color: #d6336c; }
</style>
<header>
  <span class="label">&lt;header&gt;</span>
  <h1>Travel Notes</h1>
  <nav aria-label="Main">
    <span class="label">&lt;nav&gt;</span>
    <a href="#home">Home</a> · <a href="#trips">Trips</a> · <a href="#about">About</a>
  </nav>
</header>
<main>
  <span class="label">&lt;main&gt;</span>
  <article>
    <span class="label">&lt;article&gt;</span>
    <h2>Three days in Porto</h2>
    <section>
      <span class="label">&lt;section&gt;</span>
      <h3>Where to stay</h3>
      <p>Ribeira is lively; Bonfim is quieter.</p>
    </section>
  </article>
  <aside>
    <span class="label">&lt;aside&gt;</span>
    <h2>Related trips</h2>
    <p>A weekend in Lisbon.</p>
  </aside>
</main>
<footer>
  <span class="label">&lt;footer&gt;</span>
  <p>&copy; 2026 Travel Notes</p>
</footer>

Result

The elements

Element	Represents
`<header>`	Introductory content for the page or a section: logo, site title, navigation, an article's title and byline
`<nav>`	A major block of navigation links
`<main>`	The page's primary content — unique to this page. Only one visible `<main>` per page
`<article>`	Self-contained content that would make sense on its own: a blog post, news story, product card, comment
`<section>`	A thematic grouping of content, normally with its own heading
`<aside>`	Content tangentially related to what's around it: sidebars, pull quotes, related links
`<footer>`	Closing information for the page or a section: copyright, contact, related links

Landmarks for assistive technology

Screen readers turn these elements into landmarks — a list of regions users can jump between, much as sighted users scan a page visually. <header> (at page level) becomes "banner", <nav> becomes "navigation", <main> "main", <aside> "complementary" and the page-level <footer> "content information". When a page has several <nav> elements, give each an aria-label ("Main", "Footer", "Breadcrumb") so they can be told apart.

article or section?

Ask: would this make sense on its own, out of context?

Yes — it's an <article>. A blog post could be syndicated in a feed; a product card makes sense in search results.
No, it's part of something bigger — it's a <section>. "Where to stay" only makes sense inside the Porto article.
It's just for styling — use a <div>.

Articles can contain sections, and sections can contain articles (like a "Latest posts" section listing several articles).

Headers and footers inside articles

<header> and <footer> aren't limited to the top and bottom of the page — any article or section can have its own.

Other semantic helpers

<search> — wraps a search form, so it's announced as a search landmark.
<address> — contact information (lesson 08).
<figure> — self-contained illustrations with captions (lesson 14).
<hgroup> — groups a heading with a subtitle or tagline.

Benefits recap

Accessibility — landmark navigation and better context for screen readers.
SEO — search engines identify the main content and articles more reliably.
Reader modes — browser "reader view" features rely on these elements.
Maintainability — <nav> says more to the next developer than <div class="nv2">.

Try it yourself

Convert this div-based page into semantic elements:

PreviousClasses & IDs NextLayout with CSS