📖 Guide

HTML — Complete Reference

Comprehensive HTML cheat sheet covering document structure, text content, forms, media, semantic elements, accessibility, and more.

142 commands across 10 categories

Document StructureText ContentLinks & NavigationImages & MediaForms & InputTablesSemantic ElementsMeta & HeadAttributesAccessibility

Document Structure

CommandDescription
<!DOCTYPE html>
HTML5 document type declaration (must be first line)
<html lang="en">
Root element with language attribute
<head>
Contains metadata, links, scripts, and title
<body>
Contains all visible page content
<title>Page Title</title>
Set the page title (shown in browser tab)
<link rel="stylesheet" href="style.css">
Link an external stylesheet
<script src="app.js"></script>
Link an external JavaScript file
<script defer src="app.js"></script>
Load script after HTML parsing (recommended)
<script type="module" src="app.js"></script>
Load script as ES module (deferred by default)
<noscript>JS required</noscript>
Fallback content when JavaScript is disabled
<!-- comment -->
HTML comment (not rendered)

Text Content

CommandDescription
<h1> to <h6>
Heading levels (h1 = most important)
<p>
Paragraph
<br>
Line break
<hr>
Horizontal rule (thematic break)
<strong>
Strong importance (typically bold)
<em>
Emphasis (typically italic)
<b>
Bold text (no extra importance)
<i>
Italic text (alternative voice, technical terms)
<u>
Underlined text (annotated as misspelled)
<s>
Strikethrough (no longer relevant)
<mark>
Highlighted/marked text
<small>
Small print / side comments
<sub> / <sup>
e.g. H<sub>2</sub>O, x<sup>2</sup>
Subscript / Superscript
<code>
Inline code
<pre>
Preformatted text (preserves whitespace)
<blockquote cite="url">
Block quotation with optional source
<q>
Inline quotation (browser adds quotes)
<abbr title="full">
e.g. <abbr title="HyperText Markup Language">HTML</abbr>
Abbreviation with expansion
<cite>
Title of a creative work
<kbd>
e.g. Press <kbd>Ctrl</kbd>+<kbd>C</kbd>
Keyboard input

Images & Media

CommandDescription
<img src="img.jpg" alt="description">
Image with alt text (required for accessibility)
<img loading="lazy">
Lazy load image (loads when near viewport)
<img srcset="sm.jpg 480w, lg.jpg 1024w" sizes="(max-width: 600px) 480px, 1024px">
Responsive image with multiple sources
<picture>
e.g. <picture><source media="(min-width: 800px)" srcset="lg.jpg"><img src="sm.jpg" alt=""></picture>
Container for multiple image sources
<video src="vid.mp4" controls>
Video with playback controls
<video autoplay muted loop playsinline>
Autoplaying background video
<audio src="sound.mp3" controls>
Audio player with controls
<source src="vid.webm" type="video/webm">
Alternative media source
<figure> / <figcaption>
e.g. <figure><img src="chart.png" alt="Sales chart"><figcaption>Q1 Sales</figcaption></figure>
Figure with caption
<canvas id="c" width="400" height="300">
Drawing surface for JavaScript graphics
<svg viewBox="0 0 100 100">
Scalable Vector Graphics container
<iframe src="url" title="desc">
Embed external content (use title for a11y)

Forms & Input

CommandDescription
<form action="/submit" method="POST">
Form element with action and method
<input type="text" name="field">
Text input
<input type="email">
Email input (with validation)
<input type="password">
Password input (masked)
<input type="number" min="0" max="100" step="1">
Number input with constraints
<input type="range" min="0" max="100">
Slider input
<input type="date">
Date picker
<input type="checkbox">
Checkbox
<input type="radio" name="group">
Radio button (same name = same group)
<input type="file" accept=".pdf,.jpg" multiple>
File upload input
<input type="hidden" name="token" value="abc">
Hidden input (not visible)
<input type="search">
Search input (may show clear button)
<input type="color">
Color picker
<textarea rows="4" cols="50">
Multi-line text input
<select> / <option>
e.g. <select><option value="a">A</option></select>
Dropdown select menu
<label for="inputId">
Label associated with input (click focuses input)
<fieldset> / <legend>
Group related form controls with a caption
<button type="submit">Send</button>
Submit button
<input required>
Mark input as required
<input placeholder="Enter name">
Placeholder text
<input pattern="[A-Za-z]{3,}">
Regex validation pattern
<datalist id="opts">
e.g. <input list="opts"><datalist id="opts"><option value="One"></datalist>
Predefined options for input autocomplete
<output>
Result of a calculation or user action

