Semantic HTML5 Fundamentals

Structural Landmarks

The following elements are the building blocks of a modern webpage layout:

• <header>: Represents introductory content, typically containing a logo, site title, or navigation links.
• <nav>: Specifically designated for major navigation blocks.
• <main>: The container for the unique, central content of the document. There should only be one <main> element per page.
• <article>: Represents a self-contained composition that could be independently distributed (e.g., a blog post, a news story, or a forum post).
• <section>: Represents a generic standalone section of a document, which doesn't have a more specific semantic element. It should almost always have a heading.
• <aside>: Contains content that is indirectly related to the main content, such as sidebars, callouts, or advertising.
• <footer>: Contains information about the author, copyright data, or links to related documents.

Exam Tip: If you are asked to identify the correct element for a sidebar that contains "Related Links," the answer is almost always <aside>, not <section>. A <section> implies a thematic grouping of content, whereas <aside> implies content that is tangential to the main flow.

Text-Level Semantics

Semantics isn't just about large layout blocks; it also applies to the words and phrases within those blocks. Using the correct inline elements ensures that the emphasis and importance of your text are communicated correctly.

For example, using <b> (bold) makes text look heavy, but using <strong> tells a screen reader to change its tone to indicate importance. Similarly, <i> (italic) is purely stylistic, while <em> (emphasis) changes the meaning of the sentence through stress.

Putting It All Together: A Worked Example

Let's look at how we can transform a "div-soup" (a page made entirely of divs) into a semantic masterpiece.

The Non-Semantic Way (Bad):

<div id="top-bar">
  <div class="logo">My Blog</div>
  <div class="links">
    <div class="link">Home</div>
    <div class="link">About</div>
  </div>
</div>

<div id="content">
  <div class="post">
    <div class="title">Understanding HTML</div>
    <div class="body">Semantic HTML is great!</div>
  </div>
</div>

The Semantic Way (Good):

<header>
  <h1>My Blog</h1>
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/about">About</a></li>
    </ul>
  </nav>
</header>

<main>
  <article>
    <h2>Understanding HTML</h2>
    <p>Semantic HTML is great!</p>
  </article>
</main>

By making this change, we haven't changed the visual appearance (that is the job of CSS), but we have fundamentally improved the "intelligence" of the document.

Conclusion

Mastering semantic HTML5 is a transition from "making things look right" to "making things work right." By choosing elements based on their meaning rather than their appearance, you create a web that is more accessible to people with disabilities, more discoverable by search engines, and significantly more professional in its architecture.

Final Thought: Always ask yourself, "If I stripped away all the CSS, would the structure of this page still make sense?" If the answer is no, you likely need more semantic elements.