Skip to content

HTML Cheat Sheet

HTML (HyperText Markup Language) is the standard markup language for structuring web content. This HTML cheatsheet provides a structured, example-driven reference for HTML document structure, semantic elements, forms, tables, media, and accessibility-friendly markup patterns.

Minimal HTML Document

<!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>
    <h1>Hello</h1>
  </body>
</html>

Head Essentials

<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="Page description" />
<link rel="icon" href="/favicon.ico" />

<meta property="og:title" content="Title" />
<meta property="og:description" content="Description" />
<meta property="og:image" content="https://example.com/cover.png" />
<meta property="og:url" content="https://example.com/page" />

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Title" />
<meta name="twitter:description" content="Description" />

Text Content

<h1>Main title</h1>
<h2>Section</h2>
<p>Paragraph text.</p>
<strong>Strong</strong>
<em>Emphasis</em>
<small>Small</small>
<mark>Highlight</mark>

<blockquote cite="https://example.com">
  Quoted text
</blockquote>

<a href="https://example.com">External link</a>
<a href="/docs/page/">Internal link</a>

<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  Open in new tab
</a>

Images

<img src="image.jpg" alt="Descriptive alt text" />

<img src="image.jpg" alt="Alt" width="640" height="480" loading="lazy" />

<img
  src="image-640.jpg"
  srcset="image-640.jpg 640w, image-1280.jpg 1280w"
  sizes="(max-width: 640px) 100vw, 640px"
  alt="Alt"
/>

Lists

<ul>
  <li>Item</li>
  <li>Item</li>
</ul>

<ol>
  <li>First</li>
  <li>Second</li>
</ol>

<dl>
  <dt>Term</dt>
  <dd>Description</dd>
</dl>

Tables

<table>
  <caption>Table caption</caption>
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Value</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Item</td>
      <td>123</td>
    </tr>
  </tbody>
</table>

Semantic Layout Elements

<header></header>
<nav></nav>
<main></main>
<section></section>
<article></article>
<aside></aside>
<footer></footer>

<header>
  <nav aria-label="Primary">
    <a href="/">Home</a>
  </nav>
</header>

<main>
  <article>
    <h1>Title</h1>
    <p>Content</p>
  </article>
</main>

<footer>
  <small>&copy; 2025</small>
</footer>

Forms

Form + Inputs

<form action="/submit" method="post">
  <label for="email">Email</label>
  <input id="email" name="email" type="email" required />

  <label for="pw">Password</label>
  <input id="pw" name="pw" type="password" minlength="8" required />

  <button type="submit">Submit</button>
</form>

<input type="text" />
<input type="number" />
<input type="email" />
<input type="password" />
<input type="date" />
<input type="file" />
<input type="checkbox" />
<input type="radio" />
<input type="range" />
<input type="color" />

Select, Textarea

<select name="country">
  <option value="tr">Turkey</option>
  <option value="de">Germany</option>
</select>

<textarea name="message" rows="4" cols="40"></textarea>

Fieldset & Legend

<fieldset>
  <legend>Account</legend>
  <label>
    <input type="checkbox" name="news" />
    Subscribe
  </label>
</fieldset>

Buttons

<button type="button">Button</button>
<button type="submit">Submit</button>
<button type="reset">Reset</button>

Media

Audio / Video

<audio controls src="audio.mp3"></audio>

<video controls width="640" src="video.mp4"></video>

<video controls width="640">
  <source src="video.mp4" type="video/mp4" />
  <source src="video.webm" type="video/webm" />
</video>

Iframes

<iframe
  src="https://example.com"
  title="Embedded content"
  width="640"
  height="480"
  loading="lazy"
></iframe>

Details & Summary

<details>
  <summary>Open</summary>
  <p>Hidden content</p>
</details>

Dialog

<dialog id="dlg">
  <p>Dialog text</p>
  <form method="dialog">
    <button>Close</button>
  </form>
</dialog>

Accessibility Attributes

<button aria-label="Close">×</button>
<nav aria-label="Primary"></nav>
<img alt="Meaningful description" />

<input aria-describedby="help" />
<p id="help">Helper text</p>

Scripts

<script src="app.js"></script>

<script type="module" src="app.mjs"></script>

<script defer src="app.js"></script>
<script async src="analytics.js"></script>

Meta Refresh & Redirect

<meta http-equiv="refresh" content="5; url=/new-page/" />