HTML Semantics Cheat Sheet Web Dev Topics Learn The Web

HTML semantics cheat sheet
Document
<title> <link href="…" <header>

Second most important piece of rel="stylesheet"> When inside <body> it's the
content. For linking CSS and other website masthead.
Shown in the browser tab & resources like feeds. When inside <article> it's
search results. href is the path the file. the most important information.
Should be unique for every page rel has different values for
on the site. other resources.
<footer> <main> <nav>

When inside <body> it's the Primary content of the page. Defines a group a navigation
website footer. links.
When inside <article> it's
the least important information.
<article> <section> <aside>

A piece of content that's A group in a series of related Secondary content not required
independent. content pieces. to understand the main content.
Could be removed from this
website and still make sense.
CSS link tag Navigation inside header Main content groups

<link <header> <body>
href="css/main.css" <nav> <header>
rel="stylesheet"> <ul> <nav>…</nav>
<li><a </header>
href="#">Stegosaurus</
a></li> <main>
<li><a <h1>Dinos-R-
href="#">Triceratops</ Us</h1>
a></li> </main>
<li><a
href="#">Ankylosaurus< <footer>
/a></li> <p>© 2063 Dinos-R-
</ul> Us</p>
</nav> </footer>
</header> </body>
Lists
<ul> <ol> <li>

An unordered list—the order of An ordered list—the order of the A single list item.
items isn't important. items is important. Must be inside a <ul> or
Can only have <li> elements Could be alphabetical, <ol> .
as direct children. numerical, best to worst, etc. Can have most other elements
Can only have <li> elements inside it.
as direct children.
<dl> <dt> <dd>

A description list—a grouping of Description title, the term of the Description definition, the data,
terms and definitions. item. or text of the item.
Words & definitions, titles & Must come before the <dd> . Can be multiple <dd> tags
summaries, data points, etc. underneath one <dt> .
Can only have <dt> and
<dd> elements as direct
children.
Unordered list Ordered list Description list

<ul> <ol> <dl>
<li>Mercury</li> <dt>Length</dt>
<li>Tyrannosaurus</li> <li>Venus</li> <dd>2.3 m</dd>
<li>Spinosaurus</li> <li>Earth</li> <dt>Weight</dt>
<li>Mars</li> <dd>4 tonnes</dd>
<li>Velociraptor</li> </ol> </dl>
</ul>
<menu> Menu toolbar list

For semantically marking up a <menu>
web application's toolbar of <li>
buttons. <button>Like</button>
The <menu> tag also uses </li>
<li>
<li> tags inside—one for <button>Share</button>
each toolbar button. </li>
You may still have to remove the <li>
bullets. <button>Comment</butto
n></li>
</menu>
Text
<a href="…"> <h1> <h2> , <h3> , <h4> , <h5> ,

For making hyperlinks. The most important piece of <h6>
href is the path to where the content on the page. Content headings, each a sub-
link should go. On the homepage this should be heading of the one above.
the company's name. The <h2> is a sub-heading of
On inside pages this should be <h1> , <h3> a sub-heading of
the page title. <h2> , etc.
<hgroup> <p> <blockquote>

Allows you to group multiple A generic paragraph of text. A large, stand alone quote from
headings together and have another source.
them semantically treated as a
single heading.
It's primary purpose is for
subheadings.
<cite> <q> <em>

A citation for another source, A small quotation embedded A string of emphasized, slightly
often used with quotations. within other content. more important text.
A person's name, a URL, a book, a Screen readers will change their
movie title, etc. voice for this text.
<strong> <ins datetime="…"> <del datetime="…">

A string of highly emphasized, Content that was inserted after Content that was deleted after
much more important text. the document was published. the document was published.
Screen readers will change their datetime defines when it was datetime defines when it was
voice for this text. added. removed.
<abbr title="…"> <dfn> <mark>

An acronym or abbreviation, like A definition of a term on the Used to highlight a piece of text
“HTML”, “CSS”, etc. page. for reference.
title contains the expanded Should only be used once of the The keywords in a search results
version, like “Hypertext Markup term. page, the current navigation
Language”. item.
<i> <b> <s>

Defines technical term, a ship Defines a keyword, like product Content that's no longer relevant
name, a book title, a thought, name in a review, a lead sentence to the document.
sarcasm, another language. in a paragraph. Consider if the <del> element
is better suited first.
<u> <small> <address>

Labels the text as having a non-
textual annotation. Represents side comments and Contact information, email, tel,
A misspelled word, a Chinese fine print. postal address, etc.
proper name, etc.
Blockquotes Addresses Text edits

<blockquote> <address> <p>Launchpad 39A owned
<p>Dinosaurs may be Jet Propulsion by <del
extinct from the face Laboratory datetime="2014-04-
of the planet, but <br>4800 Oak Grove 14">NASA</del> <ins
they are alive and Drive datetime="2014-04-
well in our <br>Pasadena, 14">SpaceX</ins></p>
imaginations.</p> California
<footer>— <br>91109
<cite>Steve </address>
Miller</cite></footer>
</blockquote>
Heading groups Abbreviations Other languages