Tables

CommandDescription
<table>
Table container
<thead>
Table header group
<tbody>
Table body group
<tfoot>
Table footer group
<tr>
Table row
<th scope="col">
Table header cell (use scope for accessibility)
<td>
Table data cell
<td colspan="2">
Cell spanning multiple columns
<td rowspan="3">
Cell spanning multiple rows
<caption>
Table caption (describes the table)
<colgroup> / <col>
Group columns for styling

Semantic Elements

CommandDescription
<header>
Introductory content or navigation container
<footer>
Footer for section or page
<main>
Main content of the document (only one per page)
<nav>
Navigation links section
<article>
Self-contained content (blog post, comment)
<section>
Thematic grouping of content
<aside>
Sidebar / tangentially related content
<details> / <summary>
e.g. <details><summary>More info</summary><p>Hidden content</p></details>
Collapsible disclosure widget
<dialog>
e.g. <dialog open>Content</dialog>
Modal or non-modal dialog box
<time datetime="2024-01-15">
Machine-readable date/time
<address>
Contact information for author/owner
<template>
Inert HTML template (not rendered until cloned via JS)

Meta & Head

CommandDescription
<meta charset="UTF-8">
Character encoding (always use UTF-8)
<meta name="viewport" content="width=device-width, initial-scale=1">
Responsive viewport meta tag
<meta name="description" content="...">
Page description for SEO
<meta name="robots" content="noindex, nofollow">
Control search engine indexing
<meta property="og:title" content="...">
Open Graph title for social sharing
<meta property="og:image" content="url">
Open Graph image for social sharing
<meta name="theme-color" content="#0066ff">
Browser theme color (mobile)
<link rel="icon" href="favicon.ico">
Favicon
<link rel="preconnect" href="https://fonts.googleapis.com">
Preconnect to required origin (performance)
<link rel="preload" href="font.woff2" as="font" crossorigin>
Preload critical resource
<link rel="canonical" href="https://example.com/page">
Canonical URL to avoid duplicate content
<base href="/app/">
Base URL for all relative URLs in the document

Attributes

CommandDescription
id="unique"
Unique identifier for the element
class="cls1 cls2"
CSS class(es) for styling
style="color: red"
Inline CSS styles
title="tooltip text"
Tooltip on hover
data-*="value"
e.g. <div data-user-id="42">
Custom data attributes
hidden
Hide element from rendering
contenteditable="true"
Make element editable by user
draggable="true"
Make element draggable
spellcheck="false"
Disable spell checking
tabindex="0"
Make element focusable via Tab key
tabindex="-1"
Focusable via JS only (removed from tab order)
lang="en"
Language of element content
dir="rtl"
Text direction (right-to-left)
translate="no"
Prevent translation of element content
autofocus
Automatically focus element on page load
inert
Make element and descendants non-interactive
popover
e.g. <div popover id="pop">Content</div><button popovertarget="pop">Toggle</button>
Popover element (toggleable, ES2024)

Accessibility

CommandDescription
alt="description"
Alternative text for images (required)
alt=""
Empty alt for decorative images (skip by screen readers)
role="button"
ARIA role — define element's purpose
role="navigation"
ARIA role for navigation landmark
aria-label="Close menu"
Accessible label when visible text is insufficient
aria-labelledby="heading-id"
Reference another element as label
aria-describedby="desc-id"
Reference element providing additional description
aria-hidden="true"
Hide element from assistive technology
aria-expanded="false"
Indicate expandable element state
aria-live="polite"
Announce dynamic content changes to screen readers
aria-required="true"
Indicate required form field
aria-current="page"
Indicate current item in navigation
<label for="id">
Associate label with form control (critical for a11y)
skip navigation link
e.g. <a href="#main" class="sr-only">Skip to content</a>
Allow keyboard users to skip to main content

More Guides

