Lesson 9 — Best Practices

Semantic HTML5

HTML5 introduced elements that describe the purpose of a section of content, not just its visual box, making pages more meaningful to browsers, search engines, and assistive technology.

Semantic Page Structure

Before HTML5, developers used generic <div> elements for every section of a page, relying on class names alone to convey meaning. Semantic elements give the same structure real, machine-readable meaning.

HTML — Semantic layout 
<body>
  <header>
    <nav>...</nav>
  </header>

  <main>
    <article>
      <h1>Blog Post Title</h1>
      <section>
        <h2>Introduction</h2>
        <p>...</p>
      </section>
    </article>

    <aside>
      <h2>Related Posts</h2>
    </aside>
  </main>

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

article vs section vs div

Use <article> for self-contained content that could stand alone (a blog post, a product card). Use <section> for a thematic grouping within a page that usually has its own heading. Fall back to a plain <div> only when no semantic element fits — typically for a purely styling-related wrapper.

Common Mistakes

  • Using <div> for everything out of habit, missing the accessibility and SEO benefits of semantic tags.
  • Wrapping the entire page in <section> instead of <main> for the primary content area.
  • Using more than one <main> element on a page — there should only ever be one.
  • Choosing <article> for content that only makes sense in context of the surrounding page, rather than <section>.

Professional Tip

A quick test for <article> vs <section>: if you could pull the content out and syndicate it elsewhere (an RSS feed, a different page) and it would still make sense on its own, it's an article.

Your Turn

Rebuild a page you made earlier in this course using semantic tags — header, nav, main, article/section, footer — instead of generic divs.

Mini Quiz

How many main elements should a single HTML page contain?