<!DOCTYPE html> HTML5 document type declaration
<html lang="en"> Root element with language
<head> Document metadata container
<body> Document body (visible content)
<div> Generic block container
<span> Generic inline container
<link rel="stylesheet" href="style.css"> Link external stylesheet
<script src="app.js" defer></script> Link external script (deferred)
<template> Reusable HTML template (not rendered)
<h1> to <h6> Heading levels 1 (largest) to 6
<p> Paragraph
<a href="url"> Hyperlink
<a href="url" target="_blank" rel="noopener"> Link opening in new tab (secure)
<strong> / <b> Bold / strong importance
<em> / <i> Italic / emphasis
<br> Line break
<hr> Horizontal rule / thematic break
<ul>
<li>Item</li>
</ul> Unordered list
<ol>
<li>Item</li>
</ol> Ordered list
<blockquote> Block quotation
<code> / <pre> Inline code / preformatted text
<mark> Highlighted text
<abbr title="Full Text">FT</abbr> Abbreviation with tooltip
<form action="/submit" method="POST"> Form element
<input type="text" name="q" placeholder="Search"> Text input
<input type="email" required> Email input with validation
<input type="password"> Password input (masked)
<input type="number" min="0" max="100" step="1"> Number input with range
<input type="checkbox" checked> Checkbox input
<input type="radio" name="group" value="a"> Radio button (grouped by name)
<input type="file" accept="image/*" multiple> File upload (images, multiple)
<input type="range" min="0" max="100"> Slider input
<input type="date"> Date picker input
<input type="color"> Color picker input
<textarea rows="4" cols="50"></textarea> Multi-line text input
<select>
<option value="a">A</option>
</select> Dropdown select
<label for="email">Email</label> Label linked to input by id
<button type="submit">Send</button> Submit button
<fieldset>
<legend>Title</legend>
</fieldset> Group form elements
<datalist id="opts">
<option value="A">
</datalist> Autocomplete suggestions
<img src="img.jpg" alt="Description" loading="lazy"> Image with lazy loading
<picture>
<source srcset="img.webp" type="image/webp">
<img src="img.jpg" alt="">
</picture> Responsive image with formats
<video src="vid.mp4" controls autoplay muted></video> Video with controls
<audio src="audio.mp3" controls></audio> Audio player
<iframe src="url" title="Embed"></iframe> Embedded frame (video, maps)
<canvas id="c" width="300" height="150"></canvas> Drawing surface for JS
<svg viewBox="0 0 100 100"> Scalable vector graphics container
<table>
<thead>
<tr><th>Name</th></tr>
</thead>
<tbody>
<tr><td>John</td></tr>
</tbody>
</table> Complete table structure
<th colspan="2"> Header spanning 2 columns
<td rowspan="3"> Cell spanning 3 rows
<caption>Table Title</caption> Table caption (accessibility)
<header> Page or section header
<nav> Navigation links
<main> Main content (one per page)
<article> Self-contained content
<section> Thematic grouping of content
<aside> Sidebar / tangential content
<footer> Page or section footer
<figure>
<img src="" alt="">
<figcaption>Caption</figcaption>
</figure> Figure with caption
<details>
<summary>Click to expand</summary>
Hidden content
</details> Collapsible details
<dialog open>Modal content</dialog> Dialog / modal element
<time datetime="2025-01-15">Jan 15</time> Machine-readable date/time
<meta charset="UTF-8"> Character encoding
<meta name="viewport" content="width=device-width, initial-scale=1.0"> Responsive viewport
<meta name="description" content="Page description"> SEO description
<meta property="og:title" content="Title"> Open Graph title (social)
<meta name="robots" content="index, follow"> Search engine directives
<link rel="icon" href="favicon.ico"> Favicon
<link rel="canonical" href="url"> Canonical URL (avoid duplicates)
<title>Page Title</title> Document title (shown in tab)
HTML Cheat Sheet — Tags, Forms, Semantic Elements & Attributes Reference
HTML has been the markup of the web since Tim Berners-Lee published the first draft in 1991, and although it has grown from a dozen tags to a few hundred, most pages still lean on a small core: structure, text, links, forms, media, tables and a thin layer of semantics. The reference below covers 65+ of those tags grouped by job. Most trouble in real markup doesn't come from forgetting a tag. It comes from quirks that look ordinary but bite. A `<button>` placed inside a `<form>` without an explicit `type` attribute defaults to `type="submit"` and posts the form on the first Enter keypress. The `<html>` element ships with no `lang` attribute by default, which silently breaks screen readers and translation tools. An `<img>` without an `alt` value is invisible to anyone using assistive tech. These are the snippets reached for when fixing exactly that — the form attribute that controls submission, the meta tag that fixes mobile zoom, the semantic element that replaces a meaningless `<div>` — without rereading the HTML spec from line one.
Common pitfalls in HTML
A few patterns earn their place on the first screen of any HTML document. `<meta charset="UTF-8">` and the viewport meta belong in the `<head>` before anything renders, because a browser that guesses encoding wrong will mangle accented characters and emoji in ways that look like data loss but are pure markup. `<label for="id">` paired with an input is the single line that makes a form usable with a screen reader or a tap on mobile — labels are not decoration. The `rel="noopener"` attribute on every `target="_blank"` link prevents the opened page from reaching back into the opener's window, a security default the spec did not adopt for years. And `<main>`, `<article>`, `<nav>`, `<header>`, `<footer>` carry real meaning for search engines and accessibility trees that a `<div>` does not. The cheatsheet groups all of this into structure, text, forms, media, tables, semantic landmarks and meta so the right section is one click away.
- 65+ HTML tags and elements
- 7 categories from structure to meta
- All form input types covered
- Semantic HTML5 elements
- One-click copy to clipboard
- Includes accessibility best practices
Free. No signup. Your inputs stay in your browser. Ads via Google AdSense (consent required).