The Ultimate HTML Cheatsheet

Document

An overview of the top-level elements that form an HTML document.

Element	Description
`<!DOCTYPE html>`	Declares HTML5 document type.
`<html>`	Root element. Contains `<head>` and `<body>`.
`<head>`	Document metadata container.
`<title>`	Document title shown in browser UI.
`<base>`	Base URL for relative links.
`<meta>`	Metadata: charset, viewport, description, etc.
`<link>`	External resources (stylesheets, preconnect).
`<style>`	In page CSS.
`<script>`	JavaScript code or reference.
`<body>`	Document body; visible content.

Document metadata

The <head> section of an HTML document.

Element	Common attributes / notes
`<meta>`	`charset`, `name`, `content`, `http-equiv` (e.g., viewport)
`<link>`	`rel`, `href`, `crossorigin`, `integrity`, `media`
`<base>`	`href`, `target`
`<title>`	The main title of the document
`<noscript>`	Fallback content when scripting is disabled

Sectioning & headings

Element	Description
`<header>`	Intro or navigational aids for a page/section.
`<nav>`	Navigation links.
`<main>`	Main content of the document (unique).
`<section>`	Thematic grouping of content.
`<article>`	Independent, self-contained composition.
`<aside>`	Tangential content (sidebars, pull-quotes).
`<footer>`	Footer for a page or section.
`<h1>`–`<h6>`	Headings (semantic hierarchy).
`<address>`	Contact information/authoring contact.

Grouping content

Element	Description
`<p>`	Paragraph.
`<hr>`	Thematic break.
`<pre>`	Preformatted text (preserves whitespace).
`<blockquote>`	Section quoted from another source.
`<figure>`	Self-contained content, often with `<figcaption>`.
`<figcaption>`	Caption for a `<figure>`.
`<div>`	Generic container (non-semantic).
`<template>`	inert DOM for client-side templating.
`<slot>`	Web component insertion point.

Text-level semantics

Element	Description
`<a>`	Hyperlink. `href`, `target`, `rel`, `download`.
`<em>`	Emphasis (usually italic).
`<strong>`	Strong importance (usually bold).
`<small>`	Side comment, fine print.
`<cite>`	Reference to a creative work.
`<code>`	Inline code snippet.
`<var>`	Variable or placeholder.
`<samp>`	Sample output from a program.
`<kbd>`	User input (keyboard).
`<sub>`, `<sup>`	Subscript / superscript.
`<br>`	Line break.
`<wbr>`	Optional word break.
`<span>`	Generic inline container.
`<mark>`	Highlighted text.
`<abbr>`	Abbreviation, optionally `title` for expansion.
`<data>`	Machine-readable value (with `value` attribute).
`<time>`	Date/time, `datetime` attribute.

Embedded & media

Element	Description
`<img>`	Image. `src`, `alt`, `srcset`, `sizes`, `loading`.
`<picture>`	Responsive images with `<source>` children.
`<source>`	Source for `<picture>`, `<audio>`, or `<video>`.
`<figure>`	Figure with optional `<figcaption>`.
`<svg>`	Inline SVG (graphics).
`<canvas>`	Scripted drawing surface.
`<iframe>`	Inline browsing context. `src`, `sandbox`, `allow`.
`<video>`	Video player. `controls`, `autoplay`, `muted`, `playsinline`.
`<audio>`	Audio player. `controls`, `autoplay`, `loop`.
`<track>`	Subtitles/captions for media.
`<embed>`	External content (often PDF, plugins).
`<object>`	Embeds external resources; `<param>` children.
`<param>`	Parameters for `<object>`.
`<map>` / `<area>`	Image maps.

Lists & tables

Element	Description
`<ul>`	Unordered list.
`<ol>`	Ordered list.
`<li>`	List item.
`<dl>`	Description list.
`<dt>`	Term/name in a description list.
`<dd>`	Description of the term.
`<table>`	Table container.
`<caption>`	Table caption.
`<thead>`, `<tbody>`, `<tfoot>`	Table sections.
`<tr>`	Table row.
`<th>`	Table header cell.
`<td>`	Table data cell.

Forms & inputs

Element	Common attributes / notes
`<form>`	`action`, `method`, `enctype`, `novalidate`.
`<fieldset>`	Groups related controls; use `<legend>` for label.
`<legend>`	Caption for `<fieldset>`.
`<label>`	Labels a control; `for` attribute or wrapping.
`<input>`	Input filed for the form. Attributes and types see below.
`<button>`	`type` (`button`, `submit`, `reset`), `disabled`.
`<select>`	Dropdown. Use `<option>`, `<optgroup>`.
`<option>`	`value`, `selected`, `disabled`.
`<datalist>`	Autocomplete options for inputs.
`<textarea>`	`rows`, `cols`, `maxlength`, `placeholder`.
`<output>`	Result of a calculation.
`<progress>`	Progress bar with `value` and `max`.
`<meter>`	Scalar measurement within a known range.