🌿
Git Commands
Complete Git command reference — from basics to advanced workflows. Searchable, with examples.
📝
Vim Commands
Complete Vim/Vi command reference — modes, motions, editing, search, and advanced features.
🐳
Docker Commands
Complete Docker & Docker Compose command reference — containers, images, volumes, networks, and orchestration.
🔤
Regex Reference
Complete regular expression reference — syntax, patterns, quantifiers, groups, lookaheads, and common recipes.
🐧
Linux Commands
Complete Linux/Bash command reference — file management, text processing, networking, system admin, and shell scripting.
☸️
Kubernetes Commands
Complete Kubernetes & kubectl command reference — pods, deployments, services, configmaps, and cluster management.
🐍
Python Reference
Complete Python reference — syntax, data structures, string methods, file I/O, comprehensions, and common patterns.
🗃️
SQL Reference
Complete SQL reference — queries, joins, aggregation, subqueries, indexes, and database management.
🌐
Nginx Reference
Complete Nginx configuration reference — server blocks, locations, proxying, SSL, load balancing, and caching.
🔐
SSH Commands
Complete SSH reference — connections, key management, tunneling, config, SCP/SFTP, and security hardening.
👷
Jenkins Reference
Complete Jenkins reference — pipeline syntax, Jenkinsfile, plugins, CLI, agents, and CI/CD patterns.
📨
HTTP Headers Reference
Complete HTTP headers reference — request headers, response headers, caching, security, CORS, and content negotiation. Searchable, with examples.
🐘
PostgreSQL Reference
Comprehensive PostgreSQL reference — from connection basics to advanced features like JSONB, full-text search, window functions, and performance tuning.
⚡
Async Patterns Reference
Multi-language async/concurrency patterns — JavaScript, Python, Go, Rust, Java, and universal concurrency patterns.
📡
Protobuf & gRPC Reference
Comprehensive reference for Protocol Buffers (proto3) and gRPC — message definitions, services, streaming, and common patterns.
📚
JS Array Methods
Complete JavaScript Array methods reference — creating, searching, transforming, sorting, iterating, and common patterns. Searchable, with examples.
🌊
Tailwind CSS Reference
Complete Tailwind CSS reference — layout, spacing, typography, colors, responsive design, states, and common patterns. Searchable, with examples.
◈
GraphQL Reference
Complete GraphQL reference — schema definition, types, queries, mutations, directives, fragments, and common patterns. Searchable, with examples.
💻
VS Code Shortcuts
Complete VS Code keyboard shortcuts — editing, navigation, search, multi-cursor, terminal, debug, and more. Searchable, with Cmd/Ctrl notation.
🔲
CSS Grid Reference
Complete CSS Grid reference — container properties, item placement, grid functions, and common layout patterns. Searchable, with examples.
📦
CSS Flexbox Reference
Complete CSS Flexbox reference — container properties, item properties, and common layout patterns. Searchable, with examples.
⚛️
React Hooks Reference
Complete React Hooks reference — useState, useEffect, useContext, custom hooks, and common patterns. Searchable, with examples.
🔷
TypeScript Reference
Complete TypeScript reference — types, interfaces, generics, utility types, and advanced patterns. Searchable, with examples.
☁️
AWS CLI Reference
Complete AWS CLI reference — EC2, S3, IAM, Lambda, ECS, RDS, CloudFormation, and common operations.
🐹
Go Reference
Complete Go (Golang) reference — syntax, types, functions, concurrency, error handling, and common patterns.
💠
PowerShell Reference
Complete PowerShell reference — cmdlets, pipelines, scripting, file operations, remote management, and Active Directory.
💾
Redis Commands
Complete Redis command reference — strings, hashes, lists, sets, sorted sets, pub/sub, transactions, and server management.
🏗️
Terraform Commands
Complete Terraform reference — init, plan, apply, state management, modules, workspaces, and HCL syntax.
⚙️
Ansible Commands
Complete Ansible reference — playbooks, modules, inventory, roles, vault, and ad-hoc commands.
🟨
JavaScript
Complete JavaScript reference — variables, types, operators, strings, arrays, objects, functions, async, DOM, ES6+, and more.
🎨
CSS
Complete CSS reference — selectors, box model, positioning, typography, animations, media queries, custom properties, and more.

📖 Free, searchable command reference. Bookmark this page for quick access.