HTML Cheat Sheet
Quick reference for HTML5 tags, attributes, and semantic elements. Document structure, forms, tables, media, and meta tags — all in one page.
Document Structure
| <!DOCTYPE html> | HTML5 document type declaration |
| <html lang="en"> | Root element with language |
| <head> | Metadata container (title, meta, links, scripts) |
| <body> | Visible page content |
| <meta charset="UTF-8"> | Character encoding (always include) |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | Responsive viewport |
| <title>Page Title</title> | Browser tab title (SEO critical) |
| <link rel="stylesheet" href="style.css"> | Link external CSS |
| <script src="app.js" defer></script> | Link JavaScript (defer = after parsing) |
Semantic Elements
| <header> | Page or section header |
| <nav> | Navigation links |
| <main> | Main content (one per page) |
| <article> | Self-contained content (blog post, card) |
| <section> | Thematic grouping of content |
| <aside> | Sidebar or tangential content |
| <footer> | Page or section footer |
| <figure> + <figcaption> | Image/diagram with caption |
| <details> + <summary> | Expandable/collapsible content |
| <time datetime="2026-03-06"> | Machine-readable date/time |
Text & Inline
| <h1> to <h6> | Headings (h1 = most important, one per page) |
| <p> | Paragraph |
| <a href="url"> | Hyperlink (target="_blank" for new tab) |
| <strong> / <b> | Bold text (strong = semantic importance) |
| <em> / <i> | Italic text (em = emphasis) |
| <code> | Inline code |
| <pre> | Preformatted text (preserves whitespace) |
| <br> | Line break |
| <hr> | Horizontal rule / thematic break |
| <span> | Generic inline container (for styling) |
| <mark> | Highlighted/marked text |
Lists & Tables
| <ul> + <li> | Unordered (bulleted) list |
| <ol> + <li> | Ordered (numbered) list |
| <dl> + <dt> + <dd> | Definition list (term + description) |
| <table> | Table container |
| <thead> + <tbody> + <tfoot> | Table sections |
| <tr> | Table row |
| <th> | Table header cell |
| <td> | Table data cell |
| <td colspan="2"> | Cell spanning 2 columns |
| <td rowspan="3"> | Cell spanning 3 rows |
Forms & Input
| <form action="/submit" method="POST"> | Form container |
| <input type="text"> | Text input field |
| <input type="email"> | Email input (with validation) |
| <input type="password"> | Password field (masked) |
| <input type="number" min="0" max="100"> | Number input with range |
| <input type="checkbox"> | Checkbox |
| <input type="radio" name="group"> | Radio button (grouped by name) |
| <input type="file" accept=".jpg,.png"> | File upload |
| <textarea rows="4"> | Multi-line text input |
| <select> + <option> | Dropdown select |
| <button type="submit"> | Submit button |
| <label for="id"> | Label linked to input (accessibility) |
| required / disabled / readonly | Common input attributes |
Media & Embedding
| <img src="photo.jpg" alt="Description"> | Image (alt is required for a11y) |
| <img loading="lazy"> | Lazy-load image (below the fold) |
| <picture> + <source> | Responsive images (different sources) |
| <video src="clip.mp4" controls> | Video player |
| <audio src="song.mp3" controls> | Audio player |
| <iframe src="url"> | Embed external page |
| <canvas> | Drawing surface for JavaScript |
| <svg> | Scalable vector graphics inline |
Try It Live
Test these patterns with our free HTML Preview. No signup needed.
Open HTML Preview →
Step-by-Step Guide
Read Guide →