HTML Cheat Sheet – Every Common Tag with Examples

Search the cheat sheet ⬇ Download PDF

FreeHTMLEditor.net · HTML Cheat Sheet · freehtmleditor.net/html-cheat-sheet/ · Try every example free in the online editor

Basic HTML page template

Every HTML page starts from this structure. Copy it, or open it in the editor and start building.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="A short summary of the page">
  <title>Page title</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <nav><a href="/">Home</a></nav>
  </header>
  <main>
    <h1>Main heading</h1>
    <p>Your content goes here.</p>
  </main>
  <footer>
    <p>&copy; 2026 Your Name</p>
  </footer>
  <script src="script.js"></script>
</body>
</html>

Open in the editor →

Document & metadata

The tags that set up a page. Everything except <body> content lives in <head>.

Tag	What it does	Example
`<!DOCTYPE html>`	Tells the browser the page is modern HTML. Always the first line	`<!DOCTYPE html>`
`<html>`	The root element that wraps the whole page; set the language here	`<html lang="en">…</html>`
`<head>`	Holds information about the page that isn’t shown on it	`<head>…</head>`
`<title>`	The page title shown in the browser tab and search results	`<title>My Page</title>`
`<meta>`	Page information: character set, mobile viewport, description	`<meta charset="UTF-8">`
`<link>`	Connects an external file such as a stylesheet or icon	`<link rel="stylesheet" href="style.css">`
`<style>`	CSS written directly in the page	`<style>p { color: red; }</style>`
`<script>`	Adds JavaScript, inline or from a file	`<script src="app.js"></script>`
`<noscript>`	Content shown only when JavaScript is turned off	`<noscript>Please enable JavaScript</noscript>`
`<base>`	Sets the base URL for all relative links on the page	`<base href="https://example.com/">`
`<body>`	Contains everything visible on the page	`<body>…</body>`

Text & headings

Headings, paragraphs and inline tags that give text its meaning.

Tag	What it does	Example
`<h1> – <h6>`	Headings from most (h1) to least (h6) important	`<h1>Page title</h1>`
`<p>`	A paragraph of text	`<p>Some text.</p>`
`<br>`	A line break inside text (void, no closing tag)	`Line one<br>Line two`
`<wbr>`	An optional break point inside a long word	`very<wbr>long<wbr>word`
`<hr>`	A thematic break, shown as a horizontal line	`<hr>`
`<strong>`	Important text, bold by default	`<strong>Warning:</strong>`
`<em>`	Stressed emphasis, italic by default	`I <em>love</em> it`
`<b>`	Draws attention to text without extra importance	`<b>Keyword</b>`
`<i>`	Alternate voice: terms, foreign words, titles of ships	`<i lang="fr">café</i>`
`<u>`	Non-textual annotation, e.g. a spelling error	`<u>mispelled</u>`
`<small>`	Side comments and fine print	`<small>Terms apply</small>`
`<mark>`	Highlighted, relevant text	`<mark>match</mark>`
`<s>`	Text that is no longer accurate	`<s>$49</s> $29`
`<sub> / <sup>`	Subscript and superscript	`H<sub>2</sub>O, x<sup>2</sup>`
`<code>`	A fragment of computer code	`<code>let x = 1;</code>`
`<kbd>`	Keyboard input	`<kbd>Ctrl</kbd> + <kbd>C</kbd>`
`<samp>`	Sample output from a program	`<samp>File saved</samp>`
`<var>`	A variable in maths or code	`<var>x</var> = 5`
`<pre>`	Preformatted text that keeps spaces and line breaks	`<pre> spaced text</pre>`
`<blockquote>`	A long quotation from another source	`<blockquote cite="url">…</blockquote>`
`<q>`	A short inline quotation (adds quote marks)	`<q>Keep it simple</q>`
`<cite>`	The title of a creative work	`<cite>The Hobbit</cite>`
`<abbr>`	An abbreviation, with its full form in title	`<abbr title="HyperText Markup Language">HTML</abbr>`
`<time>`	A date or time with a machine-readable value	`<time datetime="2026-10-09">Oct 9</time>`
`<data>`	Content linked to a machine-readable value	`<data value="1042">Blue shoes</data>`
`<ins> / <del>`	Text added to / removed from a document	`<del>2pm</del> <ins>3pm</ins>`
`<span>`	A generic inline container for styling	`<span class="tag">New</span>`

