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]
>Visit 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]
>Email us</
a
>
<
a
href
=
"[Link]
>Call 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.