HTML Tags Cheat Sheet
Free HTML tags cheat sheet: the HTML5 tags you will actually use, from document structure and text to tables, forms and semantic elements, with examples.
Document Structure
| Concept | Syntax | Example |
|---|---|---|
| DOCTYPE Must be the very first line. Tells the browser to use modern HTML5 rules. | <!DOCTYPE html> | <!DOCTYPE html> |
| Root element Wraps the entire document. Set lang for accessibility and SEO. | <html lang="en"> | <html lang="en"> |
| Head Holds metadata: title, links, meta tags. Not visible on the page. | <head> | <head><title>…</title></head> |
| Body Everything the user sees lives inside <body>. | <body> | <body>…</body> |
| Meta charset Always set UTF-8 — supports every language and emoji. | <meta charset="UTF-8"> | <meta charset="UTF-8"> |
| Viewport Required for responsive design on phones. | <meta name="viewport" content="width=device-width, initial-scale=1"> | <meta name="viewport" content="width=device-width, initial-scale=1"> |
| Link stylesheet Pulls in external CSS. | <link rel="stylesheet" href="styles.css"> | <link rel="stylesheet" href="main.css"> |
Learn it in a lesson: HTML Basics & Structure · CSS Basics & Selectors
Text Content
| Concept | Syntax | Example |
|---|---|---|
| Headings Use one <h1> per page; <h2>–<h6> for subsections in order. | <h1> to <h6> | <h1>Main Title</h1> |
| Paragraph Block of text. Default vertical margin built in. | <p> | <p>Some text.</p> |
| Bold (semantic) Conveys importance. Screen readers emphasise it. | <strong> | <strong>Important</strong> |
| Italic (semantic) Conveys stress emphasis (different from purely visual italic). | <em> | <em>Emphasis</em> |
| Inline span Inline container with no built-in meaning — use to style part of a line. | <span> | <span class="hl">tag</span> |
| Line break / rule <br> = soft line break; <hr> = horizontal divider. | <br> and <hr> | Line one<br>Line two |
| Inline code Renders text in monospace. Combine with <pre> for code blocks. | <code> | <code>npm install</code> |
Learn it in a lesson: HTML Basics & Structure · HTML Elements & Attributes
Links & Media
| Concept | Syntax | Example |
|---|---|---|
| Anchor link The web's most important tag. Add target="_blank" rel="noopener" for external. | <a href="url"> | <a href="/about">About</a> |
| Image alt is REQUIRED for accessibility. Width/height prevent layout shift. | <img src="" alt=""> | <img src="logo.png" alt="Logo" width="200"> |
| Responsive image Serve different images at different sizes. | <picture> | <picture><source srcset="big.webp" media="(min-width:800px)"><img src="sm.jpg"></picture> |
| Video controls shows play/pause/volume UI. | <video controls> | <video src="clip.mp4" controls></video> |
| Embed YouTube Use loading="lazy" for performance. | <iframe> | <iframe src="https://youtube.com/embed/ID" allowfullscreen></iframe> |
Learn it in a lesson: HTML Elements & Attributes · Responsive Images: srcset, sizes, picture, art direction
Lists & Tables
| Concept | Syntax | Example |
|---|---|---|
| Unordered list Bullet points. Use for any unordered collection. | <ul><li> | <ul><li>Item</li></ul> |
| Ordered list Numbered. start="5" begins at 5; reversed counts down. | <ol><li> | <ol><li>First</li></ol> |
| Description list Perfect for glossaries and key/value lists. | <dl><dt><dd> | <dl><dt>HTML</dt><dd>HyperText…</dd></dl> |
| Table basics Use ONLY for tabular data, never for layout. | <table><tr><th><td> | <table><tr><th>Name</th><td>Ada</td></tr></table> |
| Table sections Helps screen readers and styling. | <thead> <tbody> <tfoot> | <table><thead>…</thead><tbody>…</tbody></table> |
Learn it in a lesson: HTML Basics & Structure · Complex Tables: Styling, Responsiveness & Accessibility
Forms
| Concept | Syntax | Example |
|---|---|---|
| Form Container for inputs. method="GET" puts data in URL, POST in body. | <form action="" method=""> | <form action="/submit" method="POST"> |
| Label + input Match for + id. Critical for accessibility. | <label for="id">…</label><input id="id"> | <label for="em">Email</label><input id="em" type="email"> |
| Input types Modern types trigger the right mobile keyboard. | type="" | type="email" / "password" / "date" / "number" / "tel" |
| Textarea Multi-line text input. | <textarea> | <textarea rows="4" cols="30"></textarea> |
| Select dropdown Add multiple for multi-select. | <select><option> | <select><option>UK</option></select> |
| Submit button Defaults to submit inside a form — set type="button" otherwise. | <button type="submit"> | <button type="submit">Send</button> |
| Required + validation Built-in HTML5 validation — no JS needed. | required pattern minlength | <input required minlength="8"> |
Learn it in a lesson: HTML Elements & Attributes · Mastering Complex Forms & Validation Patterns
Semantic HTML5
| Concept | Syntax | Example |
|---|---|---|
| Header Introductory content at the top of a page or section. | <header> | <header>Site nav, logo…</header> |
| Navigation Wraps the main nav links — screen readers get a jump target. | <nav> | <nav><ul><li><a>Home</a></li></ul></nav> |
| Main The unique content of THIS page. Exactly one per page. | <main> | <main>Primary page content</main> |
| Article Self-contained content (a blog post, a card). | <article> | <article><h2>Post Title</h2>…</article> |
| Section A themed group of content. Should have a heading. | <section> | <section><h2>Heading</h2>…</section> |
| Aside Tangentially related content (sidebar, callout). | <aside> | <aside>Related links sidebar</aside> |
| Footer Closing content of a page or section. | <footer> | <footer>© 2026</footer> |
| Figure + caption Self-contained media with a label. | <figure><figcaption> | <figure><img …><figcaption>Diagram 1</figcaption></figure> |
Learn it in a lesson: Advanced HTML5 Semantic Architecture
Interactive & Modern
| Concept | Syntax | Example |
|---|---|---|
| Details / summary Native collapsible/expandable widget — no JS. | <details><summary> | <details><summary>Click me</summary>Hidden</details> |
| Dialog Native modal. Open with dialog.showModal(). | <dialog> | <dialog id="d" open>Modal!</dialog> |
| Progress bar Built-in progress indicator. | <progress max value> | <progress max="100" value="60"></progress> |
| Meter Scalar measurement (e.g. disk usage). | <meter min max value> | <meter min="0" max="100" value="72"></meter> |
| Time Machine-readable dates — Google reads these for rich results. | <time datetime=""> | <time datetime="2026-06-14">today</time> |
| Mark (highlight) Highlights text — like a yellow marker. | <mark> | Search results <mark>matched</mark> here |
Learn it in a lesson: Advanced HTML5 Semantic Architecture · Progressive Enhancement & Graceful Degradation · Building Accessible Modals, Dialogs & Overlays