No history yet

Semantic Document Foundations

Structure with Meaning

You're already familiar with using <div> and <span> elements to group and style content. These are non-semantic elements; they tell the browser how to arrange things, but not what those things are. A <div> is just a generic box.

Semantic HTML, introduced with HTML5, changes this by providing elements that describe the role of the content they hold. Think of it as labelling the boxes. Instead of a generic div id="header", you use a specific <header> element. This gives your document a meaningful structure that can be understood by browsers, search engines, and assistive technologies alike.

Using semantic HTML elements helps to create a well-structured and meaningful web page, as opposed to non-semantic HTML elements like

and , which serve as content holders without providing any indication about the type of content they contain or its role on the page.

The Page Skeleton

Every well-structured page has a basic skeleton. Three key elements define the main regions of your document:

  • <header>: This represents introductory content. It’s not just for the top of the page; an <article> or <section> can have its own <header>. It often contains headings, a logo, or navigational links.
  • <footer>: This represents the footer for its nearest sectioning parent. Like <header>, it can be used for the whole page or for individual sections. It typically contains authorship information, copyright data, or related links.
  • <main>: This is for the primary, unique content of the document. A document must have only one <main> element, and it cannot be a descendant of an <article>, <aside>, <header>, <footer>, or <nav>.
<body>
  <header>
    <!-- Main page header content -->
  </header>

  <main>
    <!-- Primary document content -->
  </main>

  <footer>
    <!-- Main page footer content -->
  </footer>
</body>

Alongside these, <nav> is used to define a block of major navigational links. This helps browsers and screen readers identify the primary navigation for the site, distinguishing it from other groups of links that might appear in a footer or sidebar.

For content that is only tangentially related to the main content, we use <aside>. This is perfect for sidebars, call-out boxes, or advertising. It signals that the content inside isn't part of the primary flow.

Article vs Section

This is where many developers get confused. Both <article> and <section> are used for grouping content, but their semantic purpose is distinct.

An <article> is for complete, self-contained content that could be distributed on its own and still make sense. Think of a blog post, a news story, a forum post, or a user comment. If you could syndicate it in an RSS feed, it's probably an <article>.

A <section> is a thematic grouping of content within a document. It doesn’t need to make sense on its own. For example, a homepage could have sections for "Introduction," "New Products," and "Contact Information." Each is a distinct theme, but they are all part of that single page. You can even have <article>s inside a <section>, like a "Latest News" section containing several news articles.

The key question to ask is: "Could this content stand alone?" If yes, use <article>. If no, use <section>.

These sectioning elements work together to form a coherent structure, which was once formally interpreted by the document outline algorithm to create a navigable map of the page. Though this algorithm is no longer part of the formal HTML specification, its principles still guide how browsers and assistive technologies understand content hierarchy.

<main>
  <h1>Company Blog</h1>
  
  <section class="latest-posts">
    <h2>Latest Posts</h2>

    <article>
      <h3>Post Title One</h3>
      <p>Content for the first post...</p>
      <footer>
        <p>Published by Author A</p>
      </footer>
    </article>

    <article>
      <h3>Post Title Two</h3>
      <p>Content for the second post...</p>
      <footer>
        <p>Published by Author B</p>
      </footer>
    </article>

  </section>
</main>

By thoughtfully choosing between semantic and non-semantic elements, you create a document that is more accessible, better for SEO, and easier for other developers to maintain. It's about building a foundation that describes not just the layout, but the meaning of your content.

Quiz Questions 1/6

What is the primary advantage of using semantic HTML elements like <header> and <article> over non-semantic elements like <div>?

Quiz Questions 2/6

Which element is most appropriate for a blog post that could be syndicated on its own in an RSS feed?