cheat sheet

HTML Cheat Sheet

Every element, every attribute - searchable, filterable by category, copy-ready with live previews.

/ to focus
HTML5 Page Boilerplate
start herecore
The complete starting point for every HTML page. Copy this, rename the title, and build from here. Always include charset, viewport, and a descriptive title.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Page Title</title> <link rel="stylesheet" href="styles.css"> </head> <body> <header><nav></nav></header> <main><h1>Heading</h1></main> <footer></footer> <script src="app.js" defer></script> </body> </html>
Core Document Tags
core
DOCTYPE - tells browsers to use standards mode. Must be the very first line.
<!DOCTYPE html>
html - root element. The lang attribute helps screen readers and search engines.
<html lang="en"> … </html>
head - contains metadata, not visible page content.
<head> … </head>
body - everything inside here is rendered visually in the browser.
<body> … </body>
Comment - ignored by the browser, useful for notes and temporarily disabling code.
<!-- This is a comment -->
Div, Span & Headings
core
div - generic block container. Use when no semantic element fits.
<div class="container"> … </div>
span - generic inline wrapper. Use for styling a portion of text without adding line breaks.
<span class="highlight">text</span>
h1 - the main page heading. Use only one per page for correct document outline and SEO.
<h1>Main Title</h1>
h2 through h6 - subsection headings. Use in order without skipping levels.
<h2>Section</h2> <h3>Sub</h3> <h4>…</h4>
Deprecated Elements
deprecated
<center> - deprecated. Use CSS text-align:center or margin:auto instead.
<!-- Avoid: <center>text</center> --> <p style="text-align:center">Centered text</p>
<font> - deprecated. Use CSS font-family, color, and font-size on a span instead.
<!-- Avoid: <font color="red">Text</font> --> <span style="color:red;font-size:1.2rem">Text</span>
<strike> - deprecated. Use <del> for removed content or <s> for no-longer-accurate content.
<!-- Avoid: <strike>text</strike> --> <del>Removed content</del>
<frame> / <frameset> - removed entirely. Use <iframe> for embedded content or CSS for layouts.
<!-- Removed. Use iframe instead: --> <iframe src="page.html" title="Content"></iframe>
<marquee> - deprecated scrolling text. Use CSS animations for any motion effects.
<!-- Avoid: <marquee>text</marquee> --> /* Use CSS animation instead */
Paragraph & Inline Text
core
p - paragraph. The primary building block of text content.
<p>This is a paragraph.</p>
br - line break without starting a new paragraph. Use sparingly.
<br>
hr - thematic break between content sections.
<hr>
strong - critical importance or urgency. Screen readers may stress this. Renders bold.
<strong>Important text</strong>
b - bold for stylistic reasons with no semantic importance.
<b>Bold text</b>
em - stress emphasis that changes meaning. Also renders italic.
<em>Emphasized text</em>
i - italic for alternate voice or technical terms. No stress emphasis implied.
<i>Italic text</i>
code - inline code snippet. Renders in monospace. Pair with pre for multiline blocks.
<code>const x = 42;</code>
pre + code - preformatted multiline code block. Preserves whitespace and line breaks.
<pre><code> function hello() { return "hi"; } </code></pre>
del + ins - deleted and inserted text. Use for changelogs, edits, or price updates.
<del>$99</del> <ins>$49</ins>
sup / sub - superscript and subscript. Common for math and chemical notation.
E = mc<sup>2</sup> H<sub>2</sub>O
blockquote - extended quotation from an external source. Use cite to link the source.
<blockquote cite="https://source.com"> Quote text here. </blockquote>
abbr - abbreviation or acronym. The title attribute shows the full form on hover.
<abbr title="HyperText Markup Language">HTML</abbr>
mark - highlight text for reference or search relevance.
<mark>highlighted text</mark>
kbd - keyboard input, such as shortcuts or command names.
<kbd>Ctrl</kbd> + <kbd>C</kbd>
details + summary - native collapsible disclosure widget. No JavaScript needed.
<details> <summary>Click to expand</summary> <p>Hidden content revealed.</p> </details>
dl / dt / dd - definition list. Good for glossaries and FAQ-style content.
<dl> <dt>HTML</dt> <dd>HyperText Markup Language</dd> <dt>CSS</dt> <dd>Cascading Style Sheets</dd> </dl>
List Types
core
ul - unordered list. Use when the order of items does not matter.
<ul> <li>Item one</li> <li>Item two</li> </ul>
ol - ordered list. Use when sequence matters, such as steps or rankings.
<ol> <li>First</li> <li>Second</li> </ol>
ol start - begin numbering at a specific value.
<ol start="5"> <li>Fifth item</li> <li>Sixth item</li> </ol>
Nested list - mix ordered and unordered freely.
<ul> <li>Parent <ul> <li>Child</li> </ul> </li> </ul>
Table Structure
core
Full semantic table with caption, thead, tbody, and tfoot.
<table> <caption>Table Caption</caption> <thead> <tr><th>Name</th><th>Age</th></tr> </thead> <tbody> <tr><td>Alice</td><td>28</td></tr> </tbody> <tfoot> <tr><td colspan="2">Footer</td></tr> </tfoot> </table>
colspan - makes a cell span multiple columns.
<td colspan="2">Spans two columns</td>
rowspan - makes a cell span multiple rows.
<td rowspan="2">Spans two rows</td>
scope - tells screen readers whether a th is a column or row header.
<th scope="col">Column Header</th> <th scope="row">Row Header</th>
Form & Grouping
form
form - the wrapper for all form controls. action sets where data is sent, method sets GET or POST.
<form action="/submit" method="post"> … </form>
label + input - always link labels to inputs via for/id. Clicking the label focuses the input.
<label for="name">Name</label> <input type="text" id="name" name="name" placeholder="Your name">
fieldset + legend - groups related inputs. Especially important for radio/checkbox groups.
<fieldset> <legend>Shipping Address</legend> <label for="city">City</label> <input type="text" id="city" name="city"> </fieldset>
textarea - multiline text input for messages or comments. rows and cols set the default visible size.
<textarea name="message" rows="4" placeholder="Your message"></textarea>
select - dropdown list. Use optgroup to group related options in long lists.
<select name="country"> <option value="">Choose…</option> <option value="us">United States</option> <option value="uk">United Kingdom</option> </select>
checkbox - binary on/off choice. Each checkbox is independent; multiple can be checked at once.
<input type="checkbox" id="agree" name="agree"> <label for="agree">I agree to the terms</label>
radio buttons - mutually exclusive options. Group with the same name so only one can be selected.
<input type="radio" id="r1" name="color" value="red"> <label for="r1">Red</label> <input type="radio" id="r2" name="color" value="blue"> <label for="r2">Blue</label>
range - slider input between min and max.
<input type="range" min="0" max="100" value="50" name="vol">
color - native color picker. Value is always a 6-digit hex string.
<input type="color" name="bg" value="#22d3ee">
progress - shows task completion. Leave value unset for an indeterminate animated state.
<progress value="70" max="100">70%</progress>
datalist - provides autocomplete suggestions without restricting free entry.
<input list="fruits" name="fruit"> <datalist id="fruits"> <option value="Apple"> <option value="Banana"> </datalist>
Submit and reset buttons. Reset clears all fields to their initial values.
<button type="submit">Submit</button> <button type="reset">Reset</button>
Input Types
form
text - plain single-line text. The default type if you omit the attribute.
<input type="text" name="username">
email - validates format and shows email keyboard on mobile.
<input type="email" name="email">
password - masks the input. Pair with autocomplete="current-password" for password managers.
<input type="password" name="pass" autocomplete="current-password">
number - numeric-only input with spin buttons. Use min, max, and step to constrain values.
<input type="number" name="qty" min="1" max="99" value="1">
tel - phone number. Shows numeric keypad on mobile. No built-in format validation.
<input type="tel" name="phone" placeholder="+1 555 000 0000">
url - validates that the value is a URL. Shows URL-friendly keyboard on mobile.
<input type="url" name="website" placeholder="https://">
search - like text, but styled as a search field with a clear button in some browsers.
<input type="search" name="q" placeholder="Search…">
date - native date picker. Value format is always YYYY-MM-DD.
<input type="date" name="dob">
time - native time picker. Value format is HH:MM.
<input type="time" name="appt">
datetime-local - combined date and time picker. No timezone support.
<input type="datetime-local" name="meeting">
file - file upload. Use accept to restrict types and multiple to allow more than one.
<input type="file" name="doc" accept=".pdf,.docx" multiple>
hidden - submits a value with the form without displaying it. Used for tokens or IDs.
<input type="hidden" name="csrf_token" value="abc123">
Input Validation Attributes
form
required - prevents form submission if the field is empty.
<input type="email" name="email" required>
disabled - non-interactive. Its value is not submitted with the form.
<input type="text" value="Read-only" disabled>
readonly - the user cannot change the value, but it is still submitted with the form.
<input type="text" value="Fixed value" readonly>
pattern - regex the value must match. title provides the validation message.
<input type="text" pattern="[A-Za-z]{3,}" title="At least 3 letters">
min, max, step - constrain range and number inputs.
<input type="number" min="0" max="10" step="0.5">
autocomplete - hints to the browser and password managers what type of value to suggest.
<input type="email" autocomplete="email">
Video
media
video with controls - always provide multiple source formats. MP4 is most widely supported.
<video controls width="640" height="360" poster="thumb.jpg"> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> Your browser does not support video. </video>
Background video - muted is required for autoplay. playsinline prevents fullscreen on iOS.
<video autoplay muted loop playsinline> <source src="bg.mp4" type="video/mp4"> </video>
YouTube embed via iframe.
<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" title="Video title" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
Audio, SVG & Canvas
media
audio - provide MP3 and OGG for broad browser support.
<audio controls> <source src="audio.mp3" type="audio/mpeg"> <source src="audio.ogg" type="audio/ogg"> Your browser does not support audio. </audio>
Inline SVG - scalable vector graphics drawn directly in HTML. No HTTP request needed.
<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <circle cx="50" cy="50" r="40" fill="#22d3ee"/> </svg>
canvas - bitmap drawing surface controlled via JavaScript. Use for games, charts, and image processing.
<canvas id="myCanvas" width="400" height="200"> Fallback for browsers without canvas. </canvas>
Page Layout Elements
semantic
header - introductory content for a page or section.
<header> <nav>…</nav> </header>
nav - a block of navigation links. Use aria-label when you have more than one nav on a page.
<nav aria-label="Main navigation"> <ul> <li><a href="/">Home</a></li> <li><a href="/about">About</a></li> </ul> </nav>
main - the unique primary content of a page. Use only one per page.
<main id="main-content"> … </main>
article - self-contained content that makes sense standalone: blog posts, news articles, product cards.
<article> <h2>Post Title</h2> <time datetime="2025-05-15">May 15, 2025</time> <p>Content here.</p> </article>
section - a thematic grouping within a document. Should have a heading.
<section aria-labelledby="feat-heading"> <h2 id="feat-heading">Features</h2> … </section>
aside - content tangentially related to the main content: sidebars, pull quotes, related links.
<aside> <h3>Related Links</h3> <ul>…</ul> </aside>
footer - closing content for a page or section.
<footer> <p>&copy; 2025 Company Name</p> </footer>
time - wraps a date/time value. The datetime attribute provides machine-readable format.
<time datetime="2025-05-15T09:00">May 15, 2025</time>
ARIA Essentials
semantic
aria-label - gives an accessible name to elements that have no visible text label.
<button aria-label="Close dialog">×</button>
aria-hidden - hides decorative or duplicate elements from the accessibility tree.
<span aria-hidden="true">🔥</span>
role - overrides the implicit ARIA role when the element's semantics don't match its purpose.
<div role="alert">Form submitted!</div> <div role="button" tabindex="0">Click me</div>
aria-expanded - announces the open/closed state of toggleable elements like menus and accordions.
<button aria-expanded="false" aria-controls="menu">Menu</button> <ul id="menu" hidden>…</ul>
Skip link - lets keyboard users jump past navigation directly to the main content.
<a href="#main-content" class="skip-link"> Skip to main content </a>
<dialog> - Native Modal
modern
dialog - a native modal or dialog box. Use showModal() for a true modal with backdrop. No library needed.
<dialog id="myDialog"> <h2>Dialog Title</h2> <p>Dialog content here.</p> <button onclick="this.closest('dialog').close()">Close</button> </dialog> <button onclick="myDialog.showModal()">Open Dialog</button>
Style the dialog backdrop using the ::backdrop pseudo-element.
dialog::backdrop { background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); }
<template> - Inert Markup
modern
template - holds HTML that is not rendered on page load. Clone its content with JavaScript to stamp out reusable structures.
<template id="card-tpl"> <div class="card"> <h3 class="card-title"></h3> <p class="card-body"></p> </div> </template> <script> const tpl = document.getElementById('card-tpl'); const clone = tpl.content.cloneNode(true); clone.querySelector('.card-title').textContent = 'Hello'; document.body.appendChild(clone); </script>
<slot> - Web Component Content Distribution
modern
slot - a placeholder inside a Web Component's Shadow DOM where consumers insert their own content.
<!-- Inside shadow DOM template --> <div class="card"> <slot name="title">Default Title</slot> <slot>Default body content</slot> </div> <!-- Consumer usage --> <my-card> <h2 slot="title">Custom Title</h2> <p>Custom body content.</p> </my-card>
Defining a Web Component class with a shadow DOM and a template.
class MyCard extends HTMLElement { constructor() { super(); const shadow = this.attachShadow({ mode: 'open' }); const tpl = document.getElementById('my-card-tpl'); shadow.appendChild(tpl.content.cloneNode(true)); } } customElements.define('my-card', MyCard);
<output> - Computed Result
modern
output - displays the result of a calculation or user interaction, semantically tied to the inputs that produce it.
<form oninput="result.value = +a.value + +b.value"> <input type="number" id="a" value="0"> + <input type="number" id="b" value="0"> = <output name="result" for="a b">0</output> </form>
Essential Meta Tags
meta
charset - always use UTF-8 to support all characters and emoji correctly.
<meta charset="UTF-8">
viewport - essential for responsive design. Without this, mobile browsers render a shrunken desktop view.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
description - appears under the page title in search results. Keep it under 160 characters.
<meta name="description" content="A clear description under 160 chars.">
author - identifies the page creator for crawlers and aggregators.
<meta name="author" content="Jane Doe">
robots - controls whether search engines index the page and follow its links.
<meta name="robots" content="index, follow"> <meta name="robots" content="noindex, ">
canonical - tells search engines the preferred URL when duplicate content exists.
<link rel="canonical" href="https://example.com/page">
Open Graph & Twitter Cards
meta
Open Graph - controls how your page appears when shared on Facebook, LinkedIn, and Slack.
<meta property="og:title" content="Page Title"> <meta property="og:description" content="Page description."> <meta property="og:image" content="https://example.com/og.jpg"> <meta property="og:url" content="https://example.com/page"> <meta property="og:type" content="website">
Twitter Card - controls how your page appears when shared on X (Twitter).
<meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="Page Title"> <meta name="twitter:description" content="Description."> <meta name="twitter:image" content="https://example.com/og.jpg">
Link & Script Tags
meta
Link external CSS stylesheet.
<link rel="stylesheet" href="styles.css">
Favicon - the browser tab icon. SVG favicons scale perfectly at all sizes.
<link rel="icon" href="favicon.ico" type="image/x-icon"> <link rel="icon" href="favicon.svg" type="image/svg+xml">
defer - script loads in parallel but executes after HTML is fully parsed. Best for most scripts.
<script src="app.js" defer></script>
async - script executes as soon as downloaded, without waiting for HTML parsing. Best for independent scripts like analytics.
<script src="analytics.js" async></script>
preload - tells the browser to fetch a critical resource immediately, before it is discovered in the HTML.
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
Global Attributes
core
id - unique identifier. Used for CSS targeting, JavaScript selection, and anchor links.
<div id="unique-id">…</div>
class - one or more space-separated CSS class names. Elements can share a class, unlike id.
<div class="card card--featured">…</div>
style - inline CSS. Prefer external stylesheets; use inline for dynamic JS-set values.
<p style="color:red;font-weight:bold;">Alert</p>
title - tooltip text shown on hover. Also read by some screen readers.
<span title="Tooltip text">Hover me</span>
lang - language of the element's content. Helps translation tools and screen readers.
<p lang="fr">Bonjour le monde</p>
tabindex="0" makes any element keyboard-focusable. tabindex="-1" allows JS focus only.
<div tabindex="0">Keyboard-focusable div</div>
data-* - store custom data on any element. Read via JavaScript with dataset.
<div data-user-id="42" data-role="admin">…</div> <!-- JS: el.dataset.userId → "42" -->
contenteditable - lets the user edit the element's content directly in the browser.
<div contenteditable="true">Click to edit.</div>
hidden - removes the element from rendering and the accessibility tree.
<p hidden>Not visible until hidden is removed</p>
dir - text direction. Use rtl for Arabic, Hebrew, and other right-to-left languages.
<p dir="rtl">مرحبا بالعالم</p>
HTML Entities
core
Non-breaking space - prevents a line break between two words.
&nbsp;
Less than and greater than - required when angle brackets appear in content, not as tags.
&lt; &gt;
Ampersand - must be escaped in HTML content and attribute values.
&amp;
Copyright, trademark, and registered symbols.
&copy; &trade; &reg;
En dash, em dash, ellipsis.
&ndash; &mdash; &hellip;
Arrows.
&larr; &rarr; &uarr; &darr; &harr;
Math symbols.
&times; &divide; &plusmn; &ne; &le; &ge;

