What is Semantic HTML? | HTML Interview Questions

What You'll Learn

What semantic HTML means
Why it matters for accessibility and SEO
Common semantic elements

Understanding Semantic HTML

Semantic HTML uses elements that clearly describe their meaning and purpose. Instead of using generic <div> tags everywhere, semantic elements like <header>, <nav>, <main>, and <footer> explain what the content represents.

Why It Matters

1. Accessibility

Screen readers understand page structure better. A blind user can navigate directly to the <nav> or <main> content.

2. SEO

Search engines can index content more accurately. Google knows that content in <article> is the main content.

3. Maintainability

Developers can understand code faster. Self-documenting code is easier to maintain.

Non-Semantic vs Semantic

index.htmlHTML

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

<!-- Semantic (good) -->
<header>
  <nav>...</nav>
</header>
<main>
  <article>...</article>
</main>
<footer>...</footer>

Common Semantic Elements

Element	Purpose
`<header>`	Page or section header
`<nav>`	Navigation links
`<main>`	Main content area
`<article>`	Independent content
`<section>`	Thematic grouping
`<aside>`	Sidebar content
`<footer>`	Page or section footer
`<figure>`	Image with caption

Best Practice

Always ask: "What does this content represent?" Then choose the appropriate semantic element.