HTML5 Semantic Elements Cheat Sheet

Covers HTML5 semantic tags like header, nav, main, article, and section, plus their implicit accessibility roles.

1 PageBeginnerFeb 25, 2026

Semantic Page Layout

A typical page skeleton built from semantic elements.

html

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Page Title</title></head><body>  <header>    <nav>      <a href="/">Home</a>      <a href="/about">About</a>    </nav>  </header>  <main>    <article>      <h1>Article Title</h1>      <section>        <h2>Section Heading</h2>        <p>Content...</p>      </section>      <aside>Related links</aside>    </article>  </main>  <footer>    <p>&copy; 2026 Company</p>  </footer></body></html>

Semantic Elements

What each element communicates to browsers and assistive tech.

<header>- introductory content or navigational aids for a page or section
<nav>- a block of major navigation links
<main>- the dominant, unique content of the document; only one per page
<article>- self-contained, independently distributable content, like a post or card
<section>- a thematic grouping of content, typically with its own heading
<aside>- content tangentially related to the surrounding content, like a sidebar
<figure> / <figcaption>- self-contained media with an optional caption
<time>- wraps a date or time with a machine-readable datetime attribute, e.g. 2026-07-08
<mark>- highlighted or relevant text
<details> / <summary>- a native disclosure widget that expands and collapses without any JavaScript

Accessible Semantics

Implicit roles and native interactive elements.

html

<!-- Native elements already expose implicit ARIA roles --><nav aria-label="Breadcrumb">...</nav>   <!-- role="navigation" --><main>...</main>                          <!-- role="main" --><!-- details/summary as a native accordion --><details>  <summary>Click to expand</summary>  <p>Hidden content revealed on toggle.</p></details><!-- Prefer <button> over a styled <div> for interactive controls --><button type="button" aria-pressed="false">Toggle</button>

Pro Tip

Semantic elements come with implicit ARIA roles built in, such as nav mapping to role navigation and main mapping to role main, so reaching for explicit role attributes on a div should be your last resort, not your default.

Was this cheat sheet helpful?

Express.js Cheat Sheet

CSS Grid Deep Dive Cheat Sheet

Explore Topics

#HTML5SemanticElements#HTML5SemanticElementsCheatSheet#WebDevelopment#Beginner#SemanticPageLayout#SemanticElements#AccessibleSemantics#Covers#CheatSheet#SkillVeris

Sri Hayavadhana Info-Tech

Professional Web Designing Services