What Is an HTML Cheat Sheet?

An HTML cheat sheet is a structured reference document that lists HTML tags, attributes, and syntax in one place for fast lookup.

It covers the full set of HTML5 elements in active use: document structure tags, text formatting, forms, tables, media, and semantic layout elements.

Who uses it: beginners building their first web page, and working developers who need a quick syntax check without digging through full documentation.

This is not a replacement for MDN Web Docs or the W3C HTML specification. It is a quick reference for the markup language syntax you already know but occasionally forget.

According to the Stack Overflow Developer Survey 2025, HTML/CSS is used by 61.9% of developers worldwide, making it the second most-used language group after JavaScript. Having that syntax close at hand matters.

HTML Document Structure Tags

Every valid HTML document requires 4 foundational tags before any content can be rendered: <!DOCTYPE html>, <html>, <head>, and <body>.

The WebAIM Million report (2026) found that 93.2% of the top 1 million home pages now use a valid HTML5 doctype, up from 79.1% in 2021. Pages without a valid doctype average fewer than half the elements of those with one.

Basic HTML5 Document Template

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Page Title</title>
</head>
<body>
  <!-- content here -->
</body>
</html>

<!DOCTYPE html> goes on line 1, before anything else. No exceptions.

The lang attribute on <html> sets the document language. Screen readers and search engines both use it. Skipping it is a common oversight that affects accessibility scoring.

