What is semantic HTML?

Semantic HTML

Semantic HTML refers to using HTML elements that clearly convey their meaning and purpose, both to browsers and developers. Instead of using generic containers like <div> and <span> for everything, semantic HTML uses elements that describe their content's role in the page structure.

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

<!-- Semantic -->
<header>...</header>

Common semantic elements

• <header>: Contains introductory content or navigation links
• <nav>: Represents a navigation menu
• <main>: Holds the primary content of the page
• <article>: Represents a self-contained composition (like a blog post)
• <section>: Groups related content
• <aside>: Contains content tangentially related to surrounding content
• <footer>: Contains concluding information

Benefits of semantic HTML

• Accessibility: Screen readers can better understand page structure and content
• SEO: Search engines can better understand your content's context and importance
• Maintainability: Code becomes more readable and self-documenting