HTML Cheatsheet
A single-page quick reference for the HTML you'll reach for daily— document structure, text, lists, links, images, tables, forms, semantic elements, meta tags, and global attributes. Bookmark this page.
Document Structure
Element | Purpose |
|---|---|
<!DOCTYPE html> | Declares the document as HTML5, triggers standards mode |
<html lang="en"> | Root element; lang is required for accessibility/SEO |
<head> | Metadata container: title, meta tags, links, scripts |
<body> | All visible page content |
<title> | Page title, shown in the browser tab and search results |
<meta> | Character set, viewport, description, and other metadata |
<link> | Links external resources — stylesheets, icons, preloads |
<script> | Embeds or references JavaScript |
<style> | Embeds CSS directly in the document |
<base> | Sets a base URL for all relative URLs on the page |
Text Elements
Element | Purpose |
|---|---|
<h1> – <h6> | Section headings, in strict hierarchical order |
<p> | A paragraph of text |
<br> | A single line break within text (void element) |
<hr> | A thematic break between content sections (void element) |
<strong> | Strong importance (bold, semantic) |
<em> | Stress emphasis (italic, semantic) |
<b> | Bold text with no extra importance (stylistic) |
<i> | Italic text with no extra emphasis (stylistic) |
<mark> | Highlighted/relevant text |
<small> | Side comments, fine print |
<sub> / <sup> | Subscript / superscript text |
<blockquote> | A long, block-level quotation |
<q> | A short, inline quotation |
<cite> | The title of a referenced creative work |
<abbr> | An abbreviation; title attribute holds the full form |
<code> | A short inline code fragment |
<pre> | Preformatted text; preserves whitespace and line breaks |
<kbd> | Keyboard input |
<samp> | Sample program output |
<var> | A variable in a math or code expression |
<span> | Generic inline container with no semantic meaning |
List Elements
Element | Purpose |
|---|---|
<ul> | Unordered (bulleted) list |
<ol> | Ordered (numbered) list |
<li> | A list item, inside <ul> or <ol> |
<dl> | Description list |
<dt> | A term inside a description list |
<dd> | A term's description inside a description list |
Link & Image Elements
Element / Attribute | Purpose |
|---|---|
<a href="..."> | A hyperlink to another page, resource, or anchor |
target="_blank" | Opens the link in a new tab |
rel="noopener noreferrer" | Security hardening for target="_blank" links |
download | Forces the browser to download the link's target |
<img src="..." alt="..."> | Embeds an image; alt is required |
loading="lazy" | Defers loading an image/iframe until near viewport |
<picture> | Wraps multiple <source> elements for art direction |
<figure> / <figcaption> | Self-contained media with an optional caption |
srcset / sizes | Serves different image resolutions per viewport |
Table Elements
Element | Purpose |
|---|---|
<table> | The table container |
<caption> | The table's title/description |
<thead> / <tbody> / <tfoot> | Groups header, body, and footer rows |
<tr> | A table row |
<th scope="col|row"> | A header cell; scope clarifies its association |
<td> | A standard data cell |
colspan / rowspan | Merges a cell across multiple columns/rows |
<colgroup> / <col> | Applies styling to whole table columns |
Form Elements & Input Types
Element | Purpose |
|---|---|
<form> | Groups form controls; action/method define submission |
<label for="id"> | Associates descriptive text with a control |
<input> | A single-line form control; type attribute selects variant |
<textarea> | A multi-line text input |
<select> / <option> | A dropdown control and its options |
<optgroup> | Groups related <option> elements with a label |
<datalist> | Autocomplete suggestions for a text input |
<button> | A clickable control; type="submit|reset|button" |
<fieldset> / <legend> | Groups related controls with a caption |
<output> | Displays the result of a calculation |
<progress> | Shows completion progress of a task |
<meter> | Shows a scalar value within a known range |
input type | Purpose |
|---|---|
text | Generic single-line text |
password | Obscured text entry |
Email address, with basic built-in validation | |
url | URL, with basic built-in validation |
tel | Telephone number (no built-in format validation) |
search | A search field, styled distinctly by some browsers |
number | Numeric input with optional min/max/step |
range | A slider control between min and max |
date / time / datetime-local | Native date/time pickers |
month / week | Native month or ISO week pickers |
color | A native color picker |
file | File upload control |
checkbox | A single toggle, or a multi-select group |
radio | One choice from a mutually exclusive group |
hidden | A value submitted but never shown to the user |
submit / reset / button | Form-control button variants |
Semantic HTML5 Elements
Element | Purpose |
|---|---|
<header> | Introductory content or navigation for its nearest section |
<nav> | A block of navigation links |
<main> | The unique, primary content of the document (one per page) |
<section> | A thematic grouping of content, usually with a heading |
<article> | Self-contained content that could stand alone (a post, a card) |
<aside> | Content tangentially related to the surrounding content |
<footer> | Footer content for its nearest sectioning element |
<details> / <summary> | A native, togglable disclosure widget |
<dialog> | A native modal or non-modal dialog box |
<time datetime="..."> | A machine-readable date/time |
<address> | Contact information for the nearest article/page |
<figure> / <figcaption> | Self-contained media with a caption |
Common Meta Tags
Tag | Purpose |
|---|---|
<meta charset="UTF-8"> | Declares the character encoding |
<meta name="viewport" content="width=device-width, initial-scale=1"> | Enables responsive scaling on mobile devices |
<meta name="description" content="..."> | Summary shown in search results |
<meta name="robots" content="index, follow"> | Controls search-engine crawling/indexing |
<meta property="og:title" content="..."> | Open Graph title for social sharing previews |
<meta property="og:image" content="..."> | Open Graph preview image |
<meta name="twitter:card" content="summary_large_image"> | Twitter/X card layout |
<link rel="canonical" href="..."> | Declares the canonical URL for duplicate content |
<link rel="icon" href="..."> | The page's favicon |
Global Attributes
Attribute | Purpose |
|---|---|
id | A unique identifier for the element |
class | One or more CSS class names for styling/selection |
style | Inline CSS declarations |
title | Advisory tooltip text |
lang | The language of the element's content |
dir | Text direction: ltr, rtl, or auto |
tabindex | Controls keyboard focus order |
hidden | Removes the element from rendering and the accessibility tree |
data-* | Custom data attributes for scripting |
contenteditable | Makes the element directly editable by the user |
draggable | Enables the HTML Drag and Drop API on the element |
aria-* | ARIA states and properties for accessibility |
role | Overrides or clarifies an element's accessibility role |