Essential Meta Tags

Tag

Attribute

Purpose

<meta>

charset="UTF-8"

Character encoding, supports all languages

<meta>

name="viewport"

Controls mobile rendering

<meta>

name="description"

Search result snippet text

<title>

(content)

Browser tab label and primary SERP title

Placement rule: charset and viewport go first inside <head>, before any other tags.

The <link> tag connects external stylesheets. The <script> tag loads JavaScript. Both can go in <head> or just before </body>, depending on load order requirements.

HTML Text Formatting Tags

HTML has 2 distinct categories of text tags: block-level elements that start on a new line and take full width, and inline elements that flow within surrounding text.

Mixing these up causes layout bugs that can be tricky to debug, especially when nesting inline elements inside other inline elements.

Block-Level Text Tags

Headings: <h1> through <h6>, with <h1> reserved for the main page topic and <h2>–<h6> for subsections in descending importance.

Paragraph and break:

  • <p> - standard paragraph block

  • <br> - line break (void element, no closing tag)

  • <hr> - horizontal rule, thematic section divider

Quotation blocks:

  • <blockquote> - extended quote from external source

  • <pre> - preformatted text, preserves whitespace and line breaks

Inline Text Tags

Semantic emphasis:

  • <strong> - strong importance (bold by default)

  • <em> - stress emphasis (italic by default)

  • <mark> - highlighted or relevant text

  • <del> - deleted content

  • <ins> - inserted content

