Skip to content

Instantly share code, notes, and snippets.

@razor303Jc

razor303Jc/html5_cheatsheet.md

Created September 8, 2025 07:19
Show Gist options
  • Save razor303Jc/96f1e4b8e1bcb88321c26232b7692031 to your computer and use it in GitHub Desktop.
Save razor303Jc/96f1e4b8e1bcb88321c26232b7692031 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
html5_cheatsheet.md

HTML5 Cheatsheet

Document Structure

<!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>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <!-- Content -->
    <script src="script.js"></script>
  </body>
</html>

Essential Meta Tags

<!-- Responsive viewport -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<!-- SEO -->
<meta name="description" content="Page description (150-160 chars)" />
<meta name="keywords" content="keyword1, keyword2, keyword3" />

<!-- Open Graph -->
<meta property="og:title" content="Page Title" />
<meta property="og:description" content="Page description" />
<meta property="og:image" content="image-url.jpg" />
<meta property="og:url" content="https://example.com" />

<!-- Twitter Cards -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Page Title" />
<meta name="twitter:description" content="Page description" />

Semantic Elements

<!-- Page Structure -->
<header>Site header</header>
<nav>Navigation</nav>
<main>Main content</main>
<article>Independent content</article>
<section>Thematic content grouping</section>
<aside>Sidebar content</aside>
<footer>Site footer</footer>

<!-- Content Elements -->
<h1>Main heading</h1>
<h2>Section heading</h2>
<p>Paragraph</p>
<blockquote cite="source">Quote</blockquote>
<figure>
  <img src="image.jpg" alt="Description" />
  <figcaption>Image caption</figcaption>
</figure>

<!-- Text Formatting -->
<strong>Important (bold)</strong>
<em>Emphasized (italic)</em>
<mark>Highlighted</mark>
<small>Fine print</small>
<del>Deleted text</del>
<ins>Inserted text</ins>
<sub>Subscript</sub>
<sup>Superscript</sup>
<code>Inline code</code>
<pre><code>Code block</code></pre>

Form Elements

<!-- Basic Form -->
<form action="/submit" method="post">
  <fieldset>
    <legend>Form Section</legend>

    <!-- Text Input -->
    <label for="name">Name:</label>
    <input
      type="text"
      id="name"
      name="name"
      required
      placeholder="Enter name"
      autocomplete="name"
    />

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

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

    <!-- Number -->
    <label for="age">Age:</label>
    <input type="number" id="age" name="age" min="18" max="120" />

    <!-- Date -->
    <label for="date">Date:</label>
    <input type="date" id="date" name="date" />

    <!-- Select -->
    <label for="country">Country:</label>
    <select id="country" name="country" required>
      <option value="">Choose...</option>
      <option value="us">United States</option>
      <option value="ca">Canada</option>
    </select>

    <!-- Textarea -->
    <label for="message">Message:</label>
    <textarea id="message" name="message" rows="4"></textarea>

    <!-- Radio Buttons -->
    <fieldset>
      <legend>Gender:</legend>
      <input type="radio" id="male" name="gender" value="male" />
      <label for="male">Male</label>
      <input type="radio" id="female" name="gender" value="female" />
      <label for="female">Female</label>
    </fieldset>

    <!-- Checkboxes -->
    <input type="checkbox" id="subscribe" name="subscribe" value="yes" />
    <label for="subscribe">Subscribe to newsletter</label>

    <!-- File Upload -->
    <label for="file">Upload file:</label>
    <input type="file" id="file" name="file" accept="image/*" multiple />

    <!-- Submit -->
    <button type="submit">Submit</button>
    <button type="reset">Reset</button>
  </fieldset>
</form>

New Input Types

<!-- HTML5 Input Types -->
<input type="color" value="#ff0000" />
<input type="date" />
<input type="datetime-local" />
<input type="email" />
<input type="file" accept="image/*" multiple />
<input type="month" />
<input type="number" min="0" max="100" step="5" />
<input type="password" />
<input type="range" min="0" max="100" value="50" />
<input type="search" />
<input type="tel" />
<input type="time" />
<input type="url" />
<input type="week" />

Multimedia

<!-- Images -->
<img src="image.jpg" alt="Description" width="300" height="200" />

<!-- Responsive Images -->
<picture>
  <source media="(min-width: 800px)" srcset="large.jpg" />
  <source media="(min-width: 400px)" srcset="medium.jpg" />
  <img src="small.jpg" alt="Responsive image" />
