Semantic Page Structure Tutorial - Organizing HTML Content

Understanding Semantic Page Structure

Semantic page structure uses meaningful HTML elements to describe the major regions and relationships within a webpage.

Elements such as <header>, <nav>, <main>, <section>, <article>, <aside>, and <footer> help organize content according to its purpose rather than relying only on generic containers.

Semantic Page Regions

A webpage is often made up of several distinct regions, each serving a different purpose. Semantic HTML gives many of these regions their own elements so the structure can be expressed directly in the markup.

<header> — introductory content for a page or section.
<nav> — major navigation links.
<main> — the primary content of the page.
<section> — a thematic grouping of related content.
<article> — self-contained content that can stand independently.
<aside> — content related indirectly to nearby or surrounding content.
<footer> — footer information for a page or section.

Not every webpage needs every one of these elements. The structure should reflect the actual content rather than forcing every page into the same pattern.

Typical Semantic Page Structure

A common semantic webpage structure might look like this:

<header>
  <h1>Example Website</h1>

  <nav>
    ...
  </nav>
</header>

<main>

  <article>
    <h2>Main Article</h2>

    <section>
      <h3>Article Section</h3>
      <p>Section content...</p>
    </section>
  </article>

  <aside>
    <h2>Related Information</h2>
    <p>Related content...</p>
  </aside>

</main>

<footer>
  <p>Footer information...</p>
</footer>

This is only one possible arrangement. Semantic HTML describes relationships between content, not a mandatory webpage template.

The <header> element contains introductory content associated with the page or a section of content. At the page level, it may contain the website name, logo, introductory text, navigation, search controls, or similar information.

<header>
  <h1>Example Website</h1>
  <p>Learn HTML one step at a time.</p>
</header>

A webpage can also contain headers inside articles or sections when those parts of the document have their own introductory content.

The <nav> element identifies a section containing major navigation links, such as a primary website menu, table of contents, or other important navigation group.

<nav>
  <a href="/">Home</a>
  <a href="/tutorials/">Tutorials</a>
  <a href="/contact.html">Contact</a>
</nav>

A navigation element is often placed inside a page header, but it can appear elsewhere when that location better reflects the document structure.

Main Content Region

The <main> element identifies the dominant content of the webpage. It should contain the content that is central to the purpose of that particular document.

<main>
  <h1>HTML Tutorial</h1>
  <p>Main tutorial content...</p>
</main>

Content repeated across many pages, such as site-wide navigation, logos, and common footer information, generally belongs outside the <main> element.

Section and Article Regions

The <section> and <article> elements organize meaningful portions of the main content. A section groups related content by topic, while an article represents self-contained content that can make sense independently.

<article>
  <h2>Learning Semantic HTML</h2>

  <section>
    <h3>Why Semantics Matter</h3>
    <p>Section content...</p>
  </section>
</article>

These elements are not interchangeable simply because they create containers. Their semantic meaning should determine which one is appropriate.

Aside Region

The <aside> element represents content that is indirectly related to the surrounding content. Examples can include related links, background information, side notes, or supplementary material.

<aside>
  <h2>Related Tutorials</h2>
  <p>Explore additional HTML topics...</p>
</aside>

An aside does not have to appear visually in a sidebar. Its meaning comes from the relationship of its content to the surrounding document.

The <footer> element contains footer information associated with the page or an appropriate section of content.

<footer>
  <p>&copy; Example Website</p>
</footer>

Page-level footers commonly contain copyright information, contact links, policies, related navigation, or other supporting information associated with the website or document.

Structure Is Not Visual Layout

Semantic structure and visual layout are related but they are not the same thing. HTML describes what each part of the page means, while CSS controls where those parts appear and how they look.

For example, an <aside> might appear beside an article on a wide screen and below it on a small screen. Its semantic meaning remains the same even though its visual position changes.

main {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 30px;
}

The CSS determines the layout, but the HTML continues to describe the content as main content, an article, an aside, or another semantic region.

Semantic Page Structure Example

The following example combines the major semantic page elements into a small webpage. Experiment with the structure by moving the <aside>, adding another <section>, or changing the content while keeping each element's purpose in mind.

Play in Editor

Semantic Page Structure Best Practices

Choose elements according to the meaning and purpose of the content.
Do not force every webpage into the same semantic structure.
Use <main> for the page's primary content rather than as a general wrapper.
Use <nav> for important navigation groups rather than every collection of links.
Use <section> for meaningful thematic groupings of content.
Use <article> when the content can reasonably stand on its own.
Use <aside> for related or supplementary content rather than simply because something is visually positioned beside other content.
Use CSS to control visual layout without changing the semantic purpose of the HTML.

Summary

Semantic page structure uses meaningful HTML elements to identify the major regions and relationships within a webpage. Elements such as <header>, <nav>, <main>, <section>, <article>, <aside>, and <footer> describe the purpose of content rather than its visual position.

A good semantic structure reflects the content itself. CSS can then control how those regions are arranged and styled without changing what they mean.

Semantic Page Structure