Less obvious but useful:

  • <abbr title="HyperText Markup Language">HTML</abbr> - abbreviation with tooltip

  • <cite> - title of a creative work

  • <q> - short inline quotation (adds quotation marks automatically)

  • <sub> and <sup> - subscript and superscript

W3C guidance distinguishes <b> and <i> (stylistic only) from <strong> and <em> (semantic meaning). Use semantic versions by default.

Code and Preformatted Text Tags

5 tags handle code and technical content, each with a specific role:

  • <code> - inline code snippet

  • <pre> - block of preformatted text, usually wraps <code>

  • <kbd> - keyboard input (user-typed keys)

  • <samp> - sample output from a program

  • <var> - variable in math or programming context

Most developers only use <code> and <pre>. The other 3 carry semantic meaning that helps search engines and screen readers interpret technical content correctly.

HTML List Tags

HTML has 3 list types: unordered lists, ordered lists, and description lists. Each serves a different structural purpose.

Unordered and Ordered Lists

Unordered list (<ul>) renders bullet points by default. Each item uses <li>.

Ordered list (<ol>) numbers items automatically. The type attribute controls numbering style:

type value

Output

1 (default)

1, 2, 3

A

A, B, C

a

a, b, c

I

I, II, III

i

i, ii, iii

Lists nest inside each other naturally. An <li> can contain another <ul> or <ol>, creating sub-levels with no extra attributes needed.

