HTML Cheat Sheet
Complete HTML5 reference with semantic elements, forms, media, tables, and accessibility attributes. Searchable and copyable.
Structure
| Tag / Attribute | Description | Example |
|---|---|---|
| Declares the document type as HTML5 | <!DOCTYPE html> | |
| Root element of an HTML page | <html lang="en"> | |
| Contains meta information about the document | <head>...</head> | |
| Contains the visible page content | <body>...</body> | |
| Sets the page title shown in browser tab | <title>My Page</title> | |
| Sets character encoding | <meta charset="UTF-8"> | |
| Controls responsive viewport | <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| Links an external CSS file | <link rel="stylesheet" href="style.css"> | |
| Embeds or links JavaScript | <script src="app.js"></script> | |
| Embeds internal CSS styles | <style>body { margin: 0; }</style> |
Semantic
| Tag / Attribute | Description | Example |
|---|---|---|
| Introductory content or navigation links | <header>...</header> | |
| Navigation links section | <nav><a href='/'>Home</a></nav> | |
| Main content of the document (one per page) | <main>...</main> | |
| Self-contained content (blog post, news) | <article>...</article> | |
| Thematic grouping of content | <section>...</section> | |
| Sidebar or tangentially related content | <aside>...</aside> | |
| Footer for the document or section | <footer>© 2026</footer> | |
| Self-contained media with optional caption | <figure><img src='...'><figcaption>...</figcaption></figure> | |
| Caption for a <figure> | <figcaption>Photo by...</figcaption> | |
| Collapsible disclosure widget | <details><summary>More</summary>...</details> | |
| Visible heading for <details> | <summary>Click to expand</summary> | |
| Highlighted/marked text | <mark>important</mark> | |
| Machine-readable date/time | <time datetime="2026-03-12">March 12</time> |
Text
| Tag / Attribute | Description | Example |
|---|---|---|
| Heading levels 1 through 6 | <h1>Main Title</h1> | |
| Paragraph of text | <p>Hello world</p> | |
| Hyperlink to another page or resource | <a href="https://example.com">Link</a> | |
| Strong importance (bold by default) | <strong>Important</strong> | |
| Emphasis (italic by default) | <em>emphasized</em> | |
| Line break | Line 1<br>Line 2 | |
| Horizontal rule / thematic break | <hr> | |
| Block-level quotation | <blockquote>To be or not to be</blockquote> | |
| Inline code snippet | <code>console.log()</code> | |
| Preformatted text (preserves whitespace) | <pre> indented text</pre> | |
| Inline container for styling | <span class="red">text</span> | |
| Block-level container for grouping | <div class="wrapper">...</div> | |
| Abbreviation with tooltip | <abbr title="HyperText Markup Language">HTML</abbr> | |
| Subscript / superscript text | H<sub>2</sub>O, x<sup>2</sup> |
Lists
| Tag / Attribute | Description | Example |
|---|---|---|
| Unordered (bulleted) list | <ul><li>Item</li></ul> | |
| Ordered (numbered) list | <ol><li>First</li></ol> | |
| List item | <li>Item text</li> | |
| Description list | <dl><dt>Term</dt><dd>Definition</dd></dl> | |
| Description term | <dt>HTML</dt> | |
| Description detail | <dd>A markup language</dd> |
Forms
| Tag / Attribute | Description | Example |
|---|---|---|
| Interactive form container | <form action="/submit" method="POST"> | |
| Single-line text input | <input type="text" name="name"> | |
| Email input with validation | <input type="email" required> | |
| Password input (masked) | <input type="password"> | |
| Checkbox input | <input type="checkbox" id="agree"> | |
| Radio button input | <input type="radio" name="color" value="red"> | |
| File upload input | <input type="file" accept="image/*"> | |
| Slider input | <input type="range" min="0" max="100"> | |
| Date picker input | <input type="date"> | |
| Numeric input with spinners | <input type="number" min="1" max="10"> | |
| Multi-line text input | <textarea rows="4"></textarea> | |
| Dropdown select menu | <select><option>A</option></select> | |
| Option within a select | <option value="1">One</option> | |
| Label for a form element | <label for="name">Name:</label> | |
| Clickable button | <button type="submit">Send</button> | |
| Groups related form elements | <fieldset><legend>Info</legend>...</fieldset> |
Media
| Tag / Attribute | Description | Example |
|---|---|---|
| Embeds an image | <img src="photo.jpg" alt="A photo"> | |
| Embeds a video player | <video src="clip.mp4" controls></video> | |
| Embeds an audio player | <audio src="song.mp3" controls></audio> | |
| Specifies media source for video/audio | <source src="clip.webm" type="video/webm"> | |
| Responsive image container | <picture><source media='(min-width:800px)' srcset='lg.jpg'><img src='sm.jpg'></picture> | |
| Drawing surface for JavaScript graphics | <canvas id="myCanvas" width="400" height="300"></canvas> | |
| Scalable Vector Graphics container | <svg width="100" height="100">...</svg> | |
| Embeds another HTML page | <iframe src="https://example.com"></iframe> |
Table
| Tag / Attribute | Description | Example |
|---|---|---|
| Table container | <table>...</table> | |
| Table header group | <thead><tr><th>Name</th></tr></thead> | |
| Table body group | <tbody><tr><td>Data</td></tr></tbody> | |
| Table footer group | <tfoot><tr><td>Total</td></tr></tfoot> | |
| Table row | <tr>...</tr> | |
| Table header cell | <th>Column Name</th> | |
| Table data cell | <td>Cell value</td> | |
| Merge cells across columns/rows | <td colspan="2">Wide cell</td> |
Attributes
| Tag / Attribute | Description | Example |
|---|---|---|
| Unique identifier for an element | <div id="main"> | |
| CSS class name(s) | <p class="intro bold"> | |
| Inline CSS styles | <p style="color:red"> | |
| Custom data attributes | <div data-user-id="42"> | |
| Accessibility attributes | <button aria-label="Close"> | |
| ARIA role for accessibility | <div role="alert"> | |
| Controls tab order | <div tabindex="0"> | |
| Hides element from display | <p hidden>Secret</p> | |
| Makes element editable by user | <div contenteditable="true"> | |
| Makes element draggable | <img draggable="true"> |
Frequently asked questions
What is the difference between <div> and <section>?
<div> is a generic container with no semantic meaning - use it purely for styling/layout. <section> represents a thematic grouping of content and should typically include a heading. Use <section> when the content has a clear topic; use <div> when you just need a wrapper.
When should I use <strong> vs <b>?
<strong> indicates strong importance - screen readers may emphasize it. <b> just makes text bold visually without semantic meaning. In most cases, prefer <strong> for meaningful emphasis and <b> for purely visual bolding (like a product name in a listing).
What's the difference between id and class?
An id must be unique on the page - only one element can have a given id. A class can be reused on multiple elements. Use id for JavaScript targeting and anchor links; use class for CSS styling and shared behavior.
Do I still need to close all HTML tags?
In HTML5, void elements like <br>, <img>, <input>, <hr>, and <meta> don't need closing tags. All other elements should be properly closed. Self-closing syntax like <br /> is optional in HTML5 but required in XHTML.
How do I make a page accessible?
Use semantic HTML elements, add alt text to images, ensure proper heading hierarchy, use ARIA attributes when needed, ensure sufficient color contrast, make all interactive elements keyboard-accessible, and use <label> elements for form inputs.
What meta tags are essential for SEO?
The most important are: <title> (page title), <meta name="description"> (page description for search results), <meta name="viewport"> (mobile responsiveness), <meta charset="UTF-8"> (character encoding), and Open Graph tags for social sharing.
Go from reference to real skills
Cheat sheets are great for quick lookups. Our in-depth courses take you from the fundamentals to professional-level mastery.
Browse all courses