HTML Cheatsheet

Semantic Elements

Use this HTML reference while you build software engineering projects, review code, or refresh the syntax you reach for most.

Why Semantic HTML

Semantic elements describe what content is, not just how it looks. They improve: - Accessibility — screen readers use them for navigation landmarks. - SEO — search engines understand page structure. - Maintainability — <article> is clearer than <div class="article">.

Page-Level Landmarks

<body>
  <header>          <!-- site/page header, logo, primary nav -->
    <nav>...</nav>
  </header>

  <main>            <!-- primary content — only ONE per page -->
    <article>...</article>
  </main>

  <aside>           <!-- sidebar, related content, ads -->
    ...
  </aside>

  <footer>          <!-- site/page footer, copyright, links -->
    ...
  </footer>
</body>

Element	ARIA landmark role	Use for
`<header>`	`banner` (when at body level)	Site header, page header, article header
`<nav>`	`navigation`	Navigation menus
`<main>`	`main`	Primary content of the page
`<aside>`	`complementary`	Sidebars, related content
`<footer>`	`contentinfo` (when at body level)	Page / article footer
`<section>`	`region` (when named)	Themed content section
`<article>`	`article`	Self-contained content
`<form>`	`form` (when named)	User-input form
`<search>`	`search`	Search functionality

`<header>` and `<footer>`

Can appear at page level or inside <article> / <section>.

<!-- Page-level header -->
<header>
  <a href="/" class="logo">My Site</a>
  <nav aria-label="Primary">
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/about">About</a></li>
    </ul>
  </nav>
</header>

<!-- Article-level header -->
<article>
  <header>
    <h1>Article Title</h1>
    <p>Published <time datetime="2025-06-13">June 13, 2025</time> by Jane Doe</p>
  </header>
  <p>Article content...</p>
  <footer>
    <p>Tags: <a href="/tag/html">HTML</a>, <a href="/tag/css">CSS</a></p>
  </footer>
</article>

`<main>`

One per page. Contains the primary content. Skip links should point here.

<!-- Skip link (at top of page, visually hidden until focused) -->
<a href="#main-content" class="skip-link">Skip to main content</a>

<main id="main-content">
  <h1>Page Heading</h1>
  <!-- primary content -->
</main>

`<nav>`

Marks major navigation blocks. Use aria-label when there are multiple <nav> elements on the page.

<nav aria-label="Primary">
  <ul>
    <li><a href="/" aria-current="page">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/docs">Docs</a></li>
    <li aria-current="page">API Reference</li>
  </ol>
</nav>

<nav aria-label="Pagination">
  <a href="?page=1" rel="prev">Previous</a>
  <a href="?page=3" rel="next">Next</a>
</nav>

`<article>`

Self-contained, independently distributable content — blog posts, news articles, forum posts, product cards, comments.

<!-- Blog post -->
<article>
  <header>
    <h2><a href="/posts/my-post">My Post Title</a></h2>
    <time datetime="2025-06-13">June 13, 2025</time>
  </header>
  <p>Article body text...</p>
  <footer>
    <p>By <a href="/authors/jane">Jane Doe</a></p>
  </footer>
</article>

<!-- Nested articles (e.g., article + its comments) -->
<article>
  <h2>Blog Post</h2>
  <p>Content...</p>

  <section>
    <h3>Comments</h3>
    <article>
      <p>Great post!</p>
      <footer><cite>Bob</cite> — <time datetime="2025-06-13">today</time></footer>
    </article>
    <article>
      <p>Very helpful, thanks.</p>
      <footer><cite>Alice</cite></footer>
    </article>
  </section>
</article>

`<section>`

A thematic grouping of content within a document. Should almost always have a heading.

<!-- With heading -->
<section>
  <h2>Features</h2>
  <p>Our platform offers...</p>
</section>