Description Lists

<dl>, <dt>, and <dd> build definition or key-value layouts.

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language, the structure layer of the web</dd>
</dl>

Useful for glossaries, metadata displays, and FAQ-style layouts where each term has one or more associated descriptions. Most developers overlook this list type entirely.

HTML Link and Navigation Tags

The anchor tag <a> is the single most important element in HTML for connecting content. It handles every link type: external URLs, internal pages, section jumps, email, and phone calls.

Anchor Tag Attribute Reference

Attribute

Value example

What it does

href

https://example.com

Destination URL

target

_blank

Opens in new tab

rel

noopener noreferrer

Security for external links

download

filename.pdf

Forces file download

Security note: target="_blank" without rel="noopener noreferrer" exposes the originating page to manipulation via the window.opener object. Always pair them.

Link Type Syntax

5 link patterns cover nearly every use case:

  • External URL: <a href="https://example.com">Visit site</a>

  • Internal page: <a href="/about">About us</a>

  • Page section: <a href="#contact">Jump to contact</a>

  • Email: <a href="mailto:hello@example.com">Email us</a>

  • Phone: <a href="tel:+15551234567">Call us</a>

The <nav> element wraps groups of navigation links. It signals to assistive technologies and search engines that a section contains primary navigation, not just a list of links. The 2025 Web Almanac reports the native <main> element now appears on 47% of pages, up 3% from 2024, reflecting gradual improvement in semantic structure adoption overall.

HTML Image and Media Tags

4 tag categories handle visual and audio-visual content in HTML: images, figures, audio/video, and iframes.

