HTML Cheat Sheet: Printable Quick Reference for Beginners

Page skeleton

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Page title</title>
</head>
<body>
  <h1>Hello</h1>
</body>
</html>

Entities

Document

<html>

The root element. Every page's head and body sit inside it.

<head>

Metadata container for the title, charset, styles and scripts. Never displayed.

<body>

Everything visible on the page lives inside body.

Metadata

<title>

Names the page in the browser tab, in bookmarks and in search results.

<meta>

Page metadata such as the charset, viewport and description.

<link>

Ties the page to external files such as stylesheets and icons.

<style>

Puts CSS rules straight into the page.

<base>

Sets the base URL and default target for all relative links on a page.

Sections

<header>

Introductory content: the site logo and navigation, or the top of an article.

<nav>

Wraps the major navigation links.

<main>

The page's unique, central content. One per page.

<footer>

Closing content for a page or section, like copyright, contacts and related links.

<article>

Self-contained content that makes sense alone, such as a post, card or comment.

<section>

A themed group of content, normally with its own heading.

<aside>

Content related to the main content but set apart from it, such as a sidebar.

<h1>

The top-level heading, naming what the page is about.

<h2>

A main section heading, one step below h1.

<h3>

A subsection heading inside an h2 section.

<h4>

Heading for a subsection of an h3 section.

<h5>

Fifth-level heading, used inside an h4 section.

<h6>

The lowest heading level, used inside an h5 section.

<hgroup>

Ties a heading to its subtitle or tagline paragraphs.

<address>

Contact details for the person or organization behind a page or article.

<search>

Wraps a search or filter form and creates a search landmark.

Text

<p>

One paragraph of text.

<br>

Breaks the line inside text, as in a postal address or a poem.

<hr>

A change of topic between paragraphs, drawn as a horizontal line.

<pre>

Shows text exactly as typed, spaces and line breaks included.

<blockquote>

A longer quotation from another source, set apart as its own block.

<div>

A generic block box with no meaning, for grouping and styling.

<span>

A generic inline wrapper with no meaning, for styling part of a line of text.

<strong>

Text that is important, serious or urgent. Shown in bold by default.

<em>

Stress emphasis that changes what a sentence means. Italic by default.

<b>

Makes text stand out without adding importance, as with keywords. Bold by default.

<i>

Text in another voice: foreign words, terms, thoughts, ship names. Italic.

<u>

Text with an unspoken annotation, such as a flagged spelling error.

<s>

Content that is no longer accurate or relevant, drawn crossed out.

<mark>

Highlighted text, like a marker pen, showing relevance in the current context.

<small>

Side comments and fine print, like copyright lines or legal notes.

<sub>

Subscript text, set below the line, as in H2O.

<sup>

Superscript text, set above the line, as in exponents or 1st.

<code>

A fragment of computer code, set in a monospace font.

<kbd>

Keys or text the user should press or type.

<samp>

Sample output from a program or a computer system.

<var>

A variable in math or in code. Italic by default.

<q>

A short quotation inside a sentence. The browser adds the quote marks.

<cite>

The title of a creative work: a book, film, song, game or article.

<abbr>

An abbreviation or acronym, with an optional expansion in title.

<dfn>

Marks the term that the surrounding sentence or paragraph defines.

<time>

Marks a date, time or duration and gives it a machine-readable value.

<data>

Ties visible content to a machine-readable value.

<del>

Text that was removed from the document. Struck through by default.

<ins>

Text that was added to the document. Underlined by default.

<wbr>

A spot where the browser may break a long word if it has to.

<bdi>

Isolates text of unknown direction, such as user names.

<bdo>

Forces a text direction and overrides the normal bidi algorithm.

<ruby>

Small annotations above or beside text, mostly for East Asian pronunciation.

<rt>

The small reading or note in a ruby annotation.

<rp>

Fallback brackets around ruby text, shown only where ruby is unsupported.

Lists

<ul>

Bulleted list for items in no particular order.

<ol>

Numbered list for sequences such as steps, directions or rankings.

<li>

A single item in a ul, ol or menu.

<dl>

Pairs of terms and descriptions, such as a glossary or a set of key-value data.

<dt>

A term, name or question in a dl.

<dd>

The definition, description or value that belongs to a term in a dl.

<menu>

A list of commands like toolbar buttons; browsers treat it as a ul.

Links

<a>

Links to another page, a file, an email address or a point on the same page.

<area>

One clickable region of an image map.

Media

<img>

Displays an image; src and alt required.

<picture>

Holds several image sources and lets the browser choose one.

<source>

One alternative file inside picture, audio or video.

<track>

Adds WebVTT captions, subtitles or chapters to audio and video.

<figure>

A self-contained image, chart, code listing or quote, optionally captioned.

<figcaption>

A figure's caption, placed as its first or last child.

<audio>

Plays sound, like music or a podcast episode.

<video>

Adds a video player.

<iframe>

Shows another web page inside a frame on yours.

<embed>

Inserts external content, like a PDF, that the browser or a plugin displays.

<object>

Embeds an external resource and holds fallback content for it.

<canvas>

A bitmap surface that JavaScript draws graphics on.

<svg>

Vector graphics drawn right in the HTML, sharp at any size.

<math>

Math notation written as MathML markup.

<map>

Holds the clickable areas that turn an image into an image map.

Tables

<table>

Tabular data laid out in rows and columns.

<caption>

A table's title, written as the table's first child.

<colgroup>

Groups table columns so you can style them as one.

<col>

Stands for one or more columns in a colgroup, for styling.

<thead>

Wraps the header row or rows of a table.

<tbody>

Wraps the main rows of data in a table.

<tfoot>

Holds summary rows such as totals at the foot of a table.

<tr>

A single table row of cells.

<th>

Header cell for a column or row, shown bold and centered by default.

<td>

A normal data cell inside a table row.

Forms

<form>

Wraps the controls whose values get sent to a server.

<label>

Names a form control; clicking the label focuses the control.

<input>

All-purpose form control; type picks text, email, number, checkbox, date and more.

<button>

A button that submits a form, resets it or runs some command.

<select>

A drop-down menu of options.

<option>

A single choice in a select, datalist or optgroup.

<optgroup>

Puts related options in a select under one label.

<textarea>

A multi-line field for longer input such as messages.

<fieldset>

Groups related form controls and names them with a legend.

<legend>

Names a fieldset and must come first inside it.

<datalist>

Suggested values for an input; people can still type whatever they like.

<output>

Displays the result of a calculation or a user action.

<progress>

Shows how far along a task is, like a file download.

<meter>

A gauge for a value inside a known range, such as battery level.

Interactive

<details>

A box that expands and collapses to reveal more content, with no JavaScript.

<summary>

The clickable label of a details element, always on show.

<dialog>

A dialog box or a modal window.

Scripting

<script>

Runs or loads JavaScript.

<noscript>

Content that appears only when JavaScript is off or unavailable.

<template>

Inert HTML that the page does not render, kept for scripts to clone.

<slot>

Marks the spot in a web component where outside content gets inserted.