Built for developers, by XinhND

v2.1.0

Ready

HTML5 Cheat Sheet

Complete reference guide for HTML5 with interactive examples and live playground links

Basic Structure

Document Structure

Basic HTML5 document structure with essential meta tags

HTML5
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document Title</title>
  <link rel="stylesheet" href="styles.css">
  <script src="script.js" defer></script>
</head>
<body>
  <!-- Content goes here -->
</body>
</html>

Text Elements

Common text elements and formatting tags

HTML5
<!-- Headings -->
<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Section Heading</h3>

<!-- Paragraphs and Text Formatting -->
<p>This is a paragraph with <strong>bold</strong> and <em>italic</em> text.</p>
<p>Here's some <mark>highlighted</mark> text and a <code>code snippet</code>.</p>

<!-- Lists -->
<ul>
  <li>Unordered list item 1</li>
  <li>Unordered list item 2</li>
</ul>

<ol>
  <li>Ordered list item 1</li>
  <li>Ordered list item 2</li>
</ol>

<dl>
  <dt>Term</dt>
  <dd>Definition</dd>
</dl>

Links and Images

Working with links and images

HTML5
<!-- Links -->
<a href="https://example.com">Regular Link</a>
<a href="mailto:email@example.com">Email Link</a>
<a href="tel:+1234567890">Phone Link</a>
<a href="#section-id">Internal Link</a>

<!-- Images -->
<img src="image.jpg" alt="Description" width="300" height="200">
<img src="image.webp" alt="Modern format" loading="lazy">

<!-- Figure with Caption -->
<figure>
  <img src="image.jpg" alt="Description">
  <figcaption>Image caption</figcaption>
</figure>

Semantic Elements

Page Structure

Semantic page structure elements

HTML5
<!-- Header -->
<header>
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/about">About</a></li>
    </ul>
  </nav>
</header>

<!-- Main Content -->
<main>
  <article>
    <h1>Article Title</h1>
    <p>Article content...</p>
  </article>
  
  <aside>
    <h2>Sidebar</h2>
    <p>Related content...</p>
  </aside>
</main>

<!-- Footer -->
<footer>
  <p>&copy; 2024 Your Company</p>
</footer>

Content Sections

Semantic content organization elements

HTML5
<!-- Section -->
<section>
  <h2>Section Title</h2>
  <p>Section content...</p>
</section>

<!-- Article -->
<article>
  <header>
    <h1>Article Title</h1>
    <time datetime="2024-03-20">March 20, 2024</time>
  </header>
  <p>Article content...</p>
  <footer>
    <p>Author: John Doe</p>
  </footer>
</article>

<!-- Aside -->
<aside>
  <h3>Related Links</h3>
  <ul>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
  </ul>
</aside>

Navigation and Groups

Navigation and content grouping elements

HTML5
<!-- Navigation -->
<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/products">Products</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

<!-- Figure Group -->
<figure>
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <figcaption>Group of images</figcaption>
</figure>

<!-- Details and Summary -->
<details>
  <summary>Click to expand</summary>
  <p>Hidden content that can be toggled.</p>
</details>

Forms and Input

Form Structure

Basic form structure and common input types

HTML5
<!-- Basic Form -->
<form action="/submit" method="post">
  <fieldset>
    <legend>Personal Information</legend>
    
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>
    
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
    
    <label for="phone">Phone:</label>
    <input type="tel" id="phone" name="phone" pattern="[0-9]{10}">
    
    <button type="submit">Submit</button>
  </fieldset>
</form>

Input Types

HTML5 input types and attributes

HTML5
<!-- Text Inputs -->
<input type="text" placeholder="Text">
<input type="email" placeholder="Email">
<input type="tel" placeholder="Phone">
<input type="url" placeholder="Website">
<input type="password" placeholder="Password">
<input type="search" placeholder="Search">

<!-- Number Inputs -->
<input type="number" min="0" max="100" step="1">
<input type="range" min="0" max="100">

<!-- Date and Time -->
<input type="date">
<input type="time">
<input type="datetime-local">
<input type="month">
<input type="week">

<!-- File Upload -->
<input type="file" accept="image/*">
<input type="file" multiple>

<!-- Color Picker -->
<input type="color">

Form Elements

Advanced form elements and controls

HTML5
<!-- Select -->
<select name="country">
  <optgroup label="North America">
    <option value="us">United States</option>
    <option value="ca">Canada</option>
  </optgroup>
  <optgroup label="Europe">
    <option value="uk">United Kingdom</option>
    <option value="fr">France</option>
  </optgroup>
</select>

<!-- Textarea -->
<textarea rows="4" cols="50" placeholder="Enter your message"></textarea>

<!-- Checkboxes -->
<label>
  <input type="checkbox" name="interests" value="sports">
  Sports
</label>
<label>
  <input type="checkbox" name="interests" value="music">
  Music
</label>

<!-- Radio Buttons -->
<label>
  <input type="radio" name="gender" value="male">
  Male
</label>
<label>
  <input type="radio" name="gender" value="female">
  Female
</label>

<!-- Datalist -->
<input list="browsers" name="browser">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
</datalist>

Multimedia

Audio and Video

Audio and video elements with fallbacks

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

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

<!-- Video with Poster -->
<video controls poster="thumbnail.jpg">
  <source src="video.mp4" type="video/mp4">
</video>

Canvas and SVG

Canvas and SVG graphics elements

HTML5
<!-- Canvas -->
<canvas id="myCanvas" width="200" height="200">
  Your browser does not support canvas.
</canvas>

<!-- SVG -->
<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="black" fill="red" />
  <text x="50" y="50" text-anchor="middle">SVG</text>
</svg>

<!-- SVG as Image -->
<img src="image.svg" alt="SVG Image">

Advanced Features

Data Attributes

Custom data attributes and microdata

HTML5
<!-- Custom Data Attributes -->
<div data-user-id="123" data-role="admin">
  User Content
</div>

<!-- Microdata -->
<div itemscope itemtype="http://schema.org/Person">
  <span itemprop="name">John Doe</span>
  <span itemprop="jobTitle">Developer</span>
  <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
    <span itemprop="streetAddress">123 Main St</span>
    <span itemprop="addressLocality">City</span>
  </div>
</div>

Web Components

Web Components and Shadow DOM

HTML5
<!-- Custom Element -->
<custom-element>
  <template>
    <style>
      :host {
        display: block;
        padding: 1rem;
      }
    </style>
    <div class="content">
      <slot></slot>
    </div>
  </template>
</custom-element>

<!-- Shadow DOM -->
<div id="host">
  <style>
    .shadow-content {
      color: blue;
    }
  </style>
  <div class="shadow-content">
    Shadow DOM content
  </div>
</div>

Progressive Enhancement

Progressive enhancement and feature detection

HTML5
<!-- Feature Detection -->
<script>
  if ('geolocation' in navigator) {
    // Use geolocation
  } else {
    // Fallback
  }
</script>

<!-- Picture Element -->
<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg">
  <img src="image.jpg" alt="Responsive image">
</picture>

<!-- Responsive Images -->
<img src="small.jpg"
     srcset="small.jpg 300w,
             medium.jpg 600w,
             large.jpg 900w"
     sizes="(max-width: 600px) 300px,
            (max-width: 900px) 600px,
            900px"
     alt="Responsive image">

HTML5 - Interactive Developer Reference

Hover over code blocks to copy or run in live playground