Semantic HTML

Semantic HTML means using HTML elements that clearly describe their meaning and purpose, rather than using generic containers like <div> and <span> for everything.

Compare these two approaches:

<!-- Non-semantic -->
<div class="header">
  <div class="nav">...</div>
</div>
<div class="content">...</div>
<div class="footer">...</div>

<!-- Semantic -->
<header>
  <nav>...</nav>
</header>
<main>...</main>
<footer>...</footer>

Both produce the same visual result, but the semantic version communicates the purpose of each section to browsers, screen readers, and search engines. This matters for three important reasons:

1. Accessibility — Screen readers use semantic elements as landmarks, allowing users to jump directly to the navigation, main content, or footer.
2. SEO — Search engines better understand your page structure and content hierarchy.
3. Maintainability — Other developers (and your future self) can quickly understand the page layout by reading the markup.

HTML5 introduced several elements for defining the major regions of a page:

• <header> — Introductory content, typically containing a logo, site title, and navigation. A page can have multiple headers (one for the page, others inside articles or sections).

• <nav> — A section containing navigation links. Use it for the main site navigation, not for every group of links on the page.

• <main> — The dominant content of the page. There should be only one <main> per page, and it should not be nested inside header, nav, footer, article, or aside.

• <footer> — Closing content for its nearest sectioning ancestor. Typically contains copyright information, contact details, or related links. Like header, a page can have multiple footers.

Three additional semantic elements help you organize content within the page:

• <article> — A self-contained piece of content that could stand on its own and still make sense. Blog posts, news articles, forum posts, and product cards are all good candidates for <article>. Each article should typically have its own heading.

• <section> — A thematic grouping of content, usually with a heading. Use section to divide a long page into logical parts (e.g., "About Us", "Our Services", "Testimonials"). If the content is self-contained and independently distributable, prefer <article> instead.

• <aside> — Content that is tangentially related to the surrounding content. Sidebars, pull quotes, related links, and advertising are common uses. The aside is not the main focus but provides supplementary information.

A practical way to decide: if you could remove the content and the main content would still make complete sense, it probably belongs in an <aside>. If the content is a complete, independent piece, use <article>. If it is a logical subdivision of a larger whole, use <section>.