HTML semantics cheat sheet
Document
<title>
Second most important piece of content.
Shown in the browser tab & search results.
Should be unique for every page on the site.
<link href="…" rel="stylesheet">
For linking CSS and other resources like feeds.
href is the path the file.
rel has different values for other resources.
<header>
When inside <body> it's the website masthead.
When inside <article> it's the most important information.
<footer>
When inside <body> it's the website footer.
When inside <article> it's the least important information.
<main>
Primary content of the page.
<nav>
Defines a group a navigation links.
<article>
A piece of content that's independent.
Could be removed from this website and still make sense.
<section>
A group in a series of related content pieces.
<aside>
Secondary content not required to understand the main content.
CSS link tag
<link href="css/main.css" rel="stylesheet">
Navigation inside header
<header>
<nav>
<ul>
<li><a href="#">Stegosaurus</a></li>
<li><a href="#">Triceratops</a></li>
<li><a href="#">Ankylosaurus</a></li>
</ul>
</nav>
</header>
Main content groups
<body>
<header>
<nav>…</nav>
</header>
<main>
<h1>Dinos-R-Us</h1>
</main>
<footer>
<p>© 2063 Dinos-R-Us</p>
</footer>
</body>
Lists
<ul>
An unordered list—the order of items isn't important.
Can only have <li> elements as direct children.
<ol>
An ordered list—the order of the items is important.
Could be alphabetical, numerical, best to worst, etc.
Can only have <li> elements as direct children.
<li>
A single list item.
Must be inside a <ul> , <ol> or <menu> .
Can have most other elements inside it.
<dl>
A description list—a grouping of terms and definitions.
Words & definitions, titles & summaries, data points, etc.
Can only have <dt> and <dd> elements as direct children.
<dt>
Description title, the term of the item.
Must come before the <dd> .
<dd>
Description definition, the data, or text of the item.
Can be multiple <dd> tags underneath one <dt> .
Unordered list
<ul>
<li>Tyrannosaurus</li>
<li>Spinosaurus</li>
<li>Velociraptor</li>
</ul>
Ordered list
<ol>
<li>Mercury</li>
<li>Venus</li>
<li>Earth</li>
<li>Mars</li>
</ol>
Description list
<dl>
<dt>Length</dt>
<dd>2.3 m</dd>
<dt>Weight</dt>
<dd>4 tonnes</dd>
</dl>
<menu>
For semantically marking up a web application's toolbar of buttons.
The <menu> tag also uses <li> tags inside—one for each toolbar button.
You may still have to remove the bullets.
Menutoolbar list
<menu>
<li><button>Like</button></li>
<li><button>Share</button></li>
<li><button>Comment</button></li>
</menu>
Text
<a href="…">
For making hyperlinks.
href is the path to where the link should go.
<h1>
The most important piece of content on the page.
On the homepage this should be the company's name.
On inside pages this should be the page title.
<h2> , <h3> , <h4> , <h5> , <h6>
Content headings, each a sub-heading of the one above.
The <h2> is a sub-heading of <h1> , <h3> a sub-heading of <h2> , etc.
<hgroup>
Allows you to group multiple headings together and have them semantically treated as a single heading.
It's primary purpose is for subheadings.
<p>
A generic paragraph of text.
<blockquote>
A large, stand alone quote from another source.
<cite>
A citation for another source, often used with quotations.
A person's name, a URL, a book, a movie title, etc.
<q>
A small quotation embedded within other content.
<em>
A string of emphasized, slightly more important text.
Screen readers will change their voice for this text.
<strong>
A string of highly emphasized, much more important text.
Screen readers will change their voice for this text.
<ins datetime="…">
Content that was inserted after the document was published.
datetime defines when it was added.
<del datetime="…">
Content that was deleted after the document was published.
datetime defines when it was removed.
<abbr title="…">
An acronym or abbreviation, like “HTML”, “CSS”, etc.
title contains the expanded version, like “Hypertext Markup Language”.
<dfn>
A definition of a term on the page.
Should only be used once of the term.
<mark>
Used to highlight a piece of text for reference.
The keywords in a search results page, the current navigation item.
<i>
Defines technical term, a ship name, a book title, a thought, sarcasm, another language.
<b>
Defines a keyword, like product name in a review, a lead sentence in a paragraph.
<s>
Content that's no longer relevant to the document.
Consider if the <del> element is better suited first.
<u>
Labels the text as having a non-textual annotation.
A misspelled word, a Chinese proper name, etc.
<small>
Represents side comments and fine print.
<address>
Contact information, email, tel, postal address, etc.
Blockquotes
<blockquote>
<p>Dinosaurs may be extinct from the face of the planet</p>
<footer>— <cite>Steve Miller</cite></footer>
</blockquote>
Addresses
<address>
Jet Propulsion Laboratory
<br>4800 Oak Grove Drive
<br>Pasadena, California
<br>91109
</address>
Text edits
<p>Launchpad 39A owned by <del datetime="2014-04-14">NASA</del>
<ins datetime="2014-04-14">SpaceX</ins></p>
Heading groups
<hgroup>
<h1>Star Wars</h1>
<h2>The Empire Strikes Back</h2>
</hgroup>
Abbreviations
<abbr title="Star Trek: The Wrath of Khan">ST:TWOK</abbr>
Other languages
<i lang="fr">Bonjour</i>
Images & media
<img src="…" alt="…">
Embeds an image that's important to the content.
src is a path to the image file.
alt describes the image if it cannot be seen.
<figure>
Embeds annotated images, illustrations, photos, code, etc.
Could be moved out of place and would still make sense.
<figcaption>
For adding a caption/annotation to the <figure> .
Must be inside a <figure> element—cannot stand alone.
<picture>
Responsive image insertion—allows developers to provide different images for different contexts.
<video poster="…" autoplay loop muted controls>
For embedding movies into a website.
poster is the path to an image that's displayed before the video plays.
autoplay will hint the video to start automatically.
loop triggers whether the video should repeat or not.
muted can be added to not play sound by default.
controls shows or hides the browser's player buttons.
<audio autoplay loop muted controls>
For embedding sounds into a website.
autoplay will hint the audio to start automatically.
loop triggers whether the audio should repeat or not.
muted can be added to not play sound by default.
controls shows or hides the browser's player buttons.
<source>
Must be inside <picture> , <video> or <audio> to define the different versions of content.
For example, in video it gives paths to the MP4 and WEBM formats.
<track>
Used to pair captions, chapters, etc. with <video> elements.
Basic images
<img src="images/dino.jpg" alt="An beautiful, long-necked Brontosaurus">
Figures & captions
Use only if there's a caption.
<figure>
<img src="images/dino-small.jpg" alt="">
<figcaption>So many dinosaurs I can’t even count!</figcaption>
</figure>
Responsiveimages
See Responsive & retina images for details.
<picture>
<source media="(min-width: 60em)" srcset="images/dino-wide.jpg">
<source media="(min-width: 38em)" srcset="images/dino-rectangle.jpg">
<img src="images/dino-small.jpg" alt="All the dinosaurs!">
</picture>
Data & code
<sub>
Defines text as being subscript.
<sup>
Defines text as being superscript.
<var>
Represents a variable in math or programming.
<time datetime="…">
Marks some text as a time or date.
datetime defines the machine readable version.
<data value="…">
Marks elements as being a numerical piece of information.
value provides the machine readable version.
<meter value="…" min="…" max="…">
Represents a single number in a range of numbers.
value is the current number.
min is the minimum number.
max is the maximum number.
<progress value="…" min="…" max="…">
Represents the current position in a series of steps.
value is the current position.
min is the minimum position.
max is the maximum position.
<code>
Defines a piece of text as a code sample.
<pre>
A piece of text that has a specific formatting, where tabs, whitespaces, etc. should be maintained.
<kbd>
Something a user should type into their computer.
<samp>
Something a user should see output from a computer.
Time
Apollo 11 landed on the moon <time datetime="1969-07-20T20:18">July 20, 1969</time>
Data
Argentinosaurus weighted approximately <data value="90">90 tonnes</data>
Maths
E = mc<sup>2</sup>
Meaningless tags
<div>
Inherits meaning from its children.
Divides content into logical groups, when no other tag is better suited.
Has restrictions on what elements it can be inside.
<span>
Inherits meaning from its children.
Be careful
<br>
Creates a line break that's significant to the content.
Useful in poems and addresses where the division of lines is important.
Do not useto createspacein adesign—use margins andpadding.
<hr>
Represents a thematic break in the content.
For example, a scene change or topic change.
Do not useto createahorizontal line—use CSS borders.
<button>
Represents a interactive, clickable button.
Should be used in forms and with JavaScript.
Donotuse tolink toanotherpage—usethe <a> tag.
<wbr>
Presents an opportunity for the browser to add a line-break if necessary.
Groups strings of text, when no other tag is better suited.
Links
Links that gonowhere
The href always needs a value— # means nowhere.
<a href="#">Nowhere</a>
Links onthe samepage
Add an id="" to the element to jump to, refer to that inside the href
<a href="#herbivores">See the herbivores</a>
<h2 id="herbivores">Herbivores</h2>
Links toother files
Just write the name of the HTML file, also include any folders its inside.
<a href="dinos.html">Dinosaurs</a>
<!-- or in another folder -->
<a href="herbivores/stegosaurus.html">Stegosaurus</a>
Links toother websites
Always start with https:// or less ideally http://
<a href="https://www.wikipedia.org/">Wikipedia</a>
<!-- Adding `rel="external"` for outward-bound sites is good -->
<a href="https://www.wikipedia.org/" rel="external">Wikipedia</a>
Links tophonenumbers
Start with tel: , use international format
<a href="tel:+18005552368">Call Me!</a>
Also send a text message with sms:
<a href="sms:+18005552368&body=Who%20ya%20gonna%20call">Call Me!</a>
<!-- or without a default number -->
<a href="sms:&body=Who%20ya%20gonna%20call">Call Me!</a>
Links toemail addresses
Pops open a new email message, start with mailto:
<a href="mailto:hey@thomasjbradley.ca">Thomas</a>
<!-- Add a subject too -->
<a href="mailto:hey@thomasjbradley.ca?subject=How%20are%20you?">Thomas</a>
<!-- Even a default body -->
<a href="mailto:hey@thomasjbradley.ca?subject=How%20are%20you?&body=Hey%20Thomas">Thom
%20 is used to escape spaces—See more percent-encoding examples
Date/time formats
Applytothe d a t e t i m e = " " attribute of the < t i m e > , < d e l > & < i n s > elements.
Year
Format: YYYY
Example: 1963
Year,month
Format: YYYY-MM
Example: 1963-11
Nov. 1963
Year,month, day
Format: YYYY-MM-DD
Example: 1963-11-23
Nov.23, 1963
Year,week
Format: YYYY-Wdd
Example: 1963-W47
1936,the week ofNov.18–24
Hour, minute
Format: HH:MM
Example: 17:16
5:16PM
Hour, minute, second
Format: HH:MM:SS
Example: 17:16:20
5:16:20 PM
Hour, minute, second, millisecond
Format: HH:MM:SS.sss
Example: 17:16:20.258
5:16:20.258 PM
UTC timezone
Format: Z
Example: Z
UTC timezone
Timezone offsets
Format: ±HH:MM
Example: -05:00
Eastern Standard Time, Daylight Savings
Year,month, day,hour, minute
Format: YYYY-MM-DDTHH:MM
Example: 1963-11-23T17:16
Nov.23, 1963at 5:16PM
Year,month, day,hour, minute, second
Format: YYYY-MM-DDTHH:MM:SS
Example: 1963-11-23T17:16:20
Nov.23, 1963at 5:16:20 PM
Year,month, day,hour, minute, second, millisecond
Format: YYYY-MM-DDTHH:MM:SS.sss
Example: 1963-11-23T17:16:20.258
Nov. 23, 1963at 5:16:20.258 PM
Year,month, day,hour, minute, UTC
Format: YYYY-MM-DDTHH:MMZ
Example: 1963-11-23T17:16Z
Nov.23, 1963at 5:16PM UTC
Year,month, day,hour, minute, timezone
Format: YYYY-MM-DDTHH:MM±HH:MM
Example: 1963-11-23T12:16-05:00
Nov.23, 1963at 12:16AMEST
Year,month, day,hour, minute, second, timezone
Format: YYYY-MM-DDTHH:MM:SS±HH:MM
Example: 1963-11-23T12:16:20-05:00
Nov.23, 1963at 12:16:20 AMEST
Year, month, day,hour, minute, second, millisecond, timezone
Format: YYYY-MM-DDTHH:MM:SS.sss±HH:MM
Example: 1963-11-23T12:16:20.258-05:00
Nov.23, 1963at 12:16:20.258 AMEST
Periodofdays
Format: PddD
Example: P686D
686 days
Periodofdays,hours
Format: PddDThhH
Example: P686DT23H
686 days,23hours
Period ofdays,hours, minutes
Format: PddDThhHmmM
Example: P686DT23H18M
686 days,23hours, 18minutes
Period ofdays, hours, minutes, seconds
Format: PddDThhHmmMssS
Example: P686DT23H18M14S
686 days,23hours, 18minutes, 14seconds
Period ofdays, hours, minutes, seconds,milliseconds
Format: PddDThhHmmMss.sssS
Example: P686DT23H18M14.400S
686 days,23hours, 18minutes, 14seconds,400 milliseconds
Periodofhours
Format: PThhH
Example: PT23H
23hours
Periodofminutes
Format: PTmmM
Example: PT18M
18minutes
Period ofminutes, seconds
Format: PTmmMssS
Example: PT18M14S
18minutes, 14seconds
Exact dateexample
<time datetime="1963-11-23T12:16:20Z">Premiere of the most important TV show of all
time</time>
Simple time period
<time datetime="P365DT6H8M">Earth’s orbital period</time>
Rangeoftime periods
Opossum gestation period: <time datetime="P12D">twelve</time> to <time datetime="P13D">
Thirteen</time>days.
