Semantic HTML

25 min read

Semantic HTML<main><article><nav><aside>Div SoupSEO

Beyond Div Soup

Semantic HTML means using the right element for the right job. It's not just about structure — it's about meaning. Screen readers, search engines, and AI crawlers all rely on semantic markup to understand your page.

Key Semantic Elements

<header> — Introductory content or navigation
<nav> — Navigation links
<main> — Primary content (only one per page)
<article> — Self-contained, independently distributable content
<section> — Thematic grouping of content
<aside> — Tangentially related content (sidebars)
<footer> — Footer content

Why It Matters

Google's search algorithm gives higher rankings to semantically structured pages. Screen readers use landmarks (<nav>, <main>) to let users jump between sections. Without them, visually impaired users must listen to the entire page linearly.

Beyond Div Soup

Key Semantic Elements

<header> — Introductory content or navigation
<nav> — Navigation links
<main> — Primary content (only one per page)
<article> — Self-contained, independently distributable content
<section> — Thematic grouping of content
<aside> — Tangentially related content (sidebars)
<footer> — Footer content