</picture>

<!-- Audio -->
<audio controls>
  <source src="audio.mp3" type="audio/mpeg" />
  <source src="audio.ogg" type="audio/ogg" />
  Your browser does not support audio.
</audio>

<!-- Video -->
<video controls width="640" height="360" poster="poster.jpg">
  <source src="video.mp4" type="video/mp4" />
  <source src="video.webm" type="video/webm" />
  <track kind="subtitles" src="subtitles.vtt" srclang="en" label="English" />
  Your browser does not support video.
</video>

<!-- Canvas -->
<canvas id="canvas" width="800" height="400"> Canvas not supported. </canvas>

<!-- SVG -->
<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="red" />
</svg>

Lists

<!-- Unordered List -->
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<!-- Ordered List -->
<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

<!-- Definition List -->
<dl>
  <dt>Term 1</dt>
  <dd>Definition 1</dd>
  <dt>Term 2</dt>
  <dd>Definition 2</dd>
</dl>

Tables

<table>
  <caption>
    Table Caption
  </caption>
  <thead>
    <tr>
      <th scope="col">Header 1</th>
      <th scope="col">Header 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Row Header</th>
      <td>Data</td>
    </tr>
    <tr>
      <th scope="row">Row Header</th>
      <td>Data</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">Footer</td>
    </tr>
  </tfoot>
</table>

Interactive Elements

<!-- Details/Summary -->
<details>
  <summary>Click to expand</summary>
  <p>Hidden content</p>
</details>

<!-- Dialog -->
<dialog id="dialog">
  <p>Dialog content</p>
  <button onclick="document.getElementById('dialog').close()">Close</button>
</dialog>

<!-- Progress -->
<progress value="70" max="100">70%</progress>

<!-- Meter -->
<meter value="6" min="0" max="10">6 out of 10</meter>

Global Attributes

<!-- Common Attributes -->
<div id="unique-id" class="class-name" title="Tooltip text">
  <div data-custom="custom-data" style="color: red;">
    <div lang="en" dir="ltr" tabindex="0">
      <div contenteditable="true" spellcheck="false">
        <div hidden draggable="true" translate="no"></div>
      </div>
    </div>
  </div>
</div>

Accessibility Attributes

<!-- ARIA Roles -->
<nav role="navigation" aria-label="Main navigation">
  <main role="main">
    <aside role="complementary">
      <!-- ARIA Labels -->
      <button aria-label="Close dialog" aria-describedby="help-text">×</button>
      <span id="help-text" class="sr-only">Closes the dialog</span>

      <!-- ARIA States -->
      <button aria-expanded="false" aria-controls="menu">Menu</button>
      <ul id="menu" aria-hidden="true">
        <!-- Form Accessibility -->
        <input aria-invalid="true" aria-describedby="error-msg" />
        <span id="error-msg" role="alert">Error message</span>

        <!-- Skip Links -->
        <a href="#main-content" class="skip-link">Skip to main content</a>
      </ul>
    </aside>
  </main>
</nav>

Character Entities

<!-- Common Entities -->
&lt;
<!-- < -->
&gt;
<!-- > -->
&amp;
<!-- & -->
&quot;
<!-- " -->
&apos;
<!-- ' -->
&nbsp;
<!-- Non-breaking space -->
&copy;
<!-- © -->
&reg;
<!-- ® -->
&trade;
<!-- ™ -->
&hellip;
<!-- … -->
&mdash;
<!-- — -->
&ndash;
<!-- – -->

Quick Reference

Block vs Inline Elements

Block Elements: <div>, <p>, <h1-h6>, <ul>, <ol>, <li>, <header>, <nav>, <main>, <section>, <article>, <aside>, <footer>

Inline Elements: <span>, <a>, <strong>, <em>, <code>, <img>, <input>, <button>

Form Validation Attributes

  • required - Field is required
  • pattern="regex" - Must match pattern
  • minlength="n" - Minimum length
  • maxlength="n" - Maximum length
  • min="n" - Minimum value (numbers)
  • max="n" - Maximum value (numbers)
  • step="n" - Step value for numbers

Boolean Attributes

  • checked - Checkbox/radio selected
  • selected - Option selected
  • disabled - Element disabled
  • readonly - Input readonly
  • required - Field required
  • autofocus - Auto focus on load
  • autoplay - Media autoplay
  • controls - Show media controls
  • loop - Loop media
  • muted - Mute media
  • multiple - Multiple file selection
  • hidden - Hide element
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment