What is semantic HTML?
Semantic HTML means using HTML elements that carry meaning — elements that describe what they contain, not just how they look. A <button> tells the browser "this is an interactive control". A <nav> says "this is site navigation". A <div> says nothing.
Before semantic HTML5 elements, developers built layouts entirely with <div> and <span> tags with descriptive class names. Semantic HTML replaces many of these with elements whose names describe their role in the document.
Why it matters for SEO and accessibility
Search engines use the semantic structure of your page to understand its content. Google's crawler reads your <h1> as the primary topic, your <article> as the main content body, and your <nav> as navigation links rather than page content.
Screen readers — used by over 7 million people in the US alone — rely entirely on semantic elements to navigate a page. A sighted user sees a sidebar. A screen reader user needs <aside> to understand the same element is supplementary content.
Key semantic elements explained
<header>
The top section of a page or article. Contains the logo, navigation, and page title. Not to be confused with <head> — that's a different element inside the HTML metadata.
<nav>
A block of navigation links. Use it for main site navigation, pagination, and breadcrumbs. Screen readers offer shortcuts to skip to <nav> sections.
<main>
The primary content of the page. There should be exactly one <main> per page. Google weighs content inside <main> more heavily than content in headers, footers, or sidebars.
<article>
Self-contained content that makes sense on its own — a blog post, a news story, a product card. Articles can be shared independently and should include their own <h1> or <h2> heading.
<section>
A thematic grouping of content. Sections should always have a heading. If you can't describe the section's theme in a heading, a <div> might be more appropriate.
<aside>
Content tangentially related to the main content — a callout box, a related links sidebar, an author bio. Search engines treat <aside> content as supporting information rather than the main topic.
<footer>
The bottom of a page or article. Contains contact info, copyright, secondary navigation, and legal links.
Document structure
A well-structured HTML5 page looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page Title</title>
</head>
<body>
<header>
<nav>...</nav>
</header>
<main>
<article>
<h1>Article Title</h1>
<section>...</section>
</article>
<aside>Related content</aside>
</main>
<footer>...</footer>
</body>
</html>Common mistakes to avoid
- Using
<div>for everything — replace structural divs with the appropriate semantic element - Multiple
<h1>tags — one per page, used for the primary topic only - Skipping heading levels — don't jump from
<h1>to<h4>; use sequential levels - Using
<b>and<i>for styling — use<strong>and<em>for semantic emphasis - Empty
<alt>on meaningful images — always describe the content of images that convey information - Using tables for layout — tables are for tabular data only
Quick checklist
- ✅ Page has exactly one
<main>element - ✅ Headings are hierarchical: h1 → h2 → h3 (no skips)
- ✅ Navigation is wrapped in
<nav> - ✅ Blog posts and articles use
<article> - ✅ Images have descriptive
altattributes - ✅ Forms use
<label>elements linked to inputs - ✅ Interactive elements use
<button>, not clickable divs