14

HTML – Semantic Layout

Chapter 14 • Intermediate

25 min

Semantic layout means using HTML elements that describe their meaning and structure, rather than just using generic <div> tags everywhere. This is crucial for SEO and accessibility.

Key Semantic Elements

  1. <header>: Introductory content, logo, navigation. Not to be confused with <head>.
  2. <nav>: Major navigation links.
  3. <main>: The dominant content of the page. Must be unique per page (you cannot have two <main> elements).
  4. <section>: A thematic grouping of content, usually with a heading.
  5. <article>: Independent, self-contained content (blog post, news item).
  6. <aside>: Content aside from the main content (sidebar, ads).
  7. <footer>: Copyright, contact info, sitemap at the bottom.

Why use them?

  • SEO: Search engines understand "This is the main article" vs "This is just a footer".
  • Accessibility: Screen readers can let users "jump to main content" or "skip navigation".
  • Readability: Code is easier for humans to understand.

Suggested image prompt

"Wireframe of a standard website layout showing Header, Nav, Main, Article, Aside, and Footer areas, each colored differently and labeled with their HTML5 tags."

Interview-style questions from this topic

  1. What is the difference between <section> and <article>?
  2. Why should you use <nav> instead of <div class="nav">?
  3. Can you have multiple <header> elements on a page? (Yes, e.g., inside an article)
  4. What is the purpose of the <main> element?

Hands-on Examples

Semantic Layout Structure

<!DOCTYPE html>
<html>
<body>
  <header>
    <h1>My Website</h1>
    <nav>
      <a href="#">Home</a> | <a href="#">Blog</a>
    </nav>
  </header>

  <main>
    <article>
      <h2>Learn HTML</h2>
      <p>HTML is the skeleton of the web...</p>
    </article>
    
    <aside>
      <h3>Related Links</h3>
      <ul><li>CSS Tutorial</li></ul>
    </aside>
  </main>

  <footer>
    <p>&copy; 2026 Schoolabe</p>
  </footer>
</body>
</html>

This code uses semantic tags to define the header, navigation, main content area, an article, a sidebar (aside), and a footer. This structure provides clear meaning to browsers and assistive technologies.

Previous
HTML – Forms
Next
HTML – Accessibility Basics

Related Tutorials