Search
Type in the search box to filter snippets.
DEVELOPER TOOLS · FREE ONLINE TOOL
HTML Cheat Sheet
Document structure, forms, tables, semantic tags, and meta tags with copy-ready snippetsFree HTML cheat sheet: 60+ copy-ready snippets for structure, text, links, images, forms, tables, semantic tags, and meta tags. Searchable and printable.
// HTML CHEAT SHEET · GET STARTED
Use HTML Cheat Sheet
Document structure, forms, tables, semantic tags, and meta tags with copy-ready snippets
Advertisement
63 of 63 entries shown. Click Copy on any snippet.
Document Structure
Doctype · First line of every HTML5 document
<!DOCTYPE html>HTML root · lang helps screen readers and SEO
<html lang="en">...</html>Head · Metadata, title, and styles go here
<head>...</head>Body · All visible content lives here
<body>...</body>Title · Shown in the browser tab and search results
<title>My Page</title>Viewport meta · Makes the page responsive on mobile
<meta name="viewport" content="width=device-width, initial-scale=1">Text Content
Headings · One h1 per page, then descend in order
<h1>Main</h1> ... <h6>Smallest</h6>Paragraph · Block of text
<p>Some text.</p>Bold · Semantic bold (screen readers stress it)
<strong>Important</strong>Italic · Semantic italic
<em>Emphasis</em>Line break · Single line break, no closing tag
Line one<br>Line twoHorizontal rule · Thematic break between sections
<hr>Blockquote · Quoted content, often with cite
<blockquote>Quote text</blockquote>Code inline · Inline code fragment
<code>const x = 1;</code>Preformatted · Preserves whitespace and line breaks
<pre>line 1
line 2</pre>Links and Navigation
Link · Basic hyperlink
<a href="https://example.com">Visit</a>New tab link · rel=noopener is a security must
<a href="..." target="_blank" rel="noopener">Open</a>Anchor link · Jumps to id=section on the page
<a href="#section">Jump</a>Email link · Opens the mail client
<a href="mailto:hi@example.com">Email</a>Phone link · Tappable on mobile
<a href="tel:+1234567890">Call</a>Nav landmark · Wraps primary navigation links
<nav>...</nav>Images and Media
Image · alt text is required for accessibility
<img src="photo.jpg" alt="A cat">Responsive image · Browser picks the right size
<img srcset="s.jpg 480w, m.jpg 800w" sizes="(max-width: 600px) 480px, 800px" src="m.jpg" alt="...">Figure · Image with a caption
<figure><img ...><figcaption>Caption</figcaption></figure>Video · controls adds play/pause UI
<video controls src="clip.mp4"></video>Audio · Audio player
<audio controls src="song.mp3"></audio>Lazy loading · Defers offscreen images
<img src="..." alt="..." loading="lazy">Lists
Unordered list · Bulleted list
<ul><li>One</li><li>Two</li></ul>Ordered list · Numbered list
<ol><li>First</li><li>Second</li></ol>Start number · Begin numbering at 5
<ol start="5">...</ol>Description list · Term-definition pairs
<dl><dt>Term</dt><dd>Definition</dd></dl>Tables
Basic table · Rows with header and data cells
<table><tr><th>Name</th></tr><tr><td>Ada</td></tr></table>Table sections · Header vs body rows
<table><thead>...</thead><tbody>...</tbody></table>Caption · Accessible table title
<table><caption>Scores</caption>...</table>Colspan · Cell spans two columns
<td colspan="2">Wide cell</td>Forms
Form · Wraps all form controls
<form action="/submit" method="post">...</form>Label · Clicking the label focuses the input
<label for="email">Email</label><input id="email">Text input · Single-line text field
<input type="text" name="q" placeholder="Search">Email input · Built-in email validation
<input type="email" required>Password · Masked input
<input type="password" autocomplete="current-password">Number · Numeric input with range
<input type="number" min="1" max="10">Checkbox · Toggle option
<input type="checkbox" checked>Radio group · Same name groups options
<input type="radio" name="plan" value="free">Select · Dropdown menu
<select><option>One</option></select>Textarea · Multi-line text
<textarea rows="4"></textarea>Button · type=submit sends the form
<button type="submit">Send</button>Required · Browser blocks empty submit
<input required>Semantic Layout
Header · Intro for page or section
<header>...</header>Main · The primary content, once per page
<main>...</main>Section · Thematic grouping with a heading
<section>...</section>Article · Self-contained content like a post
<article>...</article>Aside · Sidebar or tangential content
<aside>...</aside>Footer · Closing content, links, copyright
<footer>...</footer>Div vs span · Generic containers, no meaning
<div>block</div> <span>inline</span>Meta Tags and Head
Charset · Must be first in head
<meta charset="utf-8">Description · Search result snippet source
<meta name="description" content="...">Open Graph · Title for social shares
<meta property="og:title" content="...">OG image · Preview image for shares
<meta property="og:image" content="https://.../img.jpg">Twitter card · Large preview on X/Twitter
<meta name="twitter:card" content="summary_large_image">Favicon · Browser tab icon
<link rel="icon" href="/favicon.ico">Stylesheet · Attach CSS
<link rel="stylesheet" href="/style.css">Script · defer runs after HTML parses
<script src="/app.js" defer></script>Canonical · Preferred URL for SEO
<link rel="canonical" href="https://example.com/page">Advertisement
How to use the HTML Cheat Sheet
Copy
Click Copy on any snippet to grab the code.
Print the page for a desk reference.
// HTML CHEAT SHEET · ABOUT THIS TOOL
About the HTML Cheat Sheet
The HTML you write every day: document structure, text formatting, links, images and media, lists, tables, forms with accessible labels, semantic layout tags, and the meta tags that control SEO and social sharing. Every entry is a valid snippet with a one-line explanation.
Search to jump to the tag you need, copy with one click, and print the page for an offline reference.
HTML Cheat Sheet FAQs
A div is a generic container with no meaning. A section is semantic: it marks a thematic grouping of content and should almost always contain a heading. Use semantic tags for accessibility and SEO.
tools-guide
SSL Certificate Checker: Verify Expiry and Validity Free
Free SSL certificate checker: verify any website's certificate issuer, expiry date, days remaining, covered domains and fingerprint. Avoid expiry outages.
Read article →
tools-guide
WHOIS Lookup: Find Out Who Owns Any Domain Instantly
Free WHOIS lookup for any domain. Check the registrar, registration and expiry dates, name servers and the full WHOIS record instantly, no sign-up needed.
Read article →