Skip to main content

What are Semantic HTML Elements?

Answer​

Semantic HTML elements clearly describe their meaning to both the browser and developer. Instead of using generic <div> or <span> tags, semantic elements convey the purpose of the content they contain.

Semantic vs Non-Semantic​

Common Semantic Elements​

ElementPurpose
<header>Introductory content or navigation
<nav>Navigation links
<main>Main content of the document
<article>Self-contained, independent content
<section>Thematic grouping of content
<aside>Sidebar or tangentially related content
<footer>Footer for document or section

Example​

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

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

Why Use Semantic HTML?​

  • Accessibility: Screen readers understand page structure better
  • SEO: Search engines prioritize well-structured content
  • Maintainability: Code is self-documenting and easier to read
  • Browser features: Enables reader mode and proper outline generation