Scripting & templating

Element	Notes
`<script>`	`src`, `type`, `async`, `defer`, `nomodule`, `integrity`, `crossorigin`.
`<noscript>`	Fallback when JS disabled.
`<template>`	Client-side templates (content inert until cloned).
`<slot>`	Web components content insertion point.

Interactive & ARIA

Element	Notes
`<details>`	Disclosure widget; contains `<summary>`.
`<summary>`	Summary/label for a `<details>` element.
`<dialog>`	Modal or non-modal dialog (use JS to control).
`<menu>`	Context or list of commands (use carefully).
`<a>`	With `href` becomes focusable/interactive; `download` to save.

Accessibility & ARIA notes:

Prefer semantic elements (buttons, links, headings) over generic <div>/<span>.
Use aria-* only when native semantics cannot be used; add role when necessary.
Add alt for images, label/aria-label for controls, and title sparingly.

Global attributes

Common attributes available on most HTML elements.

Attribute	Description
`id`	Unique element identifier.
`class`	Space-separated list of classes.
`style`	Inline CSS styles (prefer external CSS).
`title`	Advisory tooltip text.
`lang`	Element language.
`dir`	Text direction (`ltr`, `rtl`, `auto`).
`hidden`	Boolean — element is not relevant/hidden.
`data-*`	Custom data attributes for JS.
`contenteditable`	Editable by the user.
`tabindex`	Keyboard navigation order and focusability.
`draggable`	Drag-and-drop.
`spellcheck`	Whether to check spelling.
`accesskey`	Keyboard shortcut.

Common form attributes

Common attributes for form controls and <input> specifically.

Attribute	Notes
`type`	Input type (see types table below).
`name`	Key for the control when submitting forms.
`id`	Identifier for labels and scripting.
`value`	Current value of the control.
`placeholder`	Short hint shown when the field is empty.
`required`	Boolean — field must be filled before submit.
`readonly`	Field is read-only but focusable/selectable.
`disabled`	Field is disabled — not submitted and not focusable.
`min`, `max`	Numeric/date boundaries for validation.
`step`	Granularity for numeric/date inputs.
`pattern`	Regex for client-side validation.
`autocomplete`	Hints for autofill (`on`, `off`, or specific tokens).
`multiple`	Allows multiple values (e.g., for file input or email).
`accept`	File types accepted by a file input (MIME or extensions).
`checked`	For `checkbox` and `radio`, indicates initial checked state.
`form`	Associate control with a form by id (useful outside the form).
`inputmode`	Hints to mobile keyboards (`numeric`, `email`, `tel`, etc.).
`aria-*`	ARIA attributes for accessibility when native semantics are insufficient.

Input types & attributes

Common <input> types and what they are used for.

Type	Description	Example
`text`	Single-line text input for general strings.
`search`	Text optimized for search queries (may show clear button).
`password`	Obscured text for passwords.
`email`	Email address. Enables validation and appropriate keyboard on mobile.
`tel`	Telephone number. Numeric keyboard on mobile.
`url`	URL. Validation and specialized keyboard.
`number`	Numeric input with optional `min`/`max`/`step`.
`range`	Slider control for numeric ranges.
`date`	Native date picker (browser implementation).
`time`	Time input.
`datetime-local`	Date and time input without timezone.
`month`	Month picker.
`week`	Week picker.
`color`	Color picker.
`checkbox`	Binary on/off control.	Check
`radio`	Select one option from a named group.	Option
`file`	File chooser.
`submit`	Submit the form.
`reset`	Reset form fields to initial values.
`button`	Generic button (useful with JS).

Event attributes (inline handlers)

Commonly used inline event attributes (prefer addEventListener in JS).

Attribute	Trigger
`onclick`	Mouse click.
`ondblclick`	Double click.
`onmousedown`, `onmouseup`, `onmousemove`	Mouse actions.
`onkeydown`, `onkeyup`, `onkeypress`	Keyboard actions.
`oninput`	Value changes for input/textarea.
`onchange`	Change event for inputs, selects.
`onsubmit`	Form submission.
`onfocus`, `onblur`	Focus changes.
`onload`, `onerror`	Resource load/error (window, img, script).