HTML Cheatsheet

Semantic Elements

Use this HTML reference while you build software engineering projects, review code for technical interview prep, or polish examples for a software engineer resume.

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>