<!-- Multiple sections in an article -->
<article>
  <h1>Complete Guide to CSS Grid</h1>
  <section>
    <h2>Introduction</h2>
    <p>CSS Grid is a two-dimensional layout system...</p>
  </section>
  <section>
    <h2>Container Properties</h2>
    <p>Apply these to the grid container...</p>
  </section>
  <section>
    <h2>Item Properties</h2>
    <p>Apply these to the grid children...</p>
  </section>
</article>

<div> vs <section>: Use <section> only when the content has a meaningful semantic grouping with a heading. Use <div> for styling/layout hooks.

`<aside>`

Content tangentially related to the surrounding content — sidebars, pull quotes, glossary entries, advertisements, author bios.

<!-- Page sidebar -->
<main>
  <article>
    <h1>Main Article</h1>
    <p>Content...</p>
  </article>
  <aside>
    <h2>Related Articles</h2>
    <ul>
      <li><a href="/post/1">Post 1</a></li>
      <li><a href="/post/2">Post 2</a></li>
    </ul>
  </aside>
</main>

<!-- Pull quote inside an article -->
<article>
  <p>Web standards are crucial for accessibility...</p>
  <aside>
    <blockquote>"Accessibility is not optional."</blockquote>
  </aside>
  <p>More article text...</p>
</article>

`<search>` Element

HTML5.3 element for search functionality. Wraps search controls.

<search>
  <form action="/search" method="get" role="search">
    <label for="q">Search</label>
    <input type="search" id="q" name="q" placeholder="Search...">
    <button type="submit">Go</button>
  </form>
</search>

Sectioning Headings: `<hgroup>`

Groups a heading with a subheading (tagline/description) so they're treated as a unit.

<hgroup>
  <h1>My Blog</h1>
  <p>Thoughts on web development</p>
</hgroup>

<article>
  <hgroup>
    <h2>Getting Started with TypeScript</h2>
    <p>A beginner-friendly introduction to static typing in JavaScript</p>
  </hgroup>
  <p>Article content...</p>
</article>

`<details>` and `<summary>`

Disclosure widget — accordion / collapsible section without JavaScript.

<!-- Collapsed by default -->
<details>
  <summary>What is your refund policy?</summary>
  <p>We offer a 30-day full refund on all purchases. Contact support@example.com.</p>
</details>

<!-- Open by default -->
<details open>
  <summary>System Requirements</summary>
  <ul>
    <li>Windows 10 / macOS 12 / Ubuntu 20.04+</li>
    <li>4 GB RAM minimum</li>
    <li>2 GB disk space</li>
  </ul>
</details>

<!-- FAQ accordion (multiple details) -->
<section>
  <h2>FAQ</h2>
  <details>
    <summary>How do I reset my password?</summary>
    <p>Click "Forgot password" on the login page.</p>
  </details>
  <details>
    <summary>Can I cancel anytime?</summary>
    <p>Yes, cancel anytime with no penalty.</p>
  </details>
</section>

`<dialog>` Element

Native modal / non-modal dialog. Requires JavaScript to open.

<dialog id="confirm-dialog">
  <h2>Confirm Action</h2>
  <p>Are you sure you want to delete this item?</p>
  <form method="dialog">
    <button value="cancel">Cancel</button>
    <button value="confirm" autofocus>Delete</button>
  </form>
</dialog>

<button type="button" id="open-btn">Delete Item</button>

<script>
  const dialog = document.getElementById('confirm-dialog');
  document.getElementById('open-btn').addEventListener('click', () => {
    dialog.showModal();   // modal (with backdrop)
    // dialog.show();     // non-modal
  });
  dialog.addEventListener('close', () => {
    console.log(dialog.returnValue);  // "cancel" or "confirm"
  });
</script>

`<figure>` and `<figcaption>`

Self-contained content (image, diagram, code listing, table) with an optional caption.

<figure>
  <img src="/chart.png" alt="Bar chart: revenue 2024">
  <figcaption>Figure 1: Annual revenue breakdown by quarter.</figcaption>
</figure>