<hgroup> <abbr title="Star <i
<h1>Star Wars</h1> Trek: The Wrath of lang="fr">Bonjour</i>
<h2>The Empire Khan">ST:TWOK</abbr>
Strikes Back</h2>
</hgroup>
Images & media
<img src="…" alt="…"> <figure> <figcaption>

Embeds an image that's Embeds annotated images, For adding a caption/annotation
important to the content. illustrations, photos, code, etc. to the <figure> .
src is a path to the image file. Could be moved out of place and Must be inside a <figure>
alt describes the image if it would still make sense. element—cannot stand alone.
cannot be seen.
<picture> <video poster="…" <audio autoplay loop

Responsive image insertion— autoplay loop muted muted controls>
allows developers to provide controls> For embedding sounds into a
different images for different For embedding movies into a website.
contexts. website. autoplay will hint the audio
poster is the path to an to start automatically.
image that's displayed before loop triggers whether the
the video plays. audio should repeat or not.
autoplay will hint the video muted can be added to not
to start automatically. play sound by default.
loop triggers whether the controls shows or hides the
video should repeat or not. browser's player buttons.
muted can be added to not
play sound by default.
controls shows or hides the
browser's player buttons.
<source> <track>
Must be inside <picture> , Used to pair captions, chapters,
<video> or <audio> to etc. with <video> elements.
define the different versions of
content.
For example, in video it gives
paths to the MP4 and WEBM
formats.
Basic images Figures & captions Responsive images

<img
Use only if there's a caption. See Responsive & retina images
src="images/dino.jpg" <figure>
for details (/topics/responsive-
alt="An beautiful, <img retina-images/).
long-necked src="images/dino-
Brontosaurus"> <picture>
small.jpg" alt="">
<source media="(min-
<figcaption>So many
width: 60em)"
dinosaurs I can’t even
srcset="images/dino-
count!</figcaption>
wide.jpg">
</figure>
<source media="(min-
width: 38em)"
srcset="images/dino-
rectangle.jpg">
<img
src="images/dino-
small.jpg" alt="All
the dinosaurs!">
</picture>
Data & code
<sub> <sup> <var>

Defines text as being subscript. Defines text as being superscript. Represents a variable in math or
programming.
<time datetime="…"> <data value="…"> <meter value="…" min="…"

Marks some text as a time or Marks elements as being a max="…">
date. numerical piece of information. Represents a single number in a
datetime defines the value provides the machine range of numbers.
machine readable version. readable version. value is the current number.
min is the minimum number.
max is the maximum number.
<progress value="…" <code> <pre>

min="…" max="…"> Defines a piece of text as a code A piece of text that has a specific
Represents the current position sample. formatting, where tabs,
in a series of steps. whitespaces, etc. should be
value is the current position. maintained.
min is the minimum position.
max is the maximum position.
<kbd> <samp>
Something a user should type Something a user should see
into their computer. output from a computer.
Time Data Maths

Apollo 11 landed on Argentinosaurus E = mc<sup>2</sup>
the moon <time weighted approximately
datetime="1969-07- <data value="90">90
20T20:18">July 20, tonnes</data>
1969</time>
Meaningless tags
<div> <span>
Inherits meaning from its Inherits meaning from its
children. children.
Divides content into logical
groups, when no other tag is
better suited.
Has restrictions on what
elements it can be inside.
Be careful
<br> <hr> <button>

Creates a line break that's Represents a thematic break in Represents a interactive,
significant to the content. the content. clickable button.
Useful in poems and addresses For example, a scene change or Should be used in forms and
where the division of lines is topic change. with JavaScript.
important. Do not use to create a horizontal line Do not use to link to another page—
Do not use to create space in a —use CSS borders. use the <a> tag.
design—use margins and padding.
<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 go nowhere Links on the same page Links to other files
The href always needs a value Add an id="" to the element Just write the name of the HTML
— # means nowhere. to jump to, refer to that inside file, also include any folders its
<a the href inside.
href="#">Nowhere</a> <a <a
href="#herbivores">See href="dinos.html">Dino
the herbivores</a> saurs</a>
<h2 
ores</h2> <a
href="herbivores/stego
saurus.html">Stegosaur
us</a>
Links to other websites Links to phone numbers Links to email addresses

Always start with https:// or Start with tel: , use Pops open a new email message,
less ideally http:// international format start with mailto:
<a <a <a
href="https://www.wiki href="tel:+18005552368 href="mailto:hey@thoma
pedia.org/">Wikipedia< ">Call Me!</a> sjbradley.ca">Thomas</
/a> a>
Also send a text message with

outward-bound sites is <a <a
good --> href="sms:+18005552368 href="mailto:hey@thoma
<a &body=Who%20ya%20gonna sjbradley.ca?
href="https://www.wiki %20call">Call Me!</a> subject=How%20are%20yo
pedia.org/" u?">Thomas</a>
rel="external">Wikiped  
href="sms:&body=Who%20 <a
ya%20gonna%20call">Cal href="mailto:hey@thoma
l Me!</a> sjbradley.ca?
subject=How%20are%20yo
u?
&body=Hey%20Thomas">Th
omas</a>
%20 is used to escape spaces

