Why You Need an HTML5 Cheat Sheet
Every web developer needs quick access to HTML5 syntax. Whether you're building a marketing site with Next.js or crafting a complex web application, having a reliable HTML5 reference at your fingertips accelerates development and reduces errors.
This comprehensive cheat sheet covers everything from basic document structure to advanced HTML5 features, organized for rapid lookup. Bookmark this page and return whenever you need to quickly reference HTML5 syntax.
What You'll Learn
- Document structure and DOCTYPE declarations
- Semantic HTML5 elements for better code organization
- Text formatting, links, and images
- Lists, tables, and data presentation
- Forms with HTML5 input types and validation
- Media elements (audio, video)
- Meta tags for SEO and responsiveness
- Performance and accessibility best practices
Comprehensive HTML5 reference organized by category
Document Structure
DOCTYPE, head, body, and semantic structure elements
Semantic Elements
header, nav, main, footer, article, section, aside
Text Formatting
Headings, paragraphs, inline styles, and special characters
Links & Images
Anchors, image optimization, responsive images, and iframes
Lists & Tables
Ordered, unordered, definition lists, and data tables
Forms & Inputs
All input types, validation, and form attributes
Media Elements
Native video, audio, and source elements
Meta Tags
SEO, Open Graph, and responsive viewport settings
Document Structure and DOCTYPE
The foundation of any HTML document starts with proper declaration. HTML5 introduced a simplified DOCTYPE declaration that replaced the complex SGML declarations of previous versions.
HTML5 Document Skeleton
Every HTML5 document follows a consistent structure. The <!DOCTYPE html> declaration tells browsers to render the page in standards mode, eliminating quirks mode behaviors. The document includes a root <html> element with lang attribute for accessibility, a <head> section for metadata, and a <body> for content, as documented in the QuickRef HTML Cheat Sheet.
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta http-equiv="X-UA-Compatible" content="IE=edge">6 <meta name="viewport" content="width=device-width, initial-scale=1.0">7 <title>HTML5 Boilerplate</title>8</head>9<body>10 <h1>Hello world</h1>11</body>12</html>The <meta charset="UTF-8"> declaration ensures proper character encoding for international characters. The viewport meta tag enables responsive design on mobile devices, while the X-UA-Compatible tag ensures Internet Explorer uses the latest rendering engine.
Comments and Document Sections
Comments allow developers to add notes within HTML without affecting rendered output.
Semantic HTML5 Elements
HTML5 introduced semantic elements that clearly describe their meaning to both browsers and developers. These elements improve accessibility, SEO, and code organization, as comprehensive guides like WPKube's Ultimate HTML5 Cheat Sheet document.
Document Structure Elements
The <header> element represents introductory content or a group of navigational aids. It typically contains headings, logos, and navigation menus. The <nav> element identifies a section with navigation links, such as primary site navigation or table of contents.
The <main> element wraps the primary content of the document, excluding headers, footers, and navigation that appears on every page. There should be only one <main> element per page, and it should not be nested inside <article>, <aside>, <nav>, or <section> elements.
The <footer> element represents a footer for its nearest sectioning content or sectioning root element.
1<body>2 <header>3 <nav>...</nav>4 </header>5 <main>6 <h1>Page Title</h1>7 </main>8 <footer>9 <p>©2025 Your Company</p>10 </footer>11</body>| Element | Purpose |
|---|---|
| <header> | Masthead or important information |
| <nav> | Section of navigation links |
| <main> | Main content of the document |
| <footer> | Footer or least important content |
| <article> | Independent, self-contained content |
| <section> | Group of related content |
| <aside> | Secondary content |
| <figure> | Self-contained content (images, diagrams) |
| <figcaption> | Caption for figure |
| <time> | A time or date |
| <progress> | Completion progress of a task |
| <meter> | Scalar measurement within a range |
| <mark> | Text highlighted for reference |
| <details> | Additional information (collapsible) |
| <summary> | Visible heading for details element |
| <dialog> | Dialog box or sub-window |
Text Formatting and Headings
HTML provides various elements for formatting text, from basic styling to semantic meaning. Understanding when to use each element affects both accessibility and SEO. Proper heading hierarchy is essential for search engine optimization and helps screen readers navigate your content effectively.
Heading Elements
Headings establish document structure and hierarchy. Search engines use headings to understand content organization. There should be only one <h1> per page, representing the main topic, with subsequent headings following a logical hierarchy without skipping levels.
1<h1>This is Heading 1</h1>2<h2>This is Heading 2</h2>3<h3>This is Heading 3</h3>4<h4>This is Heading 4</h4>5<h5>This is Heading 5</h5>6<h6>This is Heading 6</h6>Text Formatting Elements
HTML provides inline elements for styling text without breaking flow. Some elements carry semantic meaning beyond presentation.
| Element | Description | Semantic |
|---|---|---|
<b> | Bold Text | No - stylistic only |
<strong> | Important text | Yes - strong emphasis |
<i> | Italic Text | No - stylistic only |
<em> | Emphasized text | Yes - emphasis |
<u> | Underline Text | No - presentational |
<mark> | Highlighted text | Yes - HTML5 |
<del> | Deleted text | Yes - strikethrough |
<ins> | Inserted text | Yes - underlined |
<sup> | Superscript | No |
<sub> | Subscript | No |
<small> | Smaller text | No |
<kbd> | Keyboard input | Yes |
<pre> | Pre-formatted | No |
<code> | Source code | Yes |
Links and Images
Hyperlinks and images form the core of web content, enabling navigation and visual communication. When building responsive websites, proper link and image markup is essential for both user experience and SEO performance.
Anchor Elements
The <a> (anchor) element creates hyperlinks to other pages, files, email addresses, phone numbers, or locations on the same page.
1<!-- External link -->2<a href="https://example.com">Visit Example</a>3 4<!-- Email link -->5<a href="mailto:[email protected]">Email Us</a>6 7<!-- Phone link -->8<a href="tel:+1234567890">Call Us</a>9 10<!-- Open in new tab (secure) -->11<a href="https://example.com" target="_blank" rel="noopener noreferrer">12 New Tab13</a>Image Elements
The <img> element embeds images into documents. Modern best practices emphasize proper attributes for performance and accessibility.
Key attributes:
src- Required, image locationalt- Required for accessibilitywidthandheight- Prevent layout shift (CLS)loading-eagerorlazyfor performance
For optimal image performance, consider using our AI-powered image optimization services that automatically compress and convert images to modern formats.
1<img loading="lazy"2 src="image.jpg"3 alt="Describe image here"4 width="400"5 height="400">HTML Lists
Lists organize content into structured groups, essential for navigation menus, product features, and step-by-step instructions.
List Types
| Type | Element | Description |
|---|---|---|
| Unordered | <ul> | Bullet points |
| Ordered | <ol> | Numbered sequence |
| Definition | <dl> | Terms with descriptions |
1<!-- Unordered List -->2<ul>3 <li>First item</li>4 <li>Second item</li>5</ul>6 7<!-- Ordered List -->8<ol>9 <li>First step</li>10 <li>Second step</li>11</ol>12 13<!-- Definition List -->14<dl>15 <dt>HTML</dt>16 <dd>HyperText Markup Language</dd>17 <dt>CSS</dt>18 <dd>Cascading Style Sheets</dd>19</dl>HTML Tables
Tables present tabular data in rows and columns. HTML5 provides semantic elements for table structure.
Table Elements Reference
| Element | Description |
|---|---|
<table> | Defines a table |
<thead> | Groups header content |
<tbody> | Groups body content |
<tfoot> | Groups footer content |
<tr> | Table row |
<th> | Header cell |
<td> | Data cell |
<caption> | Table caption |
1<table>2 <thead>3 <tr>4 <th>Name</th>5 <th>Age</th>6 </tr>7 </thead>8 <tbody>9 <tr>10 <td>Alice</td>11 <td>30</td>12 </tr>13 <tr>14 <td>Bob</td>15 <td>25</td>16 </tr>17 </tbody>18 <tfoot>19 <tr>20 <td colspan="2">2 entries</td>21 </tr>22 </tfoot>23</table>HTML Forms
Forms collect user input for processing. HTML5 added numerous input types and attributes that improve user experience and reduce validation needs. For building effective web applications, understanding form elements is essential.
HTML5 Input Types
| Type | Purpose |
|---|---|
email | Email address |
url | URL input |
tel | Telephone number |
number | Numeric input |
range | Slider control |
date | Date picker |
time | Time picker |
datetime-local | Date and time (no timezone) |
month | Month and year |
week | Week and year |
color | Color picker |
search | Search field |
1<form method="POST" action="/api/submit">2 <label for="email">Email:</label>3 <input type="email" id="email" name="email" required>4 5 <label for="password">Password:</label>6 <input type="password" id="password" name="password"7 minlength="8" required>8 9 <input type="submit" value="Submit">10</form>| Attribute | Description |
|---|---|
| value | Default value |
| placeholder | Hint text |
| required | Mandatory field |
| disabled | Disable interaction |
| readonly | Prevent modification |
| min | Minimum value |
| max | Maximum value |
| minlength | Minimum characters |
| maxlength | Maximum characters |
| pattern | Regex validation |
| autofocus | Focus on load |
| autocomplete | Auto-complete setting |
| step | Increment value |
Media Elements
HTML5 introduced native support for audio and video without requiring plugins. This advancement, documented in resources like the MDN Web Docs HTML Cheatsheet, revolutionized how we embed multimedia content.
Video Element
The <video> element embeds video content with browser-native controls.
Video attributes:
controls- Show playback controlsautoplay- Start automaticallyloop- Repeat playbackmuted- Mute audioposter- Thumbnail imagepreload- Buffering strategy
1<video controls width="100%" poster="thumbnail.jpg">2 <source src="video.mp4" type="video/mp4">3 <source src="video.webm" type="video/webm">4 Your browser doesn't support the video tag.5</video>Audio Element
The <audio> element embeds sound content.
1<audio controls>2 <source src="audio.mp3" type="audio/mpeg">3 <source src="audio.ogg" type="audio/ogg">4 Your browser doesn't support the audio element.5</audio>Meta Tags for SEO and Responsiveness
Meta tags provide information about the document for browsers, search engines, and social platforms. Proper meta tag implementation is a core component of our SEO services.
Essential Meta Tags
<!-- Character encoding -->
<meta charset="UTF-8">
<!-- Viewport for responsive design -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Description for search engines -->
<meta name="description" content="Brief description (150-160 chars)">
<!-- Canonical URL -->
<link rel="canonical" href="https://example.com/page">
Open Graph Meta Tags
<meta property="og:title" content="Page Title">
<meta property="og:description" content="Description">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:type" content="website">
HTML5 APIs and Advanced Features
HTML5 introduced powerful APIs that enable rich web applications. These capabilities form the foundation for modern JavaScript development and interactive user experiences.
Details and Summary
The <details> element creates an expandable widget.
Data Attributes
Custom data attributes store application data in HTML.
Dialog Element
The <dialog> element creates modal and non-modal dialogs.
1<!-- Expandable Details -->2<details>3 <summary>Click to expand</summary>4 <p>Hidden content that appears.</p>5</details>6 7<!-- Data Attributes -->8<div id="product" data-product-id="12345" data-price="29.99">9 Product Name10</div>11 12<!-- Modal Dialog -->13<dialog id="myDialog">14 <form method="dialog">15 <p>Dialog content</p>16 <button value="confirm">Confirm</button>17 </form>18</dialog>Performance Best Practices
Optimizing HTML improves page load times and Core Web Vitals. Fast-loading websites rank better in search results and provide superior user experiences.
Image Optimization
- Use
loading="lazy"for below-fold images - Specify
widthandheightto prevent layout shift - Use modern formats: WebP, AVIF
- Implement responsive images with
srcset
Script Optimization
- Place scripts at bottom or use
defer - Minimize inline JavaScript
- Use
asyncfor analytics
Font Optimization
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
<style>
font-display: swap;
</style>
Accessibility Considerations
Accessible HTML benefits all users and is required for many projects. Implementing accessibility best practices ensures your websites reach the widest possible audience.
ARIA Attributes
<!-- Landmarks -->
<nav aria-label="Primary navigation">
<main aria-label="Main content">
<!-- Form accessibility -->
<label for="email">Email</label>
<input type="email" id="email" aria-required="true">
Skip Links
Skip links enable keyboard users to bypass navigation and jump directly to main content.
| Category | Elements |
|---|---|
| Document Structure | header, nav, main, footer, article, section, aside, figure, figcaption |
| Text Semantics | time, mark, ruby, rt, rp, bdi, wbr |
| Media | video, audio, source, track |
| Interactive | details, summary, dialog |
| Form | datalist, output |
| Graphics | canvas |
| Attribute | Purpose |
|---|---|
| class | CSS class names |
| id | Unique identifier |
| data-* | Custom data storage |
| style | Inline CSS |
| title | Tooltip text |
| lang | Language code |
| dir | Text direction: ltr, rtl, auto |
| tabindex | Keyboard navigation order |
| contenteditable | Allow editing |
| draggable | Enable drag and drop |
| hidden | Hide element |
| spellcheck | Enable spell checking |
Frequently Asked Questions
Sources
- WPKube - The Ultimate HTML5 Cheat Sheet 2025 - Comprehensive tag reference with HTML4 comparison and browser support
- QuickRef.ME - HTML Cheat Sheet & Quick Reference - Categorized reference with code examples
- MDN Web Docs - HTML Cheatsheet - Official documentation reference
- Stanford HTML Cheat Sheet PDF - Academic PDF reference
- John December HTML5 Cheat Sheet PDF - PDF reference with title tags and meta descriptions
- Coursera - HTML Cheat Sheet and Quick Reference - Educational resource