本规范没有提供机器可读的方式来描述面包屑导航彩蛋。
鼓励作者只是在段落中使用一些超链接。可以使用 nav
元素来标记包含这些段落的部分形成导航块。
在下面的例子中，当前页面可以通过两种路径到达。
<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>
本规范没有定义任何专门标记一组页面的关键字列表（也称为 tag clouds）的标记。
通常，鼓励作者使用 ul 元素来标记这些列表。
其中写好计数并隐藏，再用样式表或 SVG 把它的效果呈现出来。
这是一个只有三个标签的标签云：
<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>
每个标签实际的频率使用 title 属性给出。
提供了一个 CSS 样式表来把标记转化成一个不同大小的词的云，
但不支持 CSS 的或非视觉的用户代理中，包含类似 "(popular)" 或 "(rare)" 字样的标记也会把不同频率的标签分离开，
这样所有用户都可以得到这个信息。
使用 ul 元素（而不是 ol）是因为顺序并不重要：
虽然列表实际上是按字母顺序排列的，但如果按标签的长度排序，它将传达相同的信息。
tag rel
关键字 没有 用在这些 a 元素上，
因为它们表示的标签不适用于当前页面自己；它们只是列出标签本身的索引的一部分。
本规范没有定义特定的元素来标记对话、会议记录、聊天记录、剧本中的对话、即时通信记录， 和其他有不同参与者轮流发言的场景。
但是鼓励作者使用 p 元素和标点来标记对话。
需要标记发言者来提供样式的情况，鼓励作者使用 span 或 b。
可以使用 i 元素包裹其内容的段落来标记对话的信息。
这个例子中，使用了 Abbot 和 Costello's 著名的喜剧 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.
下面的摘录演示了如何标记 IM 对话日志，
使用 data 元素来为每行提供 Unix 时间戳。
注意 time 元素不支持这个时间戳的格式，所以才使用了
data 元素（即 Unix time_t 时间戳）。
如果作者希望使用 time 元素支持的日期或时间格式来标记数据，
就要使用那个元素来替代 data。
这样的好处是数据分析工具可以无歧义地检测到时间戳，而不需要与网页作者协调。
<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 没有一种好的方式来标记图形，因此游戏中交互式对话的描述很难标记出来。
这个例子展示了一个可能的惯例，使用 dl 元素来列出对话中每个点可能的回复。
可以考虑的另一个选择是以 DOT 文件的格式来描述对话，然后把结果输出为 SVG 图片放到文档中。[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>
有些图中对话比较简单：每个角色只有一些确定的话要说。 这个例子中，一个游戏 FAQ/流程 列出了每个角色的一些已知的可能回应：
<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 没有标记脚注的专门机制。以下是建议的替代方案。
对于较短的行内注释，可以使用 title 属性。。
在这个例子中，对话框中有两部分是通过 title 属性，
使用类似脚注的内容注释的。
<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 属性，
它们没有按照本规范的要求把该属性以可访问的方式暴露出来。
（例如，需要类似鼠标的指点设备才能让提示显示出来，这就排除了纯键盘用户和触摸设备用户，
这里面包括任何一个使用现代手机和平板的用户）。
如果使用 title 属性，可以使用 CSS 来吸引读者注意
这个有 title 属性的元素。
例如，下面的 CSS 在有 title 属性的元素下面画了一条虚线。
[title] { border-bottom: thin dashed; }
对于更长的注释，应该使用 a 元素，指向文档后面的一个元素。
根据惯例，这个超链接的内容是一个方括号中的数字。
在这个例子中，对话框中的脚注链接到了对话框下面的一个段落。 然后这个段落又链接回对话框，让用户可以返回脚注的位置。
<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 元素。
在这个例子中，对话框后给出了一个边栏，里面给出了一些上下文。
<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 或 caption 元素中，
或者周围的文章中。
在这个例子中， 表格的单元格中有一些来自文章脚注。
使用了一个 figure 元素为表格和脚注一起给出了一个图例。
<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 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 fieldsetThis definition is used to determine what elements are focusable and
which elements match the :enabled and
:disabled pseudo
classes.
CSS Values and Units 规范把 'attr()' 函数的属性名的大小写敏感性留给宿主语言来定义。 [CSSVALUES]
当比较 CSS 'attr()' 函数的属性名部分与 HTML 文档 中的 HTML 元素 的 无命名空间的属性名时， CSS 'attr()' 函数的属性名部分首先必须 转换为 ASCII 小写。 该函数与其他属性对比时必须根据它原有的大小写。 在上述两种情况下，比较过程都是大小写敏感的。
这与比较 CSS 属性选择器 的名字部分是一样的， 在下一节中说明。
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, to match the values must be identical to each other (and therefore 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 identical to each other 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]
:definedSupport in all current engines.
The :defined pseudo-class must match
any element that is defined.
:linkSupport in all current engines.
:visitedSupport in all current engines.
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.
:activeSupport in all current engines.
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-classThe element is being activated.
label element that is
currently matching :activeThe element is being activated.
button elementinput element whose type attribute is in the Submit Button, Image Button, Reset
Button, or Button stateThe 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 attributearea element that has an href attributelink element that has an href attributeThe 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).
:hoverSupport in all current engines.
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.
:focusSupport in all current engines.
For the purposes of the CSS :focus
pseudo-class, an element has the focus when:
its top-level browsing context has the system 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.
:targetSupport in all current engines.
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]
:enabledSupport in all current engines.
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.
:disabledSupport in all current engines.
The :disabled pseudo-class must match
any element that is actually disabled.
:checkedSupport in all current engines.
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 trueinput elements whose type attribute is in
the Radio Button state and whose checkedness state is trueoption elements whose selectedness is true:indeterminateSupport in all current engines.
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 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:defaultSupport in all current engines.
The :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-shownThe :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.:validSupport in all current engines.
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
constraintsfieldset elements that have no descendant elements that themselves are candidates for constraint validation but do
not satisfy their constraints:invalidSupport in all current engines.
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
constraintsfieldset elements that have of one or more descendant elements that themselves
are candidates for constraint
validation but do not satisfy their
constraints:in-rangeSupport in all current engines.
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-rangeSupport in all current engines.
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.
:requiredSupport in all current engines.
The :required pseudo-class must match
any element falling into one of the following categories:
:optionalSupport in all current engines.
The :optional pseudo-class must match
any element falling into one of the following categories:
:read-onlySupport in all current engines.
:read-writeSupport in all current engines.
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 disabledinput elements nor textarea elementsThe :read-only pseudo-class must match
all other HTML elements.
:dir(ltr)Support in one engine only.
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'.
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]