Cheatsheet - HTML

Document Skeleton

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Page Title</title>
    <meta name="description" content="Brief page summary" />
    <link rel="icon" href="/favicon.ico" />
    <link rel="stylesheet" href="/style.css" />
  </head>
  <body>
    <!-- Content goes here -->
    <script src="/app.js" defer></script>
  </body>
</html>

Semantic Structure

<header>
  <nav aria-label="Main Navigation">
    <a href="/">Home</a>
    <a href="/about">About</a>
  </nav>
</header>

<main>
  <article>
    <h1>Primary Article Title</h1>
    <section>
      <h2>Section Title</h2>
      <p>Article section content...</p>
    </section>
  </article>

  <aside aria-label="Related links">
    <h3>Related Topics</h3>
  </aside>
</main>

<footer>
  <p>&copy; 2026 HackingNote</p>
</footer>

Text Formatting

<!-- Headings -->
<h1>Heading 1</h1> .. <h6>Heading 6</h6>

<!-- Inline elements -->
<p>Standard paragraph with <strong>strong importance</strong> and <em>emphasis</em>.</p>
<mark>Highlighted text</mark>
<small>Fine print or disclaimer</small>
<del>Deleted text</del> and <ins>inserted text</ins>
<sub>Subscript</sub> (e.g. H<sub>2</sub>O) and <sup>Superscript</sup> (e.g. E = mc<sup>2</sup>)
<abbr title="Application Programming Interface">API</abbr>
<code>inline_code()</code>

<!-- Preformatted text -->
<pre><code>Formatted code block</code></pre>

<!-- Blockquotes -->
<blockquote cite="https://example.com">
  Quoted text from external citation.
</blockquote>

Links & Media

<!-- Hyperlinks -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">External Link</a>
<a href="#section-id">Jump to Anchor</a>
<a href="mailto:[email protected]">Send Email</a>
<a href="tel:+1234567890">Call Phone</a>

<!-- Responsive Image -->
<img src="/image.webp" alt="Descriptive text" width="800" height="400" loading="lazy" />

<!-- Audio and Video -->
<video controls width="640" poster="/poster.webp">
  <source src="/video.mp4" type="video/mp4" />
  Your browser does not support HTML5 video.
</video>

Lists & Tables

<!-- Unordered & Ordered Lists -->
<ul>
  <li>First item</li>
  <li>Second item</li>
</ul>

<ol start="1">
  <li>Step one</li>
  <li>Step two</li>
</ol>

<!-- Data Table -->
<table>
  <caption>Monthly Revenue</caption>
  <thead>
    <tr>
      <th scope="col">Month</th>
      <th scope="col">Amount</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>$12,000</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Total</td>
      <td>$12,000</td>
    </tr>
  </tfoot>
</table>

Forms & Inputs

<form action="/submit" method="post">
  <!-- Text Input with Label -->
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" placeholder="johndoe" required />

  <!-- Email & Password -->
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" autocomplete="email" required />

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

  <!-- Checkbox & Radio -->
  <label>
    <input type="checkbox" name="terms" required /> I accept terms
  </label>

  <!-- Select Dropdown -->
  <label for="role">Role:</label>
  <select id="role" name="role">
    <option value="user" selected>User</option>
    <option value="admin">Admin</option>
  </select>

  <!-- Buttons -->
  <button type="submit">Submit</button>
  <button type="button">Cancel</button>
</form>

HTML Entities