<figure>
  <pre><code>const result = arr.reduce((a, b) => a + b, 0);</code></pre>
  <figcaption>Summing an array with <code>reduce()</code>.</figcaption>
</figure>

<figure>
  <blockquote>
    <p>Design is not just what it looks like. Design is how it works.</p>
  </blockquote>
  <figcaption>— Steve Jobs</figcaption>
</figure>

`<address>` Element

Contact information for the nearest <article> or the document.

<!-- Document-level (site contact) -->
<footer>
  <address>
    <a href="mailto:hello@example.com">hello@example.com</a><br>
    123 Main St, San Francisco, CA 94105
  </address>
</footer>

<!-- Article-level (author contact) -->
<article>
  <h2>Post Title</h2>
  <address>
    Written by <a href="/authors/jane">Jane Doe</a>
  </address>
  <p>Content...</p>
</article>

`<time>` and `<data>`

<!-- Machine-readable date -->
<time datetime="2025-06-13">June 13, 2025</time>
<time datetime="2025-06-13T14:30:00-05:00">2:30 PM CDT</time>

<!-- Machine-readable value for non-date/time data -->
<data value="12345">Product SKU: ABC</data>

Typical Page Skeleton

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Article Title | My Blog</title>
</head>
<body>
  <a href="#main" class="skip-link">Skip to content</a>

  <header>
    <a href="/" aria-label="Home">My Blog</a>
    <nav aria-label="Primary navigation">
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about">About</a></li>
      </ul>
    </nav>
  </header>

  <main id="main">
    <article>
      <header>
        <hgroup>
          <h1>Article Title</h1>
          <p>A subtitle or deck goes here</p>
        </hgroup>
        <p>By <a href="/authors/jane">Jane</a> ·
           <time datetime="2025-06-13">June 13, 2025</time>
        </p>
      </header>

      <section>
        <h2>Introduction</h2>
        <p>...</p>
      </section>

      <section>
        <h2>Main Content</h2>
        <p>...</p>
        <figure>
          <img src="/image.jpg" alt="Description">
          <figcaption>Caption text.</figcaption>
        </figure>
      </section>

      <footer>
        <p>Filed under: <a href="/tag/html">HTML</a></p>
      </footer>
    </article>

    <aside aria-label="Related articles">
      <h2>Related</h2>
      <ul>
        <li><a href="/post/1">Related Post 1</a></li>
      </ul>
    </aside>
  </main>

  <footer>
    <p>&copy; 2025 My Blog</p>
    <nav aria-label="Footer navigation">
      <a href="/privacy">Privacy</a>
      <a href="/terms">Terms</a>
    </nav>
  </footer>
</body>
</html>

Semantic Element Quick Reference

Element	Block/Inline	Purpose
`<header>`	Block	Page or section header
`<footer>`	Block	Page or section footer
`<main>`	Block	Primary page content (one per page)
`<nav>`	Block	Navigation links
`<aside>`	Block	Tangential / sidebar content
`<section>`	Block	Thematic section with heading
`<article>`	Block	Self-contained content unit
`<hgroup>`	Block	Heading + subheading group
`<search>`	Block	Search UI container
`<address>`	Block	Contact information
`<figure>`	Block	Self-contained figure with optional caption
`<figcaption>`	Block	Caption for `<figure>`
`<details>`	Block	Disclosure widget
`<summary>`	Block	Visible label for `<details>`
`<dialog>`	Block	Modal or non-modal dialog
`<time>`	Inline	Date/time with machine-readable value
`<data>`	Inline	Generic machine-readable value
`<mark>`	Inline	Highlighted text
`<abbr>`	Inline	Abbreviation
`<cite>`	Inline	Title of creative work
`<dfn>`	Inline	Definition of term

Semantic Elements

Why Semantic HTML

Page-Level Landmarks

<header> and <footer>

<main>

<nav>

<article>

<section>

<aside>

<search> Element

Sectioning Headings: <hgroup>

<details> and <summary>

<dialog> Element

<figure> and <figcaption>

<address> Element

<time> and <data>