Image Tags and Attributes

<img> is a void element. It has no closing tag. Every <img> needs at minimum src and alt.

Core attributes:

  • src - image file path or URL

  • alt - text description (required for accessibility and search indexing)

  • width / height - prevents layout shift during load

  • loading="lazy" - defers off-screen image loading

WebAIM 2025 data shows 55.4% of images still lack alt text, down from 68% in 2019. Progress is slow. Every missing alt attribute is a direct accessibility and SEO failure.

<figure> wraps an image with its caption. <figcaption> sits inside <figure>.

<figure>
  <img src="chart.png" alt="Q4 revenue by region">
  <figcaption>Q4 2024 revenue breakdown across 5 regions</figcaption>
</figure>

Audio and Video Tags

<audio> and <video> share a similar attribute pattern:

  • controls - shows browser-native playback UI

  • autoplay - starts on load (use sparingly, bad UX)

  • loop - repeats after finishing

  • muted - required for autoplay to work in most browsers

  • poster (video only) - thumbnail shown before playback starts

Both support the <source> child element for providing multiple formats with fallback:

<video controls width="640">
  <source src="intro.webm" type="video/webm">
  <source src="intro.mp4" type="video/mp4">
</video>

Iframe Embed Tag

<iframe> embeds external content: maps, videos, third-party widgets.

Required attributes: src, width, height, title (for accessibility), and allowfullscreen when embedding video players.

The title attribute on <iframe> is frequently skipped. Screen readers announce iframe content to users. Without a descriptive title, the embedded content has no accessible label.

HTML Table Tags

A complete HTML table uses 7 elements: <table>, <thead>, <tbody>, <tfoot>, <tr>, <th>, and <td>.

Skipping <thead> and <tbody> works visually but breaks screen reader table navigation and makes the DOM harder to parse.

Table Structure Reference

Element

Role

<table>

Container for the entire table

<thead>

Groups header rows

<tbody>

Groups body/data rows

<tfoot>

Groups footer rows (totals, summaries)

<tr>

Single row

<th>

Header cell (bold, centered by default)

<td>

Data cell

<caption>

Visible table title, improves accessibility

Spanning and Accessibility Attributes

colspan merges cells horizontally. rowspan merges cells vertically.

<td colspan="2">Spans two columns</td>
<td rowspan="3">Spans three rows</td>

The scope attribute on <th> tells screen readers which cells a header applies to:

  • scope="col" - header for the entire column below

  • scope="row" - header for the entire row to the right

  • scope="colgroup" / scope="rowgroup" - header spans multiple columns or rows

<caption> is placed immediately after <table>. Only about 1.6% of desktop sites include table captions (Web Almanac 2025), despite captions being one of the most straightforward accessibility improvements available.

CSS handles table layout now. Using <table> for page layout (not data) is a legacy pattern. Add role="presentation" if a layout table absolutely cannot be removed.

HTML Form Tags and Input Types

Forms are where HTML does real work. A <form> element wraps all input controls and defines where and how collected data gets sent.

State of HTML 2023 data shows the most-used HTML input types across surveyed developers: number at 94%, email at 89%, file at 88%, and date at 83%.

Form Structure Tags

The 3 form structure tags every form needs:

  • <form> - container; action sets where data goes, method sets how (GET or POST)

  • <fieldset> - groups related inputs; <legend> labels the group for screen readers

  • <label> - connects text to its input via the for attribute, matching the input's id

WebAIM 2025 found 34.2% of form inputs are not properly labeled, covering 6.3 form inputs per home page on average.

Input Types Reference

HTML currently supports 22 input types. The ones you'll reach for most often:

Type

Use case

text

Default single-line text

email

Email with built-in format validation

password

Masked text input

number

Numeric input with step controls

checkbox

Boolean selection

radio

Single-choice from a group

file

File upload dialog

date

Date picker

range

Slider control

hidden

Data sent with form but not shown to users

submit

Form submission button

Form Validation Attributes

Built-in HTML5 validation handles most common input rules without JavaScript.

required - field must have a value before submission.

pattern - validates input against a regex string.

min / max - numeric and date range boundaries.

maxlength - caps character count for text inputs.

placeholder - hint text inside the input, not a substitute for <label>.

A common mistake: using placeholder as the only label. It disappears the moment a user starts typing, leaving no visible description.

Additional Form Elements

4 elements handle dropdown and multi-option scenarios:

  • <select> with <option> items builds a dropdown

  • <optgroup> clusters related options inside a <select>

  • <datalist> provides autocomplete suggestions for a text input (linked via list attribute)

  • <textarea> handles multi-line text; use rows and cols or CSS for sizing

<button type="submit"> submits the form. <button type="reset"> clears all inputs. <button type="button"> does nothing by default but triggers JavaScript handlers.

