HTML5 Cheat Sheet
Complete reference guide for HTML5 with interactive examples and live playground links
Click on any section to jump directly to it
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