Links & media

Links, images, video, audio and embedded content.

Tag	What it does	Example
`<a>`	A hyperlink to another page, file, email or section	`<a href="/about/">About</a>`
`<img>`	An image (void). Always add alt text	`<img src="cat.jpg" alt="A grey cat">`
`<picture>`	Offers several image versions for sizes or formats	`<picture><source srcset="a.webp"><img src="a.jpg" alt=""></picture>`
`<figure> / <figcaption>`	Self-contained content with a caption	`<figure><img …><figcaption>Fig. 1</figcaption></figure>`
`<video>`	Embeds a video player	`<video src="clip.mp4" controls></video>`
`<audio>`	Embeds an audio player	`<audio src="song.mp3" controls></audio>`
`<source>`	An alternative file for video, audio or picture	`<source src="clip.webm" type="video/webm">`
`<track>`	Captions or subtitles for media	`<track src="en.vtt" kind="captions" srclang="en">`
`<iframe>`	Embeds another web page, video or map	`<iframe src="https://…" title="Map"></iframe>`
`<canvas>`	A drawing area for JavaScript graphics	`<canvas id="c" width="300" height="150"></canvas>`
`<svg>`	Inline vector graphics	`<svg width="40" height="40"><circle cx="20" cy="20" r="18"/></svg>`
`<map> / <area>`	Clickable regions on an image	`<area shape="rect" coords="0,0,50,50" href="/a/" alt="A">`
`<embed> / <object>`	Embeds external content such as a PDF	`<object data="file.pdf" type="application/pdf"></object>`

Lists

Bulleted, numbered and description lists.

Tag	What it does	Example
`<ul>`	An unordered (bulleted) list	`<ul><li>Apples</li></ul>`
`<ol>`	An ordered (numbered) list	`<ol start="3"><li>Step</li></ol>`
`<li>`	A list item inside <ul> or <ol>	`<li>Item</li>`
`<dl>`	A description list of terms and details	`<dl><dt>HTML</dt><dd>Markup</dd></dl>`
`<dt> / <dd>`	A term and its description	`<dt>CSS</dt><dd>Styling</dd>`

Tables

Rows and columns of data.

Tag	What it does	Example
`<table>`	A table of rows and columns	`<table>…</table>`
`<caption>`	The table’s title (first child of table)	`<caption>Prices</caption>`
`<thead> / <tbody> / <tfoot>`	Header, body and footer row groups	`<thead><tr>…</tr></thead>`
`<tr>`	A table row	`<tr><td>A</td><td>B</td></tr>`
`<th>`	A header cell (use scope)	`<th scope="col">Name</th>`
`<td>`	A data cell; merge with colspan / rowspan	`<td colspan="2">Wide cell</td>`
`<colgroup> / <col>`	Style whole columns at once	`<colgroup><col class="hl"></colgroup>`

Forms

Collect input from visitors.

Tag	What it does	Example
`<form>`	Groups controls and submits their values	`<form action="/send" method="post">…</form>`
`<label>`	A clickable name for a form field	`<label for="email">Email</label>`
`<input>`	A form field; the type sets what kind (see table below)	`<input type="email" id="email" name="email">`
`<textarea>`	A multi-line text box	`<textarea name="msg" rows="4"></textarea>`
`<select>`	A dropdown list	`<select name="size"><option>M</option></select>`
`<option> / <optgroup>`	A choice in a select or datalist, and a group of choices	`<option value="m" selected>Medium</option>`
`<button>`	A clickable button	`<button type="submit">Send</button>`
`<fieldset> / <legend>`	Groups related fields under a caption	`<fieldset><legend>Size</legend>…</fieldset>`
`<datalist>`	Autocomplete suggestions for an input	`<input list="l"><datalist id="l"><option value="A"></datalist>`
`<output>`	Shows the result of a calculation	`<output name="total">0</output>`
`<progress>`	A task’s progress bar	`<progress value="70" max="100"></progress>`
`<meter>`	A gauge for a value in a known range	`<meter value="0.6"></meter>`

Page structure & interactive

Semantic sections that describe the layout, plus built-in interactive elements.