HTML Semantic Structure Tags

Semantic HTML5 tags define page layout regions. They replace generic <div> elements with tags that carry built-in meaning for browsers, assistive technologies, and search engines.

The <main> element now appears on 42.6% of home pages, up from 39.1% in 2024, according to WebAIM 2025. Still less than half. Most pages are still using non-semantic wrappers for primary content.

Page Layout Semantic Elements

<header> - introductory content or a group of navigational links. Can appear once at page level or inside <article> and <section> elements.

<footer> - closing content: copyright, author info, related links. Same nesting rules as <header>.

<main> - the dominant content of the document. Only one <main> per page.

<nav> - primary navigation links. Not every group of links qualifies; use it for major navigation blocks only.

<aside> - content tangentially related to the surrounding context, like sidebars or pull quotes.

Content Sectioning Tags

<section> vs <article> is a distinction most developers get wrong at some point.

<article> is self-contained content that makes sense distributed independently: blog posts, news stories, forum threads, product cards.

<section> groups thematically related content within a page. It should have a heading. If you can't give it a heading, it probably wants to be a <div>.

<time> marks dates and times with a machine-readable datetime attribute:

<time datetime="2024-11-15">November 15, 2024</time>

<address> marks contact information related to the nearest <article> or <body> ancestor.

HTML Global Attributes

Global attributes apply to every HTML element. They are not tag-specific.

ARIA attribute usage has quadrupled since 2019, with pages now averaging 89 ARIA attributes each, according to WebAIM 2025. But pages with ARIA present show over twice as many accessibility errors as those without, averaging 57 errors vs. 27.

Core Global Attributes

Attribute

What it does

id

Unique identifier for the element on the page

class

One or more CSS class names for styling or JS targeting

style

Inline CSS (use sparingly)

title

Tooltip text on hover

lang

Language of the element's content

dir

Text direction: ltr or rtl

hidden

Hides the element from display and accessibility tree

tabindex

Controls keyboard navigation order

contenteditable

Makes element content directly editable by the user

Data Attributes and ARIA

data-* attributes store custom data on elements for JavaScript to read. The Web Almanac 2024 found data-id is used on 24% of mobile pages, making it the most popular custom data attribute.

<div data-product-id="4821" data-category="tools">...</div>

ARIA attributes communicate accessibility information to screen readers:

  • aria-label - provides a text label when visible text is absent

  • aria-hidden="true" - removes an element from the accessibility tree

  • role - assigns an explicit semantic role (use native HTML elements first)

The rule on ARIA: native HTML semantics always take priority. role="button" on a <div> is a workaround for not using <button>. Start with the right element and ARIA becomes rarely needed.

HTML Character Entities and Symbols

Some characters have special meaning in HTML markup and need to be escaped: <, >, &, and ". Use named or numeric character entities instead.

Reserved Character Entities

You must escape these when they appear as literal content:

  • &lt; renders <

  • &gt; renders >

  • &amp; renders &

  • &quot; renders "

  • &apos; renders '

  • &nbsp; renders a non-breaking space (no line wrap at that point)

Common Symbol Entities

Entity name

Numeric

Renders

&copy;

&#169;

©

&reg;

&#174;

®

&trade;

&#8482;

™

&euro;

&#8364;

€

&pound;

&#163;

£

&mdash;

&#8212;

-

&ndash;

&#8211;

–

&hellip;

&#8230;

…

Named entities like &copy; are easier to read in source. Numeric references like &#169; work in any environment.

UTF-8 charset removes most problems. With <meta charset="UTF-8"> in <head>, you can paste most special characters directly into HTML without entities. The exceptions are still the 4 reserved characters above.

HTML Meta Tags for SEO and Social Sharing

Meta tags in <head> control how search engines index your page and how it appears when shared on social platforms.

According to the Web Almanac 2024, og:title appears on 61% of mobile pages, og:url on 58%, and og:description on 53%. Title tags appear on 99.1% of pages.

SEO Meta Tags

<title> - the primary ranking and click signal in search results. Keep it under 60 characters.

<meta name="description"> - shown as the snippet in search results. Removing it can hurt click-through rates. One experiment removed title tags and meta descriptions from a $200,000/year site; traffic dropped 25% within two weeks (Ahrefs case study).

<meta name="robots"> - controls crawler behavior. Common values:

  • index, follow - default behavior (no need to add explicitly)

  • noindex - blocks the page from appearing in search results

  • - tells crawlers not to follow links on the page

<link rel="canonical"> - specifies the preferred URL when duplicate or near-duplicate versions exist. Canonical adoption reached 67% of pages in 2025 (Web Almanac 2025), up from 65% in 2024.

Open Graph and Twitter Card Tags

