Free Tool

HTML Cheat Sheet

An HTML cheat sheet is a quick reference for the tags, attributes, document structure, forms, media, tables, and metadata used to build webpages.

Search the reference, filter by category, copy examples, and keep a downloadable HTML starter file for projects, lessons, and documentation.

Reference

Find HTML syntax

Selected tag

HTML Document Shell

Start every page with the document type, language, head, and body.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Page title</title>
  </head>
  <body>
    <main>Page content</main>
  </body>
</html>

Result

Creates a valid HTML5 document with mobile viewport support.

Best use

Use this as the starter structure for a standalone HTML page.

HTML cards

Copy examples

20 matches

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Page title</title>
  </head>
  <body>
    <main>Page content</main>
  </body>
</html>
<header>Site header</header>
<nav aria-label="Primary">Navigation</nav>
<main>
  <article>
    <h1>Article title</h1>
    <section>Article section</section>
  </article>
</main>
<footer>Site footer</footer>
<section aria-labelledby="features-heading">
  <h2 id="features-heading">Features</h2>
  <p>Describe the section here.</p>
</section>
<p>This is a paragraph.</p>
<p><strong>Important:</strong> Save your work before closing.</p>
<p><em>Use emphasis sparingly.</em></p>
<ul>
  <li>Install dependencies</li>
  <li>Run tests</li>
</ul>

<ol>
  <li>Create the branch</li>
  <li>Open the pull request</li>
</ol>
<details>
  <summary>Show setup notes</summary>
  <p>Install dependencies, then run the development server.</p>
</details>
<a href="https://www.codecard.dev">Code Card</a>
<a href="#faq">Skip to FAQ</a>
<a href="mailto:support@example.com">Email support</a>
<a href="/files/report.pdf" download>Download report</a>
<a href="/files/template.csv" download="starter-template.csv">Download CSV template</a>
<img
  src="/dashboard.png"
  alt="Analytics dashboard showing weekly coding activity"
  width="1200"
  height="800"
  loading="lazy"
/>
<figure>
  <img src="/chart.png" alt="Token usage chart" />
  <figcaption>Weekly AI coding token usage.</figcaption>
</figure>
<video controls width="720" poster="/preview.jpg">
  <source src="/demo.mp4" type="video/mp4" />
  Your browser does not support the video tag.
</video>
<label for="email">Email address</label>
<input id="email" name="email" type="email" autocomplete="email" required />
<label for="message">Message</label>
<textarea id="message" name="message" rows="5" placeholder="Tell us what you need"></textarea>
<label for="language">Favorite language</label>
<select id="language" name="language">
  <option value="">Choose one</option>
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="js">JavaScript</option>
</select>
<button type="button">Preview</button>
<button type="submit">Send form</button>
<button type="reset">Reset</button>
<table>
  <caption>Build results</caption>
  <thead>
    <tr>
      <th scope="col">Check</th>
      <th scope="col">Status</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">TypeScript</th>
      <td>Passed</td>
    </tr>
  </tbody>
</table>
<table>
  <tr>
    <th colspan="2">Q2 Metrics</th>
  </tr>
  <tr>
    <td>Revenue</td>
    <td>$42,000</td>
  </tr>
</table>
<title>Free HTML Cheat Sheet</title>
<meta name="description" content="Search and copy common HTML tags and examples." />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="canonical" href="https://www.example.com/tools/html-cheat-sheet" />
<meta property="og:title" content="Free HTML Cheat Sheet" />
<meta property="og:description" content="Search and copy common HTML tags." />
<meta property="og:url" content="https://www.example.com/tools/html-cheat-sheet" />
<meta property="og:image" content="https://www.example.com/og.png" />
<script src="/app.js" defer></script>
<script type="module" src="/module.js"></script>

Share the coding work behind your web projects

Code Card turns Claude Code, Codex, and OpenClaw sessions into a public profile with activity graphs, token breakdowns, badges, and shareable developer cards. Start with npx code-card.

Get Code Card

FAQ

HTML syntax questions

What is an HTML cheat sheet?

An HTML cheat sheet is a quick reference for common tags, attributes, document structure, forms, media, tables, and metadata used to build webpages.

Which HTML tags should beginners learn first?

Start with html, head, body, title, main, section, h1 through h6, p, a, img, ul, ol, li, form, label, input, button, table, tr, th, and td.

What is semantic HTML?

Semantic HTML uses tags that describe meaning, such as header, nav, main, article, section, aside, and footer, instead of using generic div elements everywhere.

Can I copy the examples from this reference?

Yes. Each HTML card includes a copy button, and the full reference can be downloaded as an HTML file for offline use.

Does this replace MDN documentation?

No. This is a fast working reference for common patterns. Use MDN when you need full browser compatibility notes, API details, or edge-case behavior.

Related tools

HTML Table Generator

Build responsive HTML tables from rows, CSV, or spreadsheet data with captions and scoped headers.

Markdown Cheat Sheet

Search and copy Markdown syntax for READMEs, issues, pull requests, and technical docs.