HTML - Semantic Elements

Overview

Estimated time: 25–35 minutes

Semantic elements communicate the purpose of content. They help assistive technologies and search engines understand your page.

Learning Objectives

• Identify core semantic elements and when to use them.
• Compose a page with <header>, <nav>, <main>, and <footer>.

Common semantic elements

<header>...branding...</header>
<nav>...site navigation...</nav>
<main>
  <article>
    <header><h1>Post Title</h1></header>
    <section>...content...</section>
  </article>
  <aside>Related links</aside>
</main>
<footer>© 2025</footer>

Common Pitfalls

• Using <div> for everything—prefer semantic tags where appropriate.
• Skipping <main>; it helps define the primary content region.

Exercises

1. Convert a div-only layout into semantic structure using header, nav, main, section, article, aside, and footer.