Open Graph controls link previews on Facebook, LinkedIn, and Slack. Twitter Cards handle the same for X (formerly Twitter).

Minimum Open Graph tags needed for a working preview: 

<meta property="og:title" content="Page Title Here">
<meta property="og:description" content="Brief description under 160 characters">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com/page">

Twitter Card minimum: 

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Page Title Here">
<meta name="twitter:image" content="https://example.com/image.jpg">

<meta name="viewport" content="width=device-width, initial-scale=1.0"> - required for responsive mobile rendering. Viewport meta tags now appear on over 93% of pages (Web Almanac 2025).

Deprecated HTML Tags Still Found in Legacy Code

Deprecated tags were removed from HTML5 because CSS handles their function better. They still render in modern browsers for backward compatibility, but they carry no semantic meaning and fail accessibility checks.

12% of mobile pages still use document.write, a legacy JavaScript pattern closely tied to deprecated HTML practices, according to Web Almanac 2024.

Deprecated Presentational Tags

These replaced by CSS properties completely:

Deprecated tag

Use this instead

<font>

CSS font-family, font-size, color

<center>

CSS text-align: center or flexbox

<strike>

CSS text-decoration: line-through or <del>

<b> (stylistic)

CSS font-weight: bold or <strong>

<i> (stylistic)

CSS font-style: italic or <em>

<big>

CSS font-size

<tt>

<code> with CSS monospace styling

Deprecated Structural Tags

<frame>, <frameset>, <noframes> - frame-based page layouts from the 1990s. Fully removed in HTML5. Replace with CSS layout or <iframe> where embedding is needed.

<acronym> - use <abbr> with a title attribute instead:

<abbr title="HyperText Markup Language">HTML</abbr>

<applet> - loaded Java applets. Replace with <object> or modern JavaScript equivalents.

Spotting deprecated tags in a codebase is a reliable signal of how long the project has gone without a markup audit. Running pages through the W3C Validator at validator.w3.org takes under a minute and flags every deprecated element in the source.

If you're working on front-end development in an older project, a quick pass through the HTML to replace deprecated tags with semantic equivalents is one of the fastest ways to improve both accessibility scores and code maintainability. The css cheat sheet covers the CSS replacement properties for every deprecated presentational tag above.

FAQ on HTML Cheat Sheet

What is an HTML cheat sheet used for?

An HTML cheat sheet is a quick reference for HTML tags, attributes, and syntax. Developers use it to look up correct markup without opening full documentation. It covers everything from document structure to form elements, semantic tags, and character entities.

What are the most important HTML tags to know?

The tags you'll use in every project: <html>, <head>, <body>, <div>, <p>, <a>, <img>, <h1>–<h6>, <ul>, <li>, and <form>. Semantic elements like <main>, <nav>, and <footer> are equally important for accessibility.

What is the difference between HTML elements and HTML attributes?

An element is the tag itself, like <input>. An attribute modifies that element's behavior or appearance, like type="email" or required. Attributes always sit inside the opening tag and come in name-value pairs.

What HTML tags are deprecated in HTML5?

Tags like <font>, <center>, <strike>, <tt>, and <big> were removed in HTML5. CSS handles their styling functions now. <frame> and <frameset> were also dropped entirely. Use semantic HTML and CSS instead of these legacy elements.

What is the correct HTML5 document structure?

Start with <!DOCTYPE html>, followed by <html lang="en">, then <head> (for meta tags, title, and stylesheet links), then <body> for all visible content. The charset and viewport meta tags belong at the top of <head>.

What is the difference between <div> and semantic HTML tags?

<div> carries no meaning. It is a generic container. Semantic tags like <article>, <section>, and <aside> tell browsers and screen readers what the content represents. Use semantic tags first, and reach for <div> only when no semantic option fits.

How do HTML forms work?

A <form> element wraps input controls and sends collected data to a server via the action and method attributes. Input types like email, number, and date provide built-in browser validation. Every input needs a <label> linked by matching id and for values.

What are HTML character entities and when do you need them?

Character entities encode reserved characters that HTML would otherwise interpret as markup. &lt; renders <, &amp; renders &, and &nbsp; inserts a non-breaking space. With UTF-8 charset declared, most special symbols can be typed directly into HTML source.

What HTML meta tags matter for SEO?

The <title> tag and <meta name="description"> directly affect search result appearance and click-through rates. Open Graph tags (og:title, og:image, og:url) control social media previews. The <link rel="canonical"> tag prevents duplicate content issues across multiple URLs.

How is an HTML cheat sheet different from full HTML documentation?

Full documentation like MDN Web Docs covers every attribute, browser compatibility table, and edge case. A cheat sheet gives you syntax at a glance: the tag, its key attributes, and a usage example. It is faster for daily lookup, not for learning a new concept from scratch.