Key Semantic Elements: header, nav, main, footer

HTML5 introduced a set of semantic elements that describe common page regions. Here's how a typical page structure looks:

<body>
  <header>
    <h1>Site Name</h1>
    <nav>
      <a href="/">Home</a>
      <a href="/about">About</a>
    </nav>
  </header>

  <main>
    <article>
      <h2>Blog Post Title</h2>
      <p>Post content...</p>

      <section>
        <h3>Comments</h3>
        <p>User comment...</p>
      </section>
    </article>

    <aside>
      <h3>Related Posts</h3>
      <ul><li>...</li></ul>
    </aside>
  </main>

  <footer>
    <p>&copy; 2026 My Site</p>
  </footer>
</body>

<header> — introductory content, usually a logo, site title, and top navigation. A page can have multiple <header> elements (e.g., one for the site, one inside an <article>).
<nav> — a block of navigation links (main menu, breadcrumbs, pagination).
<main> — the primary, unique content of the page. Only one per page, and it should not be nested inside <header>, <footer>, <nav>, or <aside>.
<article> — self-contained content that would make sense on its own if syndicated elsewhere (a blog post, news story, forum post).
<section> — a thematic grouping of content, typically with its own heading, used to divide an article or page into logical parts.
<aside> — content tangentially related to the main content, like a sidebar, related links, or a pull quote.
<footer> — closing content: copyright, contact info, site links.

A good mental model: <article> should make sense if you cut-and-pasted it into another website; <section> groups related content within a larger container; <aside> is a sidebar.