HTML Quick Reference — All Essential Tags
Compact printable reference for every HTML tag you use daily.
Document Structure
| Tag | Description | Example |
|---|---|---|
<!DOCTYPE html> | Declares HTML5 | <!DOCTYPE html> |
<html> | Root element | <html lang="en"> |
<head> | Metadata container | <head>...</head> |
<meta charset="utf-8"> | Character encoding | <meta charset="utf-8"> |
<meta name="viewport"> | Responsive scaling | <meta name="viewport" content="width=device-width, initial-scale=1"> |
<title> | Browser tab title | <title>My Page</title> |
<body> | Visible content | <body>...</body> |
Text Tags
| Tag | Description | Example |
|---|---|---|
<h1>…<h6> | Headings (largest to smallest) | <h1>Main Heading</h1> |
<p> | Paragraph | <p>A block of text.</p> |
<br> | Line break (self-closing) | <br> |
<hr> | Thematic break / horizontal rule | <hr> |
<pre> | Preformatted text (preserves whitespace) | <pre> code </pre> |
<blockquote> | Block-level quotation | <blockquote>Cited text.</blockquote> |
Formatting
| Tag | Description | Example |
|---|---|---|
<strong> | Strong importance (bold) | <strong>Important</strong> |
<em> | Emphasised (italic) | <em>Emphasis</em> |
<b> | Bold (presentational) | <b>Bold</b> |
<i> | Italic (presentational) | <i>Technical term</i> |
<u> | Underlined | <u>Underlined</u> |
<s> | Strikethrough | <s>Deprecated</s> |
<mark> | Highlighted text | <mark>Highlight</mark> |
<small> | Side-comment / fine print | <small>Copyright 2025</small> |
<sub> | Subscript | H<sub>2</sub>O |
<sup> | Superscript | E=mc<sup>2</sup> |
Links & Images
| Tag | Description | Example |
|---|---|---|
<a> | Hyperlink | <a href="https://example.com">Visit</a> |
<img> | Image (self-closing) | <img src="photo.jpg" alt="Description"> |
<figure> | Self-contained media container | <figure>...</figure> |
<figcaption> | Caption for figure | <figcaption>A caption</figcaption> |
<picture> | Responsive image switcher | <picture><source ...><img ...></picture> |
<source> | Media source for picture/video/audio | <source src="img.webp" type="image/webp"> |
<a> Attributes
| Attribute | Description |
|---|---|
href | Link destination URL |
target="_blank" | Opens in new tab |
rel="noopener" | Security for external links |
download | Forces file download |
<img> Attributes
| Attribute | Description |
|---|---|
src | Image path (required) |
alt | Alternative text (required for accessibility) |
width / height | Intrinsic dimensions |
loading="lazy" | Lazy-load offscreen images |
Lists
| Tag | Description | Example |
|---|---|---|
<ul> | Unordered (bulleted) list | <ul><li>Item</li></ul> |
<ol> | Ordered (numbered) list | <ol><li>First</li></ol> |
<li> | List item | <li>Content</li> |
<dl> | Description list | <dl>...</dl> |
<dt> | Term in description list | <dt>HTML</dt> |
<dd> | Definition / description | <dd>HyperText Markup Language</dd> |
Tables
| Tag | Description |
|---|---|
<table> | Table container |
<caption> | Table title |
<thead> | Header section |
<tbody> | Body section |
<tfoot> | Footer section |
<tr> | Table row |
<th> | Header cell |
<td> | Data cell |
Key Attributes
| Attribute | Used On | Description |
|---|---|---|
colspan="2" | <th> / <td> | Merge columns |
rowspan="3" | <th> / <td> | Merge rows |
scope="col" | <th> | Defines header direction |
Example
<table>
<caption>Students</caption>
<thead>
<tr><th>Name</th><th>Grade</th></tr>
</thead>
<tbody>
<tr><td>Alice</td><td>A</td></tr>
<tr><td>Bob</td><td colspan="2">B</td></tr>
</tbody>
</table>
Forms
| Tag | Description |
|---|---|
<form> | Form container |
<input> | User input field |
<label> | Input label |
<textarea> | Multi-line text input |
<select> | Dropdown list |
<option> | Dropdown option |
<button> | Clickable button |
<fieldset> | Groups related fields |
<legend> | Caption for fieldset |
Common Input Types
type | Use Case |
|---|---|
text | Single-line text |
password | Masked text |
email | Email (validates format) |
number | Numeric with spinner |
tel | Phone number |
url | Web address |
date / time / datetime-local | Date / time pickers |
color | Colour picker |
range | Slider |
file | File upload |
checkbox | Multiple choice |
radio | Single choice |
hidden | Submits data invisibly |
submit / reset / button | Action buttons |
Example
<form action="/submit" method="post">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<button type="submit">Submit</button>
</form>
Semantic HTML5
| Tag | Description |
|---|---|
<header> | Introductory content / site header |
<nav> | Navigation links |
<main> | Primary page content (one per page) |
<article> | Self-contained composition |
<section> | Thematic grouping of content |
<aside> | Tangentially related content (sidebar) |
<footer> | Footer / closing content |
<header>
<nav><!-- Nav links --></nav>
</header>
<main>
<article>
<section><!-- Content --></section>
</article>
<aside><!-- Sidebar --></aside>
</main>
<footer><!-- Footer --></footer>
Media
| Tag | Description |
|---|---|
<audio> | Sound / music player |
<video> | Video player |
<source> | Multiple media sources |
<iframe> | Inline frame (embed another page) |
<canvas> | JavaScript drawing surface |
<svg> | Inline vector graphics |
Audio / Video Attributes
| Attribute | Description |
|---|---|
controls | Show play/pause UI |
autoplay | Start playing automatically |
loop | Repeat playback |
muted | Start muted |
poster | Thumbnail image (video only) |
Example
<video controls width="480">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
Your browser does not support video.
</video>
Meta & SEO
| Tag / Attribute | Description | Example |
|---|---|---|
<title> | SEO title | <title>My Page</title> |
<meta name="description"> | Page description for SERPs | <meta name="description" content="About..."> |
<meta property="og:title"> | Open Graph title | <meta property="og:title" content="My Page"> |
<meta property="og:description"> | OG description | <meta property="og:description" content="About..."> |
<meta property="og:image"> | OG share image | <meta property="og:image" content="thumb.jpg"> |
<meta name="twitter:card"> | Twitter card type | <meta name="twitter:card" content="summary_large_image"> |
<link rel="canonical"> | Canonical URL | <link rel="canonical" href="https://example.com/page/"> |
<meta name="robots"> | Crawler directives | <meta name="robots" content="index, follow"> |
Global Attributes
| Attribute | Description | Example |
|---|---|---|
class | CSS class selector | <p class="highlight"> |
id | Unique identifier | <div id="header"> |
style | Inline CSS | <p style="color:red"> |
title | Tooltip text | <abbr title="HyperText">HTML</abbr> |
lang | Language | <html lang="en"> |
dir | Text direction (ltr / rtl) | <p dir="rtl">سلام</p> |
data-* | Custom data attribute | <div data-user-id="42"> |
hidden | Hides element | <p hidden>Invisible</p> |
tabindex | Tab order | <button tabindex="1"> |
aria-* | Accessibility attributes | <button aria-label="Close">X</button> |
HTML Entities
| Entity | Character | Description |
|---|---|---|
& | & | Ampersand |
< | < | Less than |
> | > | Greater than |
" | " | Double quote |
' | ' | Single quote |
| (space) | Non-breaking space |
© | © | Copyright |
® | ® | Registered trademark |