Skip to main content

HTML Quick Reference — All Essential Tags

Compact printable reference for every HTML tag you use daily.


Document Structure

TagDescriptionExample
<!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

TagDescriptionExample
<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

TagDescriptionExample
<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>SubscriptH<sub>2</sub>O
<sup>SuperscriptE=mc<sup>2</sup>

TagDescriptionExample
<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

AttributeDescription
hrefLink destination URL
target="_blank"Opens in new tab
rel="noopener"Security for external links
downloadForces file download

<img> Attributes

AttributeDescription
srcImage path (required)
altAlternative text (required for accessibility)
width / heightIntrinsic dimensions
loading="lazy"Lazy-load offscreen images

Lists

TagDescriptionExample
<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

TagDescription
<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

AttributeUsed OnDescription
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

TagDescription
<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

typeUse Case
textSingle-line text
passwordMasked text
emailEmail (validates format)
numberNumeric with spinner
telPhone number
urlWeb address
date / time / datetime-localDate / time pickers
colorColour picker
rangeSlider
fileFile upload
checkboxMultiple choice
radioSingle choice
hiddenSubmits data invisibly
submit / reset / buttonAction 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>

@See Forms Cheatsheet →


Semantic HTML5

TagDescription
<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

TagDescription
<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

AttributeDescription
controlsShow play/pause UI
autoplayStart playing automatically
loopRepeat playback
mutedStart muted
posterThumbnail 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 / AttributeDescriptionExample
<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

AttributeDescriptionExample
classCSS class selector<p class="highlight">
idUnique identifier<div id="header">
styleInline CSS<p style="color:red">
titleTooltip text<abbr title="HyperText">HTML</abbr>
langLanguage<html lang="en">
dirText direction (ltr / rtl)<p dir="rtl">سلام</p>
data-*Custom data attribute<div data-user-id="42">
hiddenHides element<p hidden>Invisible</p>
tabindexTab order<button tabindex="1">
aria-*Accessibility attributes<button aria-label="Close">X</button>

HTML Entities

EntityCharacterDescription
&amp;&Ampersand
&lt;<Less than
&gt;>Greater than
&quot;"Double quote
&#39;'Single quote
&nbsp;(space)Non-breaking space
&copy;©Copyright
&reg;®Registered trademark