Semantic HTML

Semantic HTML means choosing elements based on what content is, not just how it looks. Tags like header, nav, main, article, section, and button communicate structure to browsers, assistive technologies, and search engines.

Why Semantic HTML Matters

Accessibility

Screen readers and other assistive tools use semantic landmarks and roles to help users navigate and understand pages.

SEO

Search engines can better interpret content hierarchy and relationships when markup is meaningful.

Maintainability

Semantic structure makes code easier to read, style, and refactor over time.

Semantic vs Non-Semantic Markup

Non-semantic:

<div class="header">
  <div class="nav">...</div>
</div>
<div class="content">...</div>

Semantic:

<header>
  <nav>...</nav>
</header>
<main>...</main>

Both can look identical visually, but the semantic version carries built-in meaning.

Common Semantic Elements

• header, footer, nav, main
• article, section, aside
• h1–h6 for heading hierarchy
• button for actions
• a for navigation links
• ul, ol, and li for lists
• figure and figcaption for media with captions
• form, label, and input for forms

Best Practices

1. Use one clear h1 per page and preserve heading order
2. Prefer native elements over ARIA when a native option exists
3. Use button for actions and a for links
4. Wrap primary content in main
5. Label form controls properly with label
6. Avoid using divs and spans as interactive controls

Common Mistakes

Clickable Divs

Using a div with a click handler skips keyboard support and accessibility semantics that button provides for free.

Skipping Headings

Jumping from h2 to h5 confuses document outline navigation.

Overusing Sections

Not every wrapper needs to be a section; reserve it for thematically grouped content with a heading.

Semantic HTML is one of the highest-ROI foundations in front-end work: it improves accessibility, SEO, and code clarity with relatively little extra effort.