HTML5 Semantic Elements Guide

What are Semantic Elements?

Semantic HTML5 tags describe their meaning, not just appearance. <header> clearly means a header, unlike a generic <div>. This improves accessibility and SEO.

The Main Semantic Tags

<header>   Site/section header   </header>
<nav>      Navigation links      </nav>
<main>     Main content          </main>
<article>  Self-contained piece  </article>
<section>  Thematic grouping     </section>
<aside>    Sidebar content       </aside>
<footer>   Footer                </footer>

Semantic vs Non-Semantic

<!-- ❌ Old way -->
<div class="header">...</div>
<div class="nav">...</div>

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

Why It Matters

• SEO — search engines understand your structure.
• Accessibility — screen readers navigate by landmarks.
• Maintainability — clearer, self-documenting code.

FAQs

section vs article?

An <article> makes sense standalone (a blog post); a <section> groups related content. More in our HTML section.

Can I still use div?

Yes — for purely styling wrappers with no semantic meaning.