This
specification
does
not
provide
a
machine-readable
way
of
describing
bread-crumb
navigation
menus.
Authors
are
encouraged
to
just
use
a
series
of
links
in
a
paragraph.
The
nav
element
can
be
used
to
mark
the
section
containing
these
paragraphs
as
being
navigation
blocks.
In the following example, the current page can be reached via two paths.
<nav>
<p>
<a href="/">Main</a> ▸
<a href="/products/">Products</a> ▸
<a href="/products/dishwashers/">Dishwashers</a> ▸
<a>Second hand</a>
</p>
<p>
<a href="/">Main</a> ▸
<a href="/second-hand/">Second hand</a> ▸
<a>Dishwashers</a>
</p>
</nav>
This
specification
does
not
define
any
markup
specifically
for
marking
up
lists
of
keywords
that
apply
to
a
group
of
pages
(also
known
as
tag
clouds
).
In
general,
authors
are
encouraged
to
either
mark
up
such
lists
using
ul
elements
with
explicit
inline
counts
that
are
then
hidden
and
turned
into
a
presentational
effect
using
a
style
sheet,
or
to
use
SVG.
Here, three tags are included in a short tag cloud:
<style>
.tag-cloud > li > span { display: none; }
.tag-cloud > li { display: inline; }
.tag-cloud-1 { font-size: 0.7em; }
.tag-cloud-2 { font-size: 0.9em; }
.tag-cloud-3 { font-size: 1.1em; }
.tag-cloud-4 { font-size: 1.3em; }
.tag-cloud-5 { font-size: 1.5em; }
@media speech {
.tag-cloud > li > span { display:inline }
}
</style>
...
<ul class="tag-cloud">
<li class="tag-cloud-4"><a title="28 instances" href="/t/apple">apple</a> <span>(popular)</span>
<li class="tag-cloud-2"><a title="6 instances" href="/t/kiwi">kiwi</a> <span>(rare)</span>
<li class="tag-cloud-5"><a title="41 instances" href="/t/pear">pear</a> <span>(very popular)</span>
</ul>
The
actual
frequency
of
each
tag
is
given
using
the
title
attribute.
A
CSS
style
sheet
is
provided
to
convert
the
markup
into
a
cloud
of
differently-sized
words,
but
for
user
agents
that
do
not
support
CSS
or
are
not
visual,
the
markup
contains
annotations
like
"(popular)"
or
"(rare)"
to
categorize
the
various
tags
by
frequency,
thus
enabling
all
users
to
benefit
from
the
information.
The
ul
element
is
used
(rather
than
ol
)
because
the
order
is
not
particularly
important:
while
the
list
is
in
fact
ordered
alphabetically,
it
would
convey
the
same
information
if
ordered
by,
say,
the
length
of
the
tag.
The
tag
rel
-keyword
is
not
used
on
these
a
elements
because
they
do
not
represent
tags
that
apply
to
the
page
itself;
they
are
just
part
of
an
index
listing
the
tags
themselves.
This specification does not define a specific element for marking up conversations, meeting minutes, chat transcripts, dialogues in screenplays, instant message logs, and other situations where different players take turns in discourse.
Instead,
authors
are
encouraged
to
mark
up
conversations
using
p
elements
and
punctuation.
Authors
who
need
to
mark
the
speaker
for
styling
purposes
are
encouraged
to
use
span
or
b
.
Paragraphs
with
their
text
wrapped
in
the
i
element
can
be
used
for
marking
up
stage
directions.
This example demonstrates this using an extract from Abbot and Costello's famous sketch, Who's on first :
<p> Costello: Look, you gotta first baseman?
<p> Abbott: Certainly.
<p> Costello: Who's playing first?
<p> Abbott: That's right.
<p> Costello becomes exasperated.
<p> Costello: When you pay off the first baseman every month, who gets the money?
<p>
Abbott:
Every
dollar
of
it.
The
following
extract
shows
how
an
IM
conversation
log
could
be
marked
up,
using
the
data
element
to
provide
Unix
timestamps
for
each
line.
Note
that
the
timestamps
are
provided
in
a
format
that
the
time
element
does
not
support,
so
the
data
element
is
used
instead
(namely,
Unix
time_t
timestamps).
Had
the
author
wished
to
mark
up
the
data
using
one
of
the
date
and
time
formats
supported
by
the
time
element,
that
element
could
have
been
used
instead
of
data
.
This
could
be
advantageous
as
it
would
allow
data
analysis
tools
to
detect
the
timestamps
unambiguously,
without
coordination
with
the
page
author.
<p> <data value="1319898155">14:22</data> <b>egof</b> I'm not that nerdy, I've only seen 30% of the star trek episodes
<p> <data value="1319898192">14:23</data> <b>kaj</b> if you know what percentage of the star trek episodes you have seen, you are inarguably nerdy
<p> <data value="1319898200">14:23</data> <b>egof</b> it's unarguably
<p> <data value="1319898228">14:23</data> <i>* kaj blinks</i>
<p>
<data
value="1319898260">14:24</data>
<b>kaj</b>
you
are
not
helping
your
case
HTML
does
not
have
a
good
way
to
mark
up
graphs,
so
descriptions
of
interactive
conversations
from
games
are
more
difficult
to
mark
up.
This
example
shows
one
possible
convention
using
dl
elements
to
list
the
possible
responses
at
each
point
in
the
conversation.
Another
option
to
consider
is
describing
the
conversation
in
the
form
of
a
DOT
file,
and
outputting
the
result
as
an
SVG
image
to
place
in
the
document.
[DOT]
<p> Next, you meet a fisher. You can say one of several greetings:
<dl>
<dt> "Hello there!"
<dd>
<p> She responds with "Hello, how may I help you?"; you can respond with:
<dl>
<dt> "I would like to buy a fish."
<dd> <p> She sells you a fish and the conversation finishes.
<dt> "Can I borrow your boat?"
<dd>
<p> She is surprised and asks "What are you offering in return?".
<dl>
<dt> "Five gold." (if you have enough)
<dt> "Ten gold." (if you have enough)
<dt> "Fifteen gold." (if you have enough)
<dd> <p> She lends you her boat. The conversation ends.
<dt> "A fish." (if you have one)
<dt> "A newspaper." (if you have one)
<dt> "A pebble." (if you have one)
<dd> <p> "No thanks", she replies. Your conversation options
at this point are the same as they were after asking to borrow
her boat, minus any options you've suggested before.
</dl>
</dd>
</dl>
</dd>
<dt> "Vote for me in the next election!"
<dd> <p> She turns away. The conversation finishes.
<dt> "Madam, are you aware that your fish are running away?"
<dd>
<p> She looks at you skeptically and says "Fish cannot run, miss".
<dl>
<dt> "You got me!"
<dd> <p> The fisher sighs and the conversation ends.
<dt> "Only kidding."
<dd> <p> "Good one!" she retorts. Your conversation options at this
point are the same as those following "Hello there!" above.
<dt> "Oh, then what are they doing?"
<dd> <p> She looks at her fish, giving you an opportunity to steal
her boat, which you do. The conversation ends.
</dl>
</dd>
</dl>
In some games, conversations are simpler: each character merely has a fixed set of lines that they say. In this example, a game FAQ/walkthrough lists some of the known possible responses for each character:
<section>
<h1>Dialogue</h1>
<p><small>Some characters repeat their lines in order each time you interact
with them, others randomly pick from amongst their lines. Those who respond in
order have numbered entries in the lists below.</small>
<h2>The Shopkeeper</h2>
<ul>
<li>How may I help you?
<li>Fresh apples!
<li>A loaf of bread for madam?
</ul>
<h2>The pilot</h2>
<p>Before the accident:
<ul>
<li>I'm about to fly out, sorry!
<li>Sorry, I'm just waiting for flight clearance and then I'll be off!
</ul>
<p>After the accident:
<ol>
<li>I'm about to fly out, sorry!
<li>Ok, I'm not leaving right now, my plane is being cleaned.
<li>Ok, it's not being cleaned, it needs a minor repair first.
<li>Ok, ok, stop bothering me! Truth is, I had a crash.
</ol>
<h2>Clan Leader</h2>
<p>During the first clan meeting:
<ul>
<li>Hey, have you seen my daughter? I bet she's up to something nefarious again...
<li>Nice weather we're having today, eh?
<li>The name is Bailey, Jeff Bailey. How can I help you today?
<li>A glass of water? Fresh from the well!
</ul>
<p>After the earthquake:
<ol>
<li>Everyone is safe in the shelter, we just have to put out the fire!
<li>I'll go and tell the fire brigade, you keep hosing it down!
</ol>
</section>
HTML does not have a dedicated mechanism for marking up footnotes. Here are the suggested alternatives.
For
short
inline
annotations,
the
title
attribute
could
be
used.
In
this
example,
two
parts
of
a
dialogue
are
annotated
with
footnote-like
content
using
the
title
attribute.
<p> <b>Customer</b>: Hello! I wish to register a complaint. Hello. Miss?
<p> <b>Shopkeeper</b>: <span title="Colloquial pronunciation of 'What do you'"
>Watcha</span> mean, miss?
<p> <b>Customer</b>: Uh, I'm sorry, I have a cold. I wish to make a complaint.
<p> <b>Shopkeeper</b>: Sorry, <span title="This is, of course, a lie.">we're
closing
for
lunch</span>.
Unfortunately,
relying
on
the
title
attribute
is
currently
discouraged
as
many
user
agents
do
not
expose
the
attribute
in
an
accessible
manner
as
required
by
this
specification
(e.g.
requiring
a
pointing
device
such
as
a
mouse
to
cause
a
tooltip
to
appear,
which
excludes
keyboard-only
users
and
touch-only
users,
such
as
anyone
with
a
modern
phone
or
tablet).
If
the
title
attribute
is
used,
CSS
can
be
used
to
draw
the
reader's
attention
to
the
elements
with
the
attribute.
For
example,
the
following
CSS
places
a
dashed
line
below
elements
that
have
a
title
attribute.
[title]
{
border-bottom:
thin
dashed;
}
For
longer
annotations,
the
a
element
should
be
used,
pointing
to
an
element
later
in
the
document.
The
convention
is
that
the
contents
of
the
link
be
a
number
in
square
brackets.
In this example, a footnote in the dialogue links to a paragraph below the dialogue. The paragraph then reciprocally links back to the dialogue, allowing the user to return to the location of the footnote.
<p> Announcer: Number 16: The <i>hand</i>.
<p> Interviewer: Good evening. I have with me in the studio tonight
Mr Norman St John Polevaulter, who for the past few years has been
contradicting people. Mr Polevaulter, why <em>do</em> you
contradict people?
<p> Norman: I don't. <sup><a href="#fn1" id="r1">[1]</a></sup>
<p> Interviewer: You told me you did!
...
<section>
<p id="fn1"><a href="#r1">[1]</a> This is, naturally, a lie,
but paradoxically if it were true he could not say so without
contradicting the interviewer and thus making it false.</p>
</section>
For
side
notes,
longer
annotations
that
apply
to
entire
sections
of
the
text
rather
than
just
specific
words
or
sentences,
the
aside
element
should
be
used.
In this example, a sidebar is given after a dialogue, giving it some context.
<p> <span class="speaker">Customer</span>: I will not buy this record, it is scratched.
<p> <span class="speaker">Shopkeeper</span>: I'm sorry?
<p> <span class="speaker">Customer</span>: I will not buy this record, it is scratched.
<p> <span class="speaker">Shopkeeper</span>: No no no, this's'a tobacconist's.
<aside>
<p>In 1970, the British Empire lay in ruins, and foreign
nationalists frequented the streets — many of them Hungarians
(not the streets — the foreign nationals). Sadly, Alexander
Yalt has been publishing incompetently-written phrase books.
</aside>
For
figures
or
tables,
footnotes
can
be
included
in
the
relevant
figcaption
or
caption
element,
or
in
surrounding
prose.
In
this
example,
a
table
has
cells
with
footnotes
that
are
given
in
prose.
A
figure
element
is
used
to
give
a
single
legend
to
the
combination
of
the
table
and
its
footnotes.
<figure>
<figcaption>Table 1. Alternative activities for knights.</figcaption>
<table>
<tr>
<th> Activity
<th> Location
<th> Cost
<tr>
<td> Dance
<td> Wherever possible
<td> £0<sup><a href="#fn1">1</a></sup>
<tr>
<td> Routines, chorus scenes<sup><a href="#fn2">2</a></sup>
<td> Undisclosed
<td> Undisclosed
<tr>
<td> Dining<sup><a href="#fn3">3</a></sup>
<td> Camelot
<td> Cost of ham, jam, and spam<sup><a href="#fn4">4</a></sup>
</table>
<p id="fn1">1. Assumed.</p>
<p id="fn2">2. Footwork impeccable.</p>
<p id="fn3">3. Quality described as "well".</p>
<p id="fn4">4. A lot.</p>
</figure>
An element is said to be actually disabled if it is one of the following:
button
element
that
is
disabled
input
element
that
is
disabled
select
element
that
is
disabled
textarea
element
that
is
disabled
optgroup
element
that
has
a
disabled
attribute
option
element
that
is
disabled
fieldset
element
that
is
a
disabled
fieldset
This
definition
is
used
to
determine
what
elements
can
be
focused
and
which
elements
match
the
:enabled
and
:disabled
pseudo-classes
.
CSS Values and Units leaves the case-sensitivity of attribute names for the purpose of the 'attr()' function to be defined by the host language. [CSSVALUES]
When comparing the attribute name part of a CSS 'attr()' function to the names of namespace-less attributes on HTML elements in HTML documents , the name part of the CSS 'attr()' function must first be converted to ASCII lowercase . The same function when compared to other attributes must be compared according to its original case. In both cases, the comparison is case-sensitive .
This is the same as comparing the name part of a CSS attribute selector , specified in the next section.
Selectors leaves the case-sensitivity of element names, attribute names, and attribute values to be defined by the host language. [SELECTORS]
When comparing a CSS element type selector to the names of HTML elements in HTML documents , the CSS element type selector must first be converted to ASCII lowercase . The same selector when compared to other elements must be compared according to its original case. In both cases, the comparison is case-sensitive .
When comparing the name part of a CSS attribute selector to the names of attributes on HTML elements in HTML documents , the name part of the CSS attribute selector must first be converted to ASCII lowercase . The same selector when compared to other attributes must be compared according to its original case. In both cases, the comparison is case-sensitive .
Attribute selectors on an HTML element in an HTML document must treat the values of attributes with the following names as ASCII case-insensitive :
accept
accept-charset
align
alink
axis
bgcolor
charset
checked
clear
codetype
color
compact
declare
defer
dir
direction
disabled
enctype
face
frame
hreflang
http-equiv
lang
language
link
media
method
multiple
nohref
noresize
noshade
nowrap
readonly
rel
rev
rules
scope
scrolling
selected
shape
target
text
type
valign
valuetype
vlink
For
example,
the
selector
[bgcolor="#ffffff"]
will
match
any
HTML
element
with
a
bgcolor
attribute
with
values
including
#ffffff
,
#FFFFFF
and
#fffFFF
.
This
happens
even
if
bgcolor
has
no
effect
for
a
given
element
(e.g.,
div
).
The
selector
[type=a
s]
will
match
any
HTML
element
with
a
type
attribute
whose
value
is
a
,
but
not
whose
value
is
A
,
due
to
the
s
flag.
All other attribute values and everything else must be treated as entirely case-sensitive for the purposes of selector matching. This includes:
Selectors
defines
that
ID
and
class
selectors
(such
as
#foo
and
.bar
),
when
matched
against
elements
in
documents
that
are
in
quirks
mode
,
will
be
matched
in
an
ASCII
case-insensitive
manner.
However,
this
does
not
apply
for
attribute
selectors
with
"
id
"
or
"
class
"
as
the
name
part.
The
selector
[class="foobar"]
will
treat
its
value
as
case-sensitive
even
in
quirks
mode
.
There are a number of dynamic selectors that can be used with HTML. This section defines when these selectors match HTML elements. [SELECTORS] [CSSUI]
:defined
The
:defined
pseudo-class
must
match
any
element
that
is
defined
.
:link
:visited
All
a
elements
that
have
an
href
attribute,
all
area
elements
that
have
an
href
attribute,
and
all
link
elements
that
have
an
href
attribute,
must
match
one
of
:link
and
:visited
.
Other specifications might apply more specific rules regarding how these elements are to match these pseudo-classes , to mitigate some privacy concerns that apply with straightforward implementations of this requirement.
:active
The
:active
pseudo-class
is
defined
to
match
an
element
while
an
element
is
being
activated
by
the
user
.
To
determine
whether
a
particular
element
is
being
activated
for
the
purposes
of
defining
the
:active
pseudo-class
only,
an
HTML
user
agent
must
use
the
first
relevant
entry
in
the
following
list.
:active
pseudo-class
The element is being activated .
label
element
that
is
currently
matching
:active
The element is being activated .
button
element
input
element
whose
type
attribute
is
in
the
Submit
Button
,
Image
Button
,
Reset
Button
,
or
Button
state
The element is being activated if it is in a formal activation state and it is not disabled .
For
example,
if
the
user
is
using
a
keyboard
to
push
a
button
element
by
pressing
the
space
bar,
the
element
would
match
this
pseudo-class
in
between
the
time
that
the
element
received
the
keydown
event
and
the
time
the
element
received
the
keyup
event.
a
element
that
has
an
href
attribute
area
element
that
has
an
href
attribute
link
element
that
has
an
href
attribute
The element is being activated if it is in a formal activation state .
The element is being activated .
An element is said to be in a formal activation state between the time the user begins to indicate an intent to trigger the element's activation behavior and either the time the user stops indicating an intent to trigger the element's activation behavior , or the time the element's activation behavior has finished running, which ever comes first.
An element is said to be being actively pointed at while the user indicates the element using a pointing device while that pointing device is in the "down" state (e.g. for a mouse, between the time the mouse button is pressed and the time it is depressed; for a finger in a multitouch environment, while the finger is touching the display surface).
:hover
The
:hover
pseudo-class
is
defined
to
match
an
element
while
the
user
designates
an
element
with
a
pointing
device
.
For
the
purposes
of
defining
the
:hover
pseudo-class
only,
an
HTML
user
agent
must
consider
an
element
as
being
one
that
the
user
designates
if
it
is:
An element that the user indicates using a pointing device.
An element that has a descendant that the user indicates using a pointing device.
An
element
that
is
the
labeled
control
of
a
label
element
that
is
currently
matching
:hover
.
Consider in particular a fragment such as:
<p>
<label
for=c>
<input
id=a>
</label>
<span
id=b>
<input
id=c>
</span>
</p>
If
the
user
designates
the
element
with
ID
"
a
"
with
their
pointing
device,
then
the
p
element
(and
all
its
ancestors
not
shown
in
the
snippet
above),
the
label
element,
the
element
with
ID
"
a
",
and
the
element
with
ID
"
c
"
will
match
the
:hover
pseudo-class
.
The
element
with
ID
"
a
"
matches
it
from
condition
1,
the
label
and
p
elements
match
it
because
of
condition
2
(one
of
their
descendants
is
designated),
and
the
element
with
ID
"
c
"
matches
it
through
condition
3
(its
label
element
matches
:hover
).
However,
the
element
with
ID
"
b
"
does
not
match
:hover
:
its
descendant
is
not
designated,
even
though
it
matches
:hover
.
:focus
For
the
purposes
of
the
CSS
:focus
pseudo-class
,
an
element
has
the
focus
when
when:
its
top-level
browsing
context
has
the
system
focus,
focus;
it
is
not
itself
a
browsing
context
container
,
;
and
at least one of the following is true:
it is one of the elements listed in the focus chain of the currently focused area of the top-level browsing context , or
its shadow root shadowRoot is not null and shadowRoot is the root of at least one element that has the focus .
:target
For
the
purposes
of
the
CSS
:target
pseudo-class
,
the
Document
's
target
elements
are
a
list
containing
the
Document
's
target
element
,
if
it
is
not
null,
or
containing
no
elements,
if
it
is.
[SELECTORS]
:enabled
The
:enabled
pseudo-class
must
match
any
button
,
input
,
select
,
textarea
,
optgroup
,
option
,
fieldset
element,
or
form-associated
custom
element
that
is
not
actually
disabled
.
:disabled
The
:disabled
pseudo-class
must
match
any
element
that
is
actually
disabled
.
:checked
The
:checked
pseudo-class
must
match
any
element
falling
into
one
of
the
following
categories:
input
elements
whose
type
attribute
is
in
the
Checkbox
state
and
whose
checkedness
state
is
true
input
elements
whose
type
attribute
is
in
the
Radio
Button
state
and
whose
checkedness
state
is
true
option
elements
whose
selectedness
is
true
:indeterminate
The
:indeterminate
pseudo-class
must
match
any
element
falling
into
one
of
the
following
categories:
input
elements
whose
type
attribute
is
in
the
Checkbox
state
and
whose
indeterminate
IDL
attribute
is
set
to
true
input
elements
whose
type
attribute
is
in
the
Radio
Button
state
and
whose
radio
button
group
contains
no
input
elements
whose
checkedness
state
is
true.
progress
elements
with
no
value
content
attribute
:default
The
:default
pseudo-class
must
match
any
element
falling
into
one
of
the
following
categories:
button
elements
that
are
their
form's
default
button
input
elements
whose
type
attribute
is
in
the
Submit
Button
or
Image
Button
state,
and
that
are
their
form's
default
button
input
elements
to
which
the
checked
attribute
applies
and
that
have
a
checked
attribute
option
elements
that
have
a
selected
attribute
:placeholder-shown
The
:placeholder-shown
pseudo-class
must
match
any
element
falling
into
one
of
the
following
categories:
input
elements
that
have
a
placeholder
attribute
whose
value
is
currently
being
presented
to
the
user.
textarea
elements
that
have
a
placeholder
attribute
whose
value
is
currently
being
presented
to
the
user.
:valid
The
:valid
pseudo-class
must
match
any
element
falling
into
one
of
the
following
categories:
form
elements
that
are
not
the
form
owner
of
any
elements
that
themselves
are
candidates
for
constraint
validation
but
do
not
satisfy
their
constraints
fieldset
elements
that
have
no
descendant
elements
that
themselves
are
candidates
for
constraint
validation
but
do
not
satisfy
their
constraints
:invalid
The
:invalid
pseudo-class
must
match
any
element
falling
into
one
of
the
following
categories:
form
elements
that
are
the
form
owner
of
one
or
more
elements
that
themselves
are
candidates
for
constraint
validation
but
do
not
satisfy
their
constraints
fieldset
elements
that
have
of
one
or
more
descendant
elements
that
themselves
are
candidates
for
constraint
validation
but
do
not
satisfy
their
constraints
:in-range
The
:in-range
pseudo-class
must
match
all
elements
that
are
candidates
for
constraint
validation
,
have
range
limitations
,
and
that
are
neither
suffering
from
an
underflow
nor
suffering
from
an
overflow
.
:out-of-range
The
:out-of-range
pseudo-class
must
match
all
elements
that
are
candidates
for
constraint
validation
,
have
range
limitations
,
and
that
are
either
suffering
from
an
underflow
or
suffering
from
an
overflow
.
:required
The
:required
pseudo-class
must
match
any
element
falling
into
one
of
the
following
categories:
:optional
The
:optional
pseudo-class
must
match
any
element
falling
into
one
of
the
following
categories:
:read-only
:read-write
The
:read-write
pseudo-class
must
match
any
element
falling
into
one
of
the
following
categories,
which
for
the
purposes
of
Selectors
are
thus
considered
user-alterable
:
[SELECTORS]
input
elements
to
which
the
readonly
attribute
applies,
and
that
are
mutable
(i.e.
that
do
not
have
the
readonly
attribute
specified
and
that
are
not
disabled
)
textarea
elements
that
do
not
have
a
readonly
attribute,
and
that
are
not
disabled
input
elements
nor
textarea
elements
The
:read-only
pseudo-class
must
match
all
other
HTML
elements
.
:dir(ltr)
The
:dir(ltr)
pseudo-class
must
match
all
elements
whose
directionality
is
'
ltr
'.
:dir(rtl)
The
:dir(rtl)
pseudo-class
must
match
all
elements
whose
directionality
is
'
rtl
'.
Support:
css-read-only-write
Chrome
for
Android
75+
76+
Chrome
36+
iOS
Safari
9.0+
Firefox
None
UC
Browser
for
Android
11.8+
12.12+
Samsung
Internet
4+
IE
Safari
None
9+
Safari
Edge
9+
13+
Edge
IE
13+
None
Opera
Mini
None
Opera
23+
Android
Browser
67+
76+
Source: caniuse.com
This
specification
does
not
define
when
an
element
matches
the
:lang()
dynamic
pseudo-class
,
as
it
is
defined
in
sufficient
detail
in
a
language-agnostic
fashion
in
Selectors
.
[SELECTORS]