Semantic HTML Layout

Introduction

Semantic HTML layout means choosing elements that describe the role of each page region: header, navigation, main content, articles, sidebars, and footer. This chapter explains why semantic structure matters and how to combine <header>, <main>, <footer>, <nav>, <section>, <article>, and <aside> into clear page layouts.

Prerequisites

• Block, inline, and semantic flow
• Accessible forms
• Basic comfort with headings and links

Why Semantic Layout Matters

Semantic layout helps:

• readers scan the document
• screen readers jump between regions
• search engines understand content relationships
• developers maintain pages without guessing what each <div> means
• CSS and JavaScript target stable structure

Compare generic markup:

<div class="top">
  <div class="menu">...</div>
</div>
<div class="content">...</div>
<div class="bottom">...</div>

With semantic markup:

<header>
  <nav>...</nav>
</header>
<main>...</main>
<footer>...</footer>

The second version communicates meaning before any CSS runs.

Page Landmarks

Modern HTML provides landmark-like elements:

These help assistive technology expose shortcuts like "jump to main content" or "list navigation regions."

<header>

<header> contains introductory content for a page or section:

<header>
  <h1>Frontend Notes</h1>
  <p>Short tutorials for web developers.</p>
</header>

Common content:

• site logo or name
• page title
• tagline
• primary navigation
• search form

A page can have more than one <header> when sections or articles have their own introductions:

<article>
  <header>
    <h2>Learning Semantic HTML</h2>
    <p>Published on <time datetime="2026-05-25">May 25, 2026</time></p>
  </header>
  <p>Semantic elements make structure clear.</p>
</article>

<nav>

<nav> wraps major navigation:

<nav aria-label="Main">
  <ul>
    <li><a href="index.html" aria-current="page">Home</a></li>
    <li><a href="articles.html">Articles</a></li>
    <li><a href="about.html">About</a></li>
  </ul>
</nav>

Use <nav> for important link groups:

• main menu
• sidebar table of contents
• breadcrumb trail
• footer site navigation

Do not wrap every small group of links in <nav>. A paragraph with one inline link is not navigation.

<main>

<main> contains the unique primary content of the page:

<main>
  <h1>HTML Tutorial</h1>
  <p>Start learning page structure here.</p>
</main>

Rules of thumb:

• Use one visible <main> per page.
• Do not put repeated site-wide header or footer content inside <main>.
• Skip links often target <main id="main-content">.

Example:

<a href="#main-content">Skip to main content</a>
 
<header>...</header>
 
<main id="main-content">
  <h1>Dashboard</h1>
  <p>Your latest project activity appears here.</p>
</main>

<footer>

<footer> contains closing or supporting information:

<footer>
  <p>&copy; 2026 hello_code</p>
  <nav aria-label="Footer">
    <a href="privacy.html">Privacy</a>
    <a href="terms.html">Terms</a>
  </nav>
</footer>

Common content:

• copyright
• legal links
• contact information
• related navigation
• last updated date

Like <header>, <footer> can appear inside an article or section.

<section>

<section> represents a themed part of a document, usually with a heading:

<section>
  <h2>Features</h2>
  <p>Write semantic HTML, then style it with CSS.</p>
</section>

Use <section> when:

• the content has a clear topic
• it would appear in a page outline
• a heading makes sense

If you only need a wrapper for styling with no meaning, use <div>.

<article>

<article> is self-contained content that could stand alone:

<article>
  <h2>How Browsers Parse HTML</h2>
  <p>Browsers build a DOM tree from markup.</p>
  <footer>
    <p>Written by Alex.</p>
  </footer>
</article>

Good uses:

• blog post
• news article
• forum post
• product review
• documentation page

A page can contain multiple articles:

<aside>

<aside> contains supporting or tangential content:

<aside>
  <h2>Related tutorials</h2>
  <ul>
    <li><a href="forms.html">HTML Forms</a></li>
    <li><a href="images.html">Responsive Images</a></li>
  </ul>
</aside>

Common uses:

• related links
• sidebar table of contents
• author bio
• glossary note
• promotional card

Do not put essential article content in <aside> if readers need it to understand the main flow.

Common Page Layouts

Documentation Page

Blog Index

Avoid Div Soup

"Div soup" is markup where every region is a <div>:

<div class="page">
  <div class="header">...</div>
  <div class="nav">...</div>
  <div class="main">...</div>
  <div class="footer">...</div>
</div>

Use semantic elements where they fit:

<header>...</header>
<nav aria-label="Main">...</nav>
<main>...</main>
<footer>...</footer>

div is still useful, but it should not hide obvious document roles.

Mini Exercise

Build a simple article page with:

1. Site <header> containing a title and <nav>
2. One <main id="main-content">
3. One <article> with its own heading and publish date
4. One <aside> with related links
5. One page <footer>

Open DevTools and confirm the DOM reads like a document outline, not a pile of generic wrappers.

FAQ

Can I have multiple <header> elements?

Yes. A page can have a site header, and each article or section can have its own header. Only the meaning changes by context.

Can I have multiple <main> elements?

Use one visible <main> per page. Hidden template content or shadow DOM can complicate this, but beginner pages should keep it simple.

Should every <section> have a heading?

Usually yes. If a heading would feel weird, the content may not be a real section; use <div> instead.

Is <aside> always a sidebar?

No. It means supporting or tangential content. CSS may render it as a sidebar, callout box, or inline note.

What comes next?

Section, article, div, and common semantics — deeper rules for choosing between semantic and generic elements.