Document Structure

<!DOCTYPE html>Required first line — declares HTML5 document

<html lang="en">Root element; always set lang attribute

<head>Container for metadata — not rendered on page

<body>Contains all visible page content

<meta charset="UTF-8">Character encoding — place first in <head>

<meta name="viewport" content="width=device-width, initial-scale=1">Responsive viewport — essential for mobile

<title>Page Title</title>Browser tab title and SEO title

<link rel="stylesheet" href="style.css">Link external CSS file

<script src="app.js" defer></script>Load JS file; defer = after DOM parsed

Text & Headings

<h1> – <h6>Heading levels 1–6; only one

per page

<p>Paragraph of text

<strong>Important text (bold, semantic)

<em>Emphasized text (italic, semantic)

<b>Bold text (presentational, no semantic meaning)

<i>Italic text (presentational, or alternate voice/mood)

<br>Line break (void element — no closing tag)

<hr>Thematic break / horizontal rule

<blockquote cite="url">Block-level quotation; cite attribute = source

<q>Inline quotation (browser adds quotation marks)

<pre>Preformatted text — preserves spaces and line breaks

<code>Inline code snippet

<kbd>Keyboard input (e.g. Ctrl+S)

<mark>Highlighted / marked text

<small>Fine print, side comments

<del>Deleted text (renders with strikethrough)

<ins>Inserted text (renders underlined)

<sub>Subscript (H₂O)

<sup>Superscript (E=mc²)

<abbr title="HyperText">Abbreviation with expansion on hover

<span>Generic inline container for styling

<div>Generic block-level container

Links & Images

<a href="url">text</a>Hyperlink to a URL

<a href="#section">Anchor link to element with matching id

<a href="url" target="_blank" rel="noopener noreferrer">Open in new tab — rel="noopener" required for security

<a href="mailto:me@example.com">Opens default email client

<a href="tel:+15551234567">Opens phone dialer on mobile

<a download="filename">Force file download instead of navigation

<img src="url" alt="description">Image — alt is required for accessibility

<img src="url" width="800" height="600">Include dimensions to prevent layout shift (CLS)

<img src="url" loading="lazy">Defer loading until image is near viewport

<figure>Self-contained content (image, chart, code)

<figcaption>Caption for the parent <figure> element

<picture>Art direction / responsive images container

<source srcset="img.webp" type="image/webp">Alternate image source inside <picture>

Lists

<ul>Unordered (bulleted) list

<ol>Ordered (numbered) list

<ol start="3">Ordered list starting at number 3

<ol reversed>Ordered list counting down

<li>List item — used inside <ul> or <ol>

<dl>Description list (term + definition pairs)

<dt>Description term

<dd>Description / definition

Tables

<table>Table container

<caption>Table caption — place immediately after <table>

<thead>Header row group

<tbody>Body row group

<tfoot>Footer row group

<tr>Table row

<th scope="col">Header cell; scope="col" or scope="row" for accessibility

<td>Data cell

<td colspan="2">Cell spans 2 columns

<td rowspan="3">Cell spans 3 rows

Forms & Inputs

<form action="/path" method="post">Form — method is get or post

<label for="inputId">Label</label>Linked label — for= must match input id=

<input type="text">Single-line text input

<input type="email">Email input (browser-validated format)

<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="10">Slider control

<input type="checkbox">Checkbox — use name= for groups

<input type="radio" name="group">Radio button — share name= within group

<input type="date">Date picker

<input type="color">Colour picker

<input type="file" accept=".pdf,.jpg">File upload — accept= filters by type

<input type="hidden" name="token" value="...">Hidden field (e.g. CSRF token)

<input type="search">Search field (may show clear button)

<textarea rows="4">Multi-line text input

<select name="choice">Dropdown select

<select multiple>Multi-select list

<option value="val">Label</option>Dropdown option — value= sent on submit

<optgroup label="Group">Group options inside <select>

<button type="submit">Submit button (preferred over input type=submit)

<button type="button">Non-submitting button for JS actions

<button type="reset">Reset all form fields to defaults

<fieldset>Group related form controls

<legend>Caption for the parent <fieldset>

requiredField must be filled before submit

placeholder="Hint text"Ghost hint text — not a substitute for <label>

disabledDisables field — value not submitted

readonlyField not editable — value is submitted

autofocusFocus this field on page load

autocomplete="off"Disable browser autocomplete for this field

pattern="[A-Za-z]{3}"Regex validation pattern

<input list="opts"><datalist id="opts">Text input with autocomplete suggestions

Semantic Elements

<header>Page header or section header

<nav>Navigation links section

<main>Primary content — only one per page

<article>Self-contained, independently distributable content

<section>Thematic grouping of content with a heading

<aside>Tangentially related content (sidebar, callout)

<footer>Page footer or section footer

<time datetime="2024-12-31">Machine-readable date/time

<address>Contact information for nearest <article> or body

<details>Disclosure widget — toggle open/closed

<summary>Visible label for <details> toggle

<dialog>Dialog box or modal

<template>Inert HTML fragment — cloned by JavaScript

Global Attributes

id="unique"Unique identifier — used for anchors, JS, CSS

class="name1 name2"CSS class list (space-separated)

style="color: red;"Inline CSS styles

data-key="value"Custom data attribute — accessible via JS as dataset.key

hiddenHide element (equivalent to display:none)

tabindex="0"0 = natural tab order; -1 = focusable by JS only

title="Tooltip"Tooltip text on hover

lang="fr"Override document language for this element

aria-label="Description"Accessible name for screen readers

aria-hidden="true"Hide decorative element from screen readers

role="button"Override implicit ARIA role

contenteditableMake element editable by the user

draggable="true"Enable HTML drag-and-drop API on element

spellcheck="false"Disable spell check on contenteditable or input

translate="no"Tell translation tools not to translate this text

HTML Cheatsheet