HTML Cheat Sheet

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Page title | Site name</title>
    <meta name="description" content="One or two sentences for search results.">
    <link rel="stylesheet" href="styles.css">
    <script src="app.js" defer></script>
  </head>
  <body>
    <header>...</header>
    <main>...</main>
    <footer>...</footer>
  </body>
</html>

<a href="https://example.com">External</a>
<a href="about.html">Same folder</a>
<a href="../index.html">Parent folder</a>
<a href="/contact">Site root (needs a server)</a>
<a href="#pricing">Section on this page</a>
<a href="mailto:hello@example.com">Email</a>
<a href="tel:+919876543210">Call</a>
<a href="report.pdf" download>Download (PDF)</a>
<a href="https://example.com" target="_blank">Opens in a new tab</a>

<img src="photo.jpg" alt="What the image shows" width="800" height="600" loading="lazy">
<img src="divider.png" alt="">                       <!-- decorative -->

<img src="photo-800.jpg"
     srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1600.jpg 1600w"
     sizes="(max-width: 600px) 100vw, 600px" alt="..." width="800" height="600">

<figure>
  <img src="chart.png" alt="Sales doubled from 2024 to 2026">
  <figcaption>Figure 1: Sales by year.</figcaption>
</figure>

<ul><li>Unordered</li></ul>
<ol start="3" reversed type="a"><li>Ordered</li></ol>
<dl><dt>Term</dt><dd>Description</dd></dl>

<table>
  <caption>Exam results</caption>
  <thead><tr><th scope="col">Name</th><th scope="col">Marks</th></tr></thead>
  <tbody><tr><th scope="row">Asha</th><td>92</td></tr></tbody>
  <tfoot><tr><td colspan="2">Average: 92</td></tr></tfoot>
</table>

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

  <fieldset>
    <legend>Plan</legend>
    <label><input type="radio" name="plan" value="free" checked> Free</label>
    <label><input type="radio" name="plan" value="pro"> Pro</label>
  </fieldset>

  <label><input type="checkbox" name="terms" required> I accept the terms</label>

  <select name="city" required>
    <option value="">Choose a city</option>
    <option>Pune</option>
  </select>

  <textarea name="message" rows="4"></textarea>
  <button type="submit">Sign up</button>
</form>

<video controls width="640" height="360" poster="poster.jpg">
  <source src="clip.webm" type="video/webm">
  <source src="clip.mp4" type="video/mp4">
  <track kind="captions" src="clip.en.vtt" srclang="en" label="English" default>
</video>
<audio controls src="sound.mp3"></audio>
<iframe src="https://example.com/embed" title="Describe the content" loading="lazy" sandbox></iframe>

<details name="faq" open><summary>Question</summary><p>Answer</p></details>
<dialog id="d"><form method="dialog"><button>Close</button></form></dialog>
<button popovertarget="tips">Tips</button><div id="tips" popover>...</div>