Tag	What it does	Example
`<header>`	Introductory content: logo, title, navigation	`<header><h1>Site</h1></header>`
`<nav>`	A block of main navigation links	`<nav><a href="/">Home</a></nav>`
`<main>`	The page’s main content (once per page)	`<main>…</main>`
`<section>`	A thematic group of content with a heading	`<section><h2>Features</h2></section>`
`<article>`	Self-contained content, e.g. a blog post	`<article><h2>Post</h2></article>`
`<aside>`	Related side content, e.g. a sidebar	`<aside>Related links</aside>`
`<footer>`	Closing content: copyright, contact, links	`<footer>© 2026</footer>`
`<address>`	Contact information for the page or article author	`<address><a href="mailto:a@b.com">Email</a></address>`
`<div>`	A generic block container for layout and styling	`<div class="card">…</div>`
`<details> / <summary>`	An open/close section (no JavaScript)	`<details><summary>More</summary>…</details>`
`<dialog>`	A popup box, opened with showModal()	`<dialog id="d">Hello</dialog>`
`<template>`	Hidden, reusable HTML for JavaScript to clone	`<template id="row"><li></li></template>`
`<slot>`	A placeholder inside a web component	`<slot name="title"></slot>`

Input types

The type attribute turns one <input> into many different controls.

type	What it does	Example
`text`	Single-line text (the default)	`<input type="text">`
`email`	An email address, checked by the browser	`<input type="email">`
`password`	Hidden characters	`<input type="password">`
`number`	A number, with min / max / step	`<input type="number">`
`tel`	A phone number (shows a number keypad on phones)	`<input type="tel">`
`url`	A web address	`<input type="url">`
`search`	A search box	`<input type="search">`
`checkbox`	Tick on or off	`<input type="checkbox">`
`radio`	Pick one from a group (same name)	`<input type="radio">`
`date`	A date picker	`<input type="date">`
`time`	A time picker	`<input type="time">`
`file`	Upload a file	`<input type="file">`
`range`	A slider	`<input type="range">`
`color`	A color picker	`<input type="color">`
`hidden`	A value sent but not shown	`<input type="hidden">`
`submit`	A button that sends the form	`<input type="submit">`

Global attributes

These attributes work on almost every HTML element.

Attribute	What it does	Example
`id`	A unique name for one element	`id="intro"`
`class`	One or more reusable style names	`class="card big"`
`style`	Inline CSS for this element	`style="color: red"`
`title`	Extra information, shown as a tooltip	`title="More info"`
`lang`	The language of the content	`lang="en"`
`hidden`	Hides the element	`hidden`
`tabindex`	Keyboard focus order	`tabindex="0"`
`data-*`	Your own custom data for scripts	`data-price="12"`
`aria-*`	Accessibility information for screen readers	`aria-label="Close"`
`dir`	Text direction	`dir="rtl"`
`contenteditable`	Lets the user edit the content	`contenteditable="true"`
`draggable`	Lets the element be dragged	`draggable="true"`
`spellcheck`	Turns spell checking on or off	`spellcheck="false"`
`translate`	Whether translation tools should translate it	`translate="no"`

Common HTML entities

Entities write characters that would otherwise be read as code, or that aren’t on the keyboard.

Entity	Shows as	Name
`<`	<	Less-than sign
`>`	>	Greater-than sign
`&`	&	Ampersand
`"`	“	Double quote
`'`	‘	Apostrophe
` `	(space)	Non-breaking space
`©`	©	Copyright
`®`	®	Registered trademark
`™`	™	Trademark
`—`	—	Em dash
`–`	–	En dash
`…`	…	Ellipsis
`€`	€	Euro sign
`£`	£	Pound sign
`×`	×	Multiplication sign
`→`	→	Right arrow

Frequently asked questions

How many HTML tags are there?

The HTML standard defines more than 100 elements, but most web pages use only a few dozen. This cheat sheet covers the ones you are most likely to need, grouped by what they do.

What are the most important HTML tags to learn first?

Start with the page structure (<html>, <head>, <title>, <body>), then headings (<h1>–<h6>), paragraphs (<p>), links (<a>), images (<img>), lists (<ul>, <ol>, <li>) and <div>. With those you can build a complete basic page.

Can I print or download this HTML cheat sheet?

Yes. Use the "Print / save as PDF" button at the top: the page prints on white paper without the menu and buttons, and you can choose "Save as PDF" in the print window to keep a copy.

Want the details? Every linked tag above opens its full page in the HTML reference, with attributes and a live example. For step-by-step guides, see the HTML tutorials.