—See more percent-encoding
examples
(https://en.wikipedia.org/wiki/Perce
encoding)
Date/time formats
Apply to the datetime="" attribute of the <time> , <del> & <ins> elements.
Year Year, month Year, month, day

Format: YYYY Format: YYYY-MM Format: YYYY-MM-DD
Example: 1963 Example: 1963-11 Example: 1963-11-23
Nov. 1963 Nov. 23, 1963
Year, week Hour, minute Hour, minute, second

Format: YYYY-Wdd Format: HH:MM Format: HH:MM:SS
Example: 1963-W47 Example: 17:16 Example: 17:16:20
1936, the week of Nov. 18–24 5:16 PM 5:16:20 PM
Hour, minute, second, millisecond UTC timezone Timezone offsets

Format: HH:MM:SS.sss Format: Z Format: ±HH:MM
Example: 17:16:20.258 Example: Z Example: -05:00
5:16:20.258 PM UTC timezone Eastern Standard Time, Daylight
Savings
Year, month, day, hour, minute Year, month, day, hour, minute, second Year, month, day, hour, minute, second,
Format: YYYY-MM-DDTHH:MM Format: YYYY-MM- millisecond
Example: 1963-11-23T17:16 DDTHH:MM:SS Format: YYYY-MM-
Nov. 23, 1963 at 5:16 PM Example: 1963-11- DDTHH:MM:SS.sss
23T17:16:20 Example: 1963-11-
Nov. 23, 1963 at 5:16:20 PM 23T17:16:20.258
Nov. 23, 1963 at 5:16:20.258 PM
Year, month, day, hour, minute, UTC Year, month, day, hour, minute, Year, month, day, hour, minute, second,
Format: YYYY-MM-DDTHH:MMZ timezone timezone
Example: 1963-11- Format: YYYY-MM-DDTHH:MM Format: YYYY-MM-
23T17:16Z ±HH:MM DDTHH:MM:SS±HH:MM
Nov. 23, 1963 at 5:16 PM UTC Example: 1963-11- Example: 1963-11-
23T12:16-05:00 23T12:16:20-05:00
Nov. 23, 1963 at 12:16 AM EST Nov. 23, 1963 at 12:16:20 AM EST
Year, month, day, hour, minute, second, Period of days Period of days, hours
millisecond, timezone Format: PddD Format: PddDhhH
Format: YYYY-MM- Example: P686D Example: P686D23H
DDTHH:MM:SS.sss±HH:MM 686 days 686 days, 23 hours
Example: 1963-11-
23T12:16:20.258-05:00
Nov. 23, 1963 at 12:16:20.258 AM
EST
Period of days, hours, minutes Period of days, hours, minutes, seconds Period of days, hours, minutes, seconds,
Format: PddDhhHmmM Format: PddDhhHmmMssS milliseconds
Example: P686D23H18M Example: P686D23H18M14S Format: PddDhhHmmMss.sssS
686 days, 23 hours, 18 minutes 686 days, 23 hours, 18 minutes, 14 Example:
seconds P686D23H18M14.400S
686 days, 23 hours, 18 minutes, 14
seconds, 400 milliseconds
Exact date example Simple time period Range of time periods

<time datetime="1963- <time Opossum gestation
11- datetime="P365D6H8M">E period: <time
23T12:16:20Z">Premiere arth’s orbital datetime="P12D">twelve
of the most important period</time> </time> to <time
TV show of all time! datetime="P13D">thirte
</time> en</time> days.

HTML Semantics Cheat Sheet Web Dev Topics Learn The Web

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

HTML Semantics Cheat Sheet Web Dev Topics Learn The Web

Hochgeladen von

Copyright:

Verfügbare Formate

HTML semantics cheat sheet

<title> <link href="…" <header>

<footer> <main> <nav>

<article> <section> <aside>

CSS link tag Navigation inside header Main content groups

<ul> <ol> <li>

<dl> <dt> <dd>

Unordered list Ordered list Description list

<menu> Menu toolbar list

<a href="…"> <h1> <h2> , <h3> , <h4> , <h5> ,

<hgroup> <p> <blockquote>

<cite> <q> <em>

<strong> <ins datetime="…"> <del datetime="…">

<abbr title="…"> <dfn> <mark>

<i> <b> <s>

<u> <small> <address>

Blockquotes Addresses Text edits

Heading groups Abbreviations Other languages

<img src="…" alt="…"> <figure> <figcaption>

<picture> <video poster="…" <audio autoplay loop

Basic images Figures & captions Responsive images

<sub> <sup> <var>

<time datetime="…"> <data value="…"> <meter value="…" min="…"

<progress value="…" <code> <pre>

Time Data Maths

<br> <hr> <button>

<h2 <!-- or in another

Links to other websites Links to phone numbers Links to email addresses

%20 is used to escape spaces

Year Year, month Year, month, day

Year, week Hour, minute Hour, minute, second

Hour, minute, second, millisecond UTC timezone Timezone offsets

Exact date example Simple time period Range of time periods

Das könnte Ihnen auch gefallen