HTML Semantic Elements: A Complete Reference

Learn which HTML elements to use for headers, navigation, articles, sections, and more — and why semantics matter for SEO and accessibility.

What Are Semantic Elements?

Semantic HTML elements describe the meaning of their content, not just how it looks. A <nav> tells browsers, screen readers, and search engines "this is navigation" — a <div class="nav"> does not. Using semantic elements correctly improves accessibility, SEO, and code maintainability.

HTML5 introduced most of the semantic elements developers use today. Before HTML5, pages were built almost entirely with <div> and <span> — the "divitis" anti-pattern that made pages harder to parse for both machines and humans.

Document Structure Elements

<header> — Introductory content for a page or section. Usually contains a heading, logo, or navigation. A page can have multiple headers (one per section).
<nav> — A section containing navigation links. Use for primary navigation, breadcrumbs, and table of contents. Not every group of links needs a nav — only major navigation blocks.
<main> — The dominant content of the page. Only one per page. Screen readers use this to skip directly to the content, bypassing navigation.
<footer> — Footer for a page or section. Contains authorship info, copyright, related links. Like header, a page can have multiple footers.

Content Sectioning Elements

<article> — Self-contained content that makes sense on its own: a blog post, news article, product card, or comment. Ask: "Would this make sense in an RSS feed?" If yes, use article.
<section> — A thematic grouping of content, typically with a heading. Use when content has a clear topic but is not independently meaningful (unlike article). Chapters, tab panels, and grouped form fields are good candidates.
<aside> — Content tangentially related to the surrounding content: sidebars, pull quotes, related links, advertising. Screen readers let users skip asides.

Inline Semantic Elements

<time> — A date, time, or duration. Use the datetime attribute for machine-readable format: <time datetime="2026-06-20">June 20, 2026</time>. Search engines use this for rich results.
<mark> — Highlighted text. Use for search results highlighting or drawing attention to a relevant passage. Not for emphasis (use <em>) or importance (use <strong>).
<abbr> — An abbreviation. Use the title attribute for the expansion: <abbr title="Cascading Style Sheets">CSS</abbr>.
<code> — Inline code. For code blocks, wrap in <pre><code>.
<cite> — The title of a creative work (book, film, paper). Not for the person who said something.

Why Semantics Matter for SEO

Google's documentation explicitly states that semantic HTML helps their crawler understand page structure. Pages using <article>, <nav>, and proper heading hierarchy (h1 → h2 → h3) give search engines clearer signals about content organisation. The <time> element with datetime attribute feeds directly into rich results.

Screen readers use semantic landmarks to build a page outline. A visually impaired user can jump directly to <main>, skip to the next <article>, or navigate between <nav> sections. Without semantic elements, they must listen to every element sequentially.

Frequently Asked Questions

Why does semantic HTML matter for SEO?

Search engines use HTML structure to understand content hierarchy and meaning. An <article> tag tells crawlers this is a self-contained piece of content; a <nav> tag identifies navigation; <main> marks the primary content area. This structural information helps search engines determine what the page is about, which sections are navigation vs. content, and how to generate featured snippets. Pages using semantic HTML tend to get better accessibility scores (which correlates with better Core Web Vitals), and screen readers use landmark elements like <header>, <main>, and <footer> for navigation, which improves accessibility compliance.

What is the difference between <section> and <div>?

A <div> is a generic container with no semantic meaning — it exists purely for styling and layout. A <section> represents a thematic grouping of content that would logically have a heading. The practical test: if the content would make sense as an entry in a table of contents, use <section>. If it is just a wrapper for CSS purposes (like centering a group of elements or applying a background color), use <div>. Overusing <section> where <div> suffices adds noise to the document outline without improving semantics.

When should I use <article> vs <section>?

Use <article> when the content is self-contained and would make sense independently — blog posts, news articles, product cards, forum posts, and comments. Use <section> for thematic groupings within a page that are not independently meaningful — like chapters of a guide, tabs in a settings panel, or feature sections on a landing page. Articles can contain sections (an article with introduction, body, and conclusion sections), and sections can contain articles (a news section containing multiple article cards).