HTML Standard
archived 24 Jan 2024 16:46:10 UTCarchived 24 Jan 2024 16:46:10 UTCarchive.today webpage capture | Saved from | ||
| Redirected from | no other snapshots from this url | ||
| All snapshots | from host html.spec.whatwg.org | ||
| WebpageScreenshot | |||
nav
element can be used to mark the section containing these paragraphs as being navigation
blocks.< 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 > ul elements with explicit inline
counts that are then hidden and turned into a presentational effect using a style sheet, or to use
SVG.< style >
. tag-cloud > li > span { display : none ; }
. tag-cloud > li { display : inline ; }
. tag-cloud-1 { font-size : 0.7 em ; }
. tag-cloud-2 { font-size : 0.9 em ; }
. tag-cloud-3 { font-size : 1.1 em ; }
. tag-cloud-4 { font-size : 1.3 em ; }
. tag-cloud-5 { font-size : 1.5 em ; }
@ 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 > 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.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.< 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.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 casedl 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 > < 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 > title attribute could be used.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 > .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).title attribute is used, CSS can be used to
draw the reader's attention to the elements with the attribute.title attribute.CSS[title] { border-bottom : thin dashed; } 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.< 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 > aside element should be used.< 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 > figcaption or
caption element, or in surrounding prose.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 > button element that is disabledinput element that is disabledselect element that is disabledtextarea element that is disabledoptgroup element that has a disabled attributeoption element that is disabledfieldset element that is a disabled fieldset:enabled and
:disabled pseudo
classes.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
[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).[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.#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.:defined:link:visiteda elements that have an href
attribute, and all area elements that have an href attribute, must match one of :link and :visited.:active:active pseudo-class is defined to
match an element while an element is being activated by the user.
:active
pseudo-class only, an HTML user agent must use the first relevant entry in the
following list.button elementinput element whose type attribute is in the Submit Button, Image Button, Reset
Button, or Button statea element that has an href attributearea element that has an href attributebutton
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.:active also matches flat tree ancestors of
elements that are being activated.
[SELECTORS]label
element that is currently matching :active, also matches
:active. (But, it does not count as being being activated.):hover: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.:hover also matches flat tree ancestors of elements
that are designated. [SELECTORS]label
element that is currently matching :hover, also matches
:hover. (But, it does not count as being designated.)< p > < label for = c > < input id = a > </ label > < span id = b > < input id = c > </ span > </ p > 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 by being designated; the
label and p elements match it because of the condition in
Selectors about flat tree ancestors; and the element with ID "c" matches it through the additional condition above on labeled controls (i.e., its label element matches :hover). However, the element with ID "b" does not match :hover: its
flat tree descendant is not designated, even though that flat tree descendant matches :hover.:focus:focus
pseudo-class, an element has the focus when::target: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]:popover-open:popover-open pseudo-class is
defined to match any HTML element whose popover attribute is not in the no popover state and whose popover visibility
state is showing.:enabled: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:checked: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 trueinput elements whose type attribute is in
the Radio Button state and whose checkedness state is trueoption elements whose selectedness is true:indeterminate: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 trueinput 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:default pseudo-class must match any
element falling into one of the following categories:input elements to which the checked
attribute applies and that have a checked
attributeoption elements that have a selected
attribute:placeholder-shown: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 usertextarea elements that have a placeholder attribute whose value is currently being
presented to the user:valid: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
constraintsfieldset elements that have no descendant elements that themselves are candidates for constraint validation but do
not satisfy their constraints:invalid: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
constraintsfieldset elements that have of one or more descendant elements that themselves
are candidates for constraint
validation but do not satisfy their
constraints:user-valid:user-valid pseudo-class must
match input, textarea, and select elements that have
their user interacted set to true, are candidates for constraint validation, and that satisfy their constraints.:user-invalid:user-invalid pseudo-class must
match input, textarea, and select elements that have
their user interacted set to true, are candidates for constraint validation but do not satisfy their constraints.:in-range: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: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:required pseudo-class must match
any element falling into one of the following categories::optional:optional pseudo-class must match
any element falling into one of the following categories::autofill:-webkit-autofill:autofill and :-webkit-autofill pseudo-classes must match input elements which have
been autofilled by user agent. These pseudo-classes must stop matching if the user edits the
autofilled field.autocomplete attribute, but user agents could autofill even
without that attribute being involved.:read-only:read-write: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 disabledinput elements nor textarea elements:modal:modal pseudo-class must match any
element falling into one of the following categories:dialog elements whose is modal flag is true:dir(ltr):dir(rtl):state(identifier) pseudo-class must
match all custom elements whose states set's set entries
contains identifier.:playing:paused:seeking:buffering:buffering pseudo-class must match
all media elements whose paused attribute is false, networkState attribute is NETWORK_LOADING, and ready state is HAVE_CURRENT_DATA or less.:stalled:stalled pseudo-class must match
all media elements that match the :buffering pseudo-class and whose is
currently stalled is true.:muted:volume-locked:volume-locked pseudo-class
must match all media elements when the user agent's
volume locked is true.:lang() dynamic pseudo-class, as it is defined in
sufficient detail in a language-agnostic fashion in Selectors.
[SELECTORS]