WEB DEVELOPMENT REFERENCE
The Complete
HTML Reference
Every element, attribute, and pattern you need
for modern HTML5 markup — from document
structure to forms, semantics, and accessibility.
A comprehensive cheat sheet · 2026 Edition
Table of Contents
01 Introduction & Document Structure
02 The Head Section & Metadata
03 Text Content Elements
04 Inline Text Semantics
05 Lists
06 Links & Navigation
07 Images & Multimedia
08 Tables
09 Forms & Input Elements
10 Semantic HTML5 Layout Elements
11 Global Attributes
12 Accessibility & ARIA Basics
13 HTML Entities
14 Full Boilerplate Template
15 Quick Reference: All Tags at a Glance
01. Introduction & Document Structure
HTML (HyperText Markup Language) is the standard markup language for building web pages. It describes the structure and content of a page
using a system of nested elements, each typically made of an opening tag, content, and a closing tag.
Basic Anatomy of an Element
<tagname attribute="value">Content goes here</tagname>
Part Description
Opening tag Marks the start of an element, e.g. <p>
Attribute Extra information inside the opening tag, e.g. class="intro"
Content Text or nested elements between the tags
Closing tag Marks the end of an element, e.g. </p>
Void element Self-closing, no content or closing tag, e.g. <br>
The Minimal HTML Document
Every HTML5 document follows the same basic skeleton:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page Title</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
Document Structure Tags
Tag Purpose
<!DOCTYPE html> Declares the document as HTML5; must be the first line
<html> Root element wrapping the entire page
<head> Container for metadata not displayed on the page
<body> Container for all visible page content
Note: HTML is not case-sensitive, but the convention is to write all tags and attributes in lowercase for readability and consistency.
02. The Head Section & Metadata
The <head> element holds information used by the browser, search engines, and social platforms — none of it renders directly on the page.
Common Head Elements
Tag Purpose Example
<title> Sets the browser tab title <title>My Site</title>
<meta> void Defines metadata: charset, viewport, description <meta name="description" content="...">
<link> void Links external resources like stylesheets or icons <link rel="stylesheet" href="[Link]">
<style> Embeds internal CSS rules <style>body{margin:0}</style>
<script> Embeds or links JavaScript <script src="[Link]"></script>
<base> void Sets a base URL for all relative links on the page <base href="[Link]
<noscript> Fallback content when JavaScript is disabled <noscript>Enable JS</noscript>
Essential Meta Tags
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A short page summary">
<meta name="author" content="Your Name">
<meta property="og:title" content="Page Title">
<meta property="og:image" content="[Link]">
Tip: The viewport meta tag is required for responsive design — without it, mobile browsers render the page at desktop width and scale it down.
03. Text Content Elements
Headings
Six levels of headings exist, <h1> through <h6> , used to create a hierarchical outline of the page. Use only one <h1> per page for the main title.
<h1>Main Title</h1>
<h2>Section Heading</h2>
<h3>Subsection Heading</h3>
Paragraphs and Breaks
Tag Purpose
<p> A paragraph of text
<br> void A single line break inside text
<hr> void A thematic break, rendered as a horizontal line
Quotations & Code
Tag Purpose
<blockquote> An extended quotation, often indented
<q> A short inline quotation, rendered with quote marks
<cite> The title of a referenced creative work
<pre> Preformatted text; preserves whitespace and line breaks
<code> A fragment of computer code
<kbd> Represents user keyboard input
<samp> Sample output from a program
<var> A variable in a mathematical or programming context
Generic Containers
Tag Purpose
<div> A generic block-level container with no semantic meaning
<span> A generic inline container with no semantic meaning
04. Inline Text Semantics
These elements add meaning or styling to runs of text within a block-level element.
Tag Purpose
<strong> Strong importance, typically bold
<em> Stress emphasis, typically italic
<b> Stylistically bold text, no extra importance
<i> Stylistically offset text (e.g. a term, a thought)
<u> Text with a non-textual annotation, rendered underlined
<mark> Highlighted text, relevant to the current context
<small> Side comments and fine print
<del> Text that has been deleted from a document
<ins> Text that has been inserted into a document
<sub> Subscript text
<sup> Superscript text
<abbr> An abbreviation; use the title attribute for the full term
<time> A specific date or time; use the datetime attribute
<wbr> void A suggested word break opportunity
<p>This is <strong>very important</strong>
and this is <em>emphasized</em>.
The event is <time datetime="2026-06-20">June 20</time>.</p>
05. Lists
Unordered & Ordered Lists
<ul>
<li>First item</li>
<li>Second item</li>
</ul>
<ol start="1">
<li>Step one</li>
<li>Step two</li>
</ol>
Description Lists
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>
Tag Purpose
<ul> Unordered (bulleted) list container
<ol> Ordered (numbered) list container
<li> A single list item
<dl> Description list container
<dt> A term in a description list
<dd> The description of a term
Key List Attributes
Attribute Applies To Purpose
type <ol> Numbering style: 1 , A , a , I , i
start <ol> The starting number
reversed <ol> Counts down instead of up
value <li> Overrides the number of an individual item
06. Links & Navigation
<a href="[Link] Example</a>
<a href="[Link]" target="_blank" rel="noopener">Open in new tab</a>
<a href="#section2">Jump to Section 2</a>
<a href="[Link] us</a>
<a href="[Link] us</a>
Anchor Attributes
Attribute Purpose
href The destination URL, anchor, or protocol link
target Where to open: _self , _blank , _parent , _top
rel Relationship to target, e.g. noopener , nofollow
download Prompts the browser to download the linked file
hreflang The language of the linked resource
Tip: Always pair target="_blank" with rel="noopener" to prevent the new page from accessing the originating window object.
07. Images & Multimedia
Images
<img src="[Link]" alt="A description of the photo" width="600" height="400" loading="lazy">
Responsive Images
<picture>
<source media="(min-width: 800px)" srcset="[Link]">
<source media="(min-width: 400px)" srcset="[Link]">
<img src="[Link]" alt="Fallback image">
</picture>
Audio & Video
<video controls width="640" poster="[Link]">
<source src="movie.mp4" type="video/mp4">
Your browser does not support video.
</video>
<audio controls>
<source src="song.mp3" type="audio/mpeg">
</audio>
Embedding & Vector Graphics
Tag Purpose
<iframe> Embeds another HTML document, e.g. a map or video
<embed> void Embeds external content via a plugin
<object> Embeds external resources like PDFs
<svg> Inline scalable vector graphics
<canvas> A drawable region controlled via JavaScript
<figure> Self-contained media with an optional caption
<figcaption> The caption for a <figure>
<figure>
<img src="[Link]" alt="Sales chart">
<figcaption>Figure 1: Quarterly sales</figcaption>
</figure>
Accessibility: The alt attribute is required on every <img> . Use an empty alt="" for purely decorative images so screen readers skip them.
08. Tables
<table>
<caption>Monthly Budget</caption>
<thead>
<tr>
<th>Category</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>Rent</td>
<td>$1,200</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td>$1,200</td>
</tr>
</tfoot>
</table>
Table Tags
Tag Purpose
<table> The table container
<caption> A title describing the table
<thead> Groups the header row(s)
<tbody> Groups the main body rows
<tfoot> Groups the footer row(s)
<tr> A table row
<th> A header cell, bold and centered by default
<td> A standard data cell
<colgroup> / <col> Defines column-level styling without repeating it per cell
Spanning Cells
<td colspan="2">Spans two columns</td>
<td rowspan="2">Spans two rows</td>
09. Forms & Input Elements
Basic Form Structure
<form action="/submit" method="POST">
<label for="email">Email</label>
<input type="email" id="email" name="email" required>
<button type="submit">Subscribe</button>
</form>
Form Container Tags
Tag Purpose
<form> Wraps a set of interactive controls for data submission
<fieldset> Groups related fields with a visible border
<legend> A caption for a <fieldset>
<label> A caption tied to a specific control via for
<datalist> A list of pre-defined autocomplete options for an input
<output> Displays the result of a calculation
All Input Types
Type Description
text A single-line free text field
password A text field that masks characters
email Validates for a properly formatted email address
number Numeric input with optional min / max / step
tel A telephone number, no built-in format validation
url Validates for a properly formatted URL
search A text field styled for search queries
date A date picker (YYYY-MM-DD)
time A time picker (HH:MM)
datetime-local Combined date and time picker
month A month and year picker
week A week-of-year picker
color A native color picker
range A slider between min and max
checkbox A toggle that can be checked or unchecked
radio One choice from a group sharing the same name
file A file picker; add accept to restrict types
hidden An invisible field submitted with the form
submit A button that submits the form
reset A button that resets all fields to default
button A generic button with no default behavior
image A graphical submit button
Other Form Controls
<select name="country">
<optgroup label="North America">
<option value="us">United States</option>
<option value="ca">Canada</option>
</optgroup>
</select>
<textarea name="message" rows="4" cols="40"></textarea>
<progress value="70" max="100"></progress>
<meter value="0.6"></meter>
Key Validation Attributes
Attribute Purpose
required The field must be filled before submission
placeholder Faint hint text shown when the field is empty
min / max Minimum and maximum allowed values
minlength / maxlength Minimum and maximum character count
pattern A regular expression the value must match
step The increment allowed for numeric/date inputs
disabled Greys out and disables the control
readonly Prevents editing but still submits the value
autofocus Focuses the field automatically on page load
autocomplete Hints whether the browser may autofill the field
multiple Allows multiple values (files, emails)
10. Semantic HTML5 Layout Elements
Semantic elements describe the role of a region of the page, improving accessibility and SEO compared to generic <div> containers.
<header>
<nav>...</nav>
</header>
<main>
<article>
<section>...</section>
</article>
<aside>...</aside>
</main>
<footer>...</footer>
Tag Purpose
<header> Introductory content or navigation for a page or section
<nav> A block of primary navigation links
<main> The single dominant content of the page (one per page)
<article> Self-contained, independently distributable content
<section> A thematic grouping of content, usually with a heading
<aside> Content tangentially related to the surrounding content
<footer> Footer content for a page or section
<details> A disclosure widget that can be toggled open/closed
<summary> The visible label for a <details> element
<dialog> A native modal or non-modal dialog box
<template> Holds markup not rendered until cloned via JavaScript
<address> Contact information for the author of a page or article
Disclosure Widget Example
<details>
<summary>Click to expand</summary>
<p>Hidden content revealed on click.</p>
</details>
Rule of thumb: Use <section> when the content needs its own heading; use a plain <div> when you just need a styling hook with no semantic
meaning.
11. Global Attributes
Global attributes can be applied to any HTML element.
Attribute Purpose
id A unique identifier for the element on the page
class One or more space-separated CSS class names
style Inline CSS declarations
title Advisory tooltip text shown on hover
lang The language of the element's content
dir Text direction: ltr , rtl , or auto
hidden Hides the element from rendering entirely
tabindex Controls keyboard tab order
data-* Custom data attributes, e.g. data-user-id="42"
contenteditable Makes the element directly editable by the user
draggable Marks the element as draggable
spellcheck Toggles browser spell-checking on the element
translate Hints whether content should be translated by tools
Custom Data Attributes
<div data-user-id="42" data-role="admin">Jane</div>
<script>
// Accessed in JS as [Link]
const id = [Link];
</script>
12. Accessibility & ARIA Basics
Accessible Rich Internet Applications (ARIA) attributes supplement HTML semantics for assistive technologies like screen readers.
Core ARIA Attributes
Attribute Purpose
role Defines what an element is or does, e.g. role="button"
aria-label Provides an accessible name when no visible text exists
aria-labelledby Points to another element's id to use as the label
aria-describedby Points to an element providing extended description
aria-hidden Hides decorative content from assistive technology
aria-live Announces dynamic content changes: polite or assertive
aria-expanded Indicates whether a collapsible region is open
aria-current Marks the current item in a set, e.g. active nav link
aria-disabled Indicates an element is perceivable but inoperable
Accessibility Checklist
Practice Why it matters
Use semantic elements first Native elements carry built-in accessibility behavior
Always include alt on images Screen readers need a text alternative
Label every form control So assistive tech can announce its purpose
Maintain heading order Screen reader users navigate page structure by heading
Ensure sufficient color contrast Benefits low-vision and color-blind users
Make interactive elements keyboard-operable Not all users use a mouse or touch screen
13. HTML Entities
Entities represent reserved or hard-to-type characters in HTML source.
Character Entity Name Entity Number
< < <
> > >
& & &
" " "
' ' '
(non-breaking space)  
© © ©
® ® ®
™ ™ ™
€ € €
— — —
… … …
← ← ←
→ → →
14. Full Boilerplate Template
A production-ready starting point covering the most common needs of a real project.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Page description">
<title>My Page</title>
<link rel="icon" href="[Link]">
<link rel="stylesheet" href="[Link]">
</head>
<body>
<header>
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
</nav>
</header>
<main>
<section>
<h1>Welcome</h1>
<p>Page content goes here.</p>
</section>
</main>
<footer>
<p>© 2026 My Company</p>
</footer>
<script src="[Link]" defer></script>
</body>
</html>
15. Quick Reference: All Tags at a Glance
Document & Metadata
Tag Tag Tag
<html> <head> <body>
<title> <meta> <link>
<style> <base> <script>
Text & Sectioning
Tag Tag Tag
<h1> – <h6> <p> <div>
<span> <br> <hr>
<strong> <em> <mark>
<small> <del> <ins>
<sub> <sup> <abbr>
<blockquote> <q> <cite>
<pre> <code> <time>
Lists & Tables
Tag Tag Tag
<ul> <ol> <li>
<dl> <dt> <dd>
<table> <tr> <td> / <th>
<thead> <tbody> <tfoot>
Media & Embedding
Tag Tag Tag
<img> <picture> <source>
<video> <audio> <track>
<iframe> <canvas> <svg>
<figure> <figcaption> <object>
Forms
Tag Tag Tag
<form> <input> <textarea>
<select> <option> <optgroup>
<button> <label> <fieldset>
<legend> <datalist> <output>
<progress> <meter>
Semantic Layout
Tag Tag Tag
<header> <nav> <main>
<article> <section> <aside>
<footer> <details> <summary>
<dialog> <template> <address>
The Complete HTML Reference · Compiled as a comprehensive web development cheat sheet.