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>© 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