You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
2213 lines
138 KiB
2213 lines
138 KiB
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
|
|
<html lang="en-US-x-Hixie" ><head><title>4.6 Text-level semantics — HTML5 </title><style type="text/css">
|
|
pre { margin-left: 2em; white-space: pre-wrap; }
|
|
h2 { margin: 3em 0 1em 0; }
|
|
h3 { margin: 2.5em 0 1em 0; }
|
|
h4 { margin: 2.5em 0 0.75em 0; }
|
|
h5, h6 { margin: 2.5em 0 1em; }
|
|
h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
|
|
h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
|
|
p { margin: 1em 0; }
|
|
hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
|
|
dl, dd { margin-top: 0; margin-bottom: 0; }
|
|
dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
|
|
dt + dt { margin-top: 0; }
|
|
dd dt { margin-top: 0.25em; margin-bottom: 0; }
|
|
dd p { margin-top: 0; }
|
|
dd dl + p { margin-top: 1em; }
|
|
dd table + p { margin-top: 1em; }
|
|
p + * > li, dd li { margin: 1em 0; }
|
|
dt, dfn { font-weight: bold; font-style: normal; }
|
|
dt dfn { font-style: italic; }
|
|
pre, code { font-size: inherit; font-family: monospace; font-variant: normal; }
|
|
pre strong { color: black; font: inherit; font-weight: bold; background: yellow; }
|
|
pre em { font-weight: bolder; font-style: normal; }
|
|
@media screen { code { color: orangered; } code :link, code :visited { color: inherit; } }
|
|
var sub { vertical-align: bottom; font-size: smaller; position: relative; top: 0.1em; }
|
|
table { border-collapse: collapse; border-style: hidden hidden none hidden; }
|
|
table thead, table tbody { border-bottom: solid; }
|
|
table tbody th:first-child { border-left: solid; }
|
|
table tbody th { text-align: left; }
|
|
table td, table th { border-left: solid; border-right: solid; border-bottom: solid thin; vertical-align: top; padding: 0.2em; }
|
|
blockquote { margin: 0 0 0 2em; border: 0; padding: 0; font-style: italic; }
|
|
|
|
.bad, .bad *:not(.XXX) { color: gray; border-color: gray; background: transparent; }
|
|
.matrix, .matrix td { border: none; text-align: right; }
|
|
.matrix { margin-left: 2em; }
|
|
.dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; }
|
|
.dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; }
|
|
.dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; }
|
|
|
|
.toc dfn, h1 dfn, h2 dfn, h3 dfn, h4 dfn, h5 dfn, h6 dfn { font: inherit; }
|
|
img.extra { float: right; }
|
|
pre.idl { border: solid thin; background: #EEEEEE; color: black; padding: 0.5em 1em; }
|
|
pre.idl :link, pre.idl :visited { color: inherit; background: transparent; }
|
|
pre.css { border: solid thin; background: #FFFFEE; color: black; padding: 0.5em 1em; }
|
|
pre.css:first-line { color: #AAAA50; }
|
|
dl.domintro { color: green; margin: 2em 0 2em 2em; padding: 0.5em 1em; border: none; background: #DDFFDD; }
|
|
hr + dl.domintro, div.impl + dl.domintro { margin-top: 2.5em; margin-bottom: 1.5em; }
|
|
dl.domintro dt, dl.domintro dt * { color: black; text-decoration: none; }
|
|
dl.domintro dd { margin: 0.5em 0 1em 2em; padding: 0; }
|
|
dl.domintro dd p { margin: 0.5em 0; }
|
|
dl.switch { padding-left: 2em; }
|
|
dl.switch > dt { text-indent: -1.5em; }
|
|
dl.switch > dt:before { content: '\21AA'; padding: 0 0.5em 0 0; display: inline-block; width: 1em; text-align: right; line-height: 0.5em; }
|
|
dl.triple { padding: 0 0 0 1em; }
|
|
dl.triple dt, dl.triple dd { margin: 0; display: inline }
|
|
dl.triple dt:after { content: ':'; }
|
|
dl.triple dd:after { content: '\A'; white-space: pre; }
|
|
.diff-old { text-decoration: line-through; color: silver; background: transparent; }
|
|
.diff-chg, .diff-new { text-decoration: underline; color: green; background: transparent; }
|
|
a .diff-new { border-bottom: 1px blue solid; }
|
|
|
|
h2 { page-break-before: always; }
|
|
h1, h2, h3, h4, h5, h6 { page-break-after: avoid; }
|
|
h1 + h2, hr + h2.no-toc { page-break-before: auto; }
|
|
|
|
p > span:not([title=""]):not([class="XXX"]):not([class="impl"]):not([class="note"]),
|
|
li > span:not([title=""]):not([class="XXX"]):not([class="impl"]):not([class="note"]), { border-bottom: solid #9999CC; }
|
|
|
|
div.head { margin: 0 0 1em; padding: 1em 0 0 0; }
|
|
div.head p { margin: 0; }
|
|
div.head h1 { margin: 0; }
|
|
div.head .logo { float: right; margin: 0 1em; }
|
|
div.head .logo img { border: none } /* remove border from top image */
|
|
div.head dl { margin: 1em 0; }
|
|
div.head p.copyright, div.head p.alt { font-size: x-small; font-style: oblique; margin: 0; }
|
|
|
|
body > .toc > li { margin-top: 1em; margin-bottom: 1em; }
|
|
body > .toc.brief > li { margin-top: 0.35em; margin-bottom: 0.35em; }
|
|
body > .toc > li > * { margin-bottom: 0.5em; }
|
|
body > .toc > li > * > li > * { margin-bottom: 0.25em; }
|
|
.toc, .toc li { list-style: none; }
|
|
|
|
.brief { margin-top: 1em; margin-bottom: 1em; line-height: 1.1; }
|
|
.brief li { margin: 0; padding: 0; }
|
|
.brief li p { margin: 0; padding: 0; }
|
|
|
|
.category-list { margin-top: -0.75em; margin-bottom: 1em; line-height: 1.5; }
|
|
.category-list::before { content: '\21D2\A0'; font-size: 1.2em; font-weight: 900; }
|
|
.category-list li { display: inline; }
|
|
.category-list li:not(:last-child)::after { content: ', '; }
|
|
.category-list li > span, .category-list li > a { text-transform: lowercase; }
|
|
.category-list li * { text-transform: none; } /* don't affect <code> nested in <a> */
|
|
|
|
.XXX { color: #E50000; background: white; border: solid red; padding: 0.5em; margin: 1em 0; }
|
|
.XXX > :first-child { margin-top: 0; }
|
|
p .XXX { line-height: 3em; }
|
|
.annotation { border: solid thin black; background: #0C479D; color: white; position: relative; margin: 8px 0 20px 0; }
|
|
.annotation:before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 6px -6px -6px 6px; background: #333333; z-index: -1; content: ''; }
|
|
.annotation :link, .annotation :visited { color: inherit; }
|
|
.annotation :link:hover, .annotation :visited:hover { background: transparent; }
|
|
.annotation span { border: none ! important; }
|
|
.note { color: green; background: transparent; font-family: sans-serif; }
|
|
.warning { color: red; background: transparent; }
|
|
.note, .warning { font-weight: bolder; font-style: italic; }
|
|
p.note, div.note { padding: 0.5em 2em; }
|
|
span.note { padding: 0 2em; }
|
|
.note p:first-child, .warning p:first-child { margin-top: 0; }
|
|
.note p:last-child, .warning p:last-child { margin-bottom: 0; }
|
|
.warning:before { font-style: normal; }
|
|
p.note:before { content: 'Note: '; }
|
|
p.warning:before { content: '\26A0 Warning! '; }
|
|
|
|
.bookkeeping:before { display: block; content: 'Bookkeeping details'; font-weight: bolder; font-style: italic; }
|
|
.bookkeeping { font-size: 0.8em; margin: 2em 0; }
|
|
.bookkeeping p { margin: 0.5em 2em; display: list-item; list-style: square; }
|
|
.bookkeeping dt { margin: 0.5em 2em 0; }
|
|
.bookkeeping dd { margin: 0 3em 0.5em; }
|
|
|
|
h4 { position: relative; z-index: 3; }
|
|
h4 + .element, h4 + div + .element { margin-top: -2.5em; padding-top: 2em; }
|
|
.element {
|
|
background: #EEEEFF;
|
|
color: black;
|
|
margin: 0 0 1em 0.15em;
|
|
padding: 0 1em 0.25em 0.75em;
|
|
border-left: solid #9999FF 0.25em;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
.element:before {
|
|
position: absolute;
|
|
z-index: 2;
|
|
top: 0;
|
|
left: -1.15em;
|
|
height: 2em;
|
|
width: 0.9em;
|
|
background: #EEEEFF;
|
|
content: ' ';
|
|
border-style: none none solid solid;
|
|
border-color: #9999FF;
|
|
border-width: 0.25em;
|
|
}
|
|
|
|
.example { display: block; color: #222222; background: #FCFCFC; border-left: double; margin-left: 2em; padding-left: 1em; }
|
|
td > .example:only-child { margin: 0 0 0 0.1em; }
|
|
|
|
ul.domTree, ul.domTree ul { padding: 0 0 0 1em; margin: 0; }
|
|
ul.domTree li { padding: 0; margin: 0; list-style: none; position: relative; }
|
|
ul.domTree li li { list-style: none; }
|
|
ul.domTree li:first-child::before { position: absolute; top: 0; height: 0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; }
|
|
ul.domTree li:not(:last-child)::after { position: absolute; top: 0; bottom: -0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; }
|
|
ul.domTree span { font-style: italic; font-family: serif; }
|
|
ul.domTree .t1 code { color: purple; font-weight: bold; }
|
|
ul.domTree .t2 { font-style: normal; font-family: monospace; }
|
|
ul.domTree .t2 .name { color: black; font-weight: bold; }
|
|
ul.domTree .t2 .value { color: blue; font-weight: normal; }
|
|
ul.domTree .t3 code, .domTree .t4 code, .domTree .t5 code { color: gray; }
|
|
ul.domTree .t7 code, .domTree .t8 code { color: green; }
|
|
ul.domTree .t10 code { color: teal; }
|
|
|
|
body.dfnEnabled dfn { cursor: pointer; }
|
|
.dfnPanel {
|
|
display: inline;
|
|
position: absolute;
|
|
z-index: 10;
|
|
height: auto;
|
|
width: auto;
|
|
padding: 0.5em 0.75em;
|
|
font: small sans-serif, Droid Sans Fallback;
|
|
background: #DDDDDD;
|
|
color: black;
|
|
border: outset 0.2em;
|
|
}
|
|
.dfnPanel * { margin: 0; padding: 0; font: inherit; text-indent: 0; }
|
|
.dfnPanel :link, .dfnPanel :visited { color: black; }
|
|
.dfnPanel p { font-weight: bolder; }
|
|
.dfnPanel * + p { margin-top: 0.25em; }
|
|
.dfnPanel li { list-style-position: inside; }
|
|
|
|
#configUI { position: absolute; z-index: 20; top: 10em; right: 1em; width: 11em; font-size: small; }
|
|
#configUI p { margin: 0.5em 0; padding: 0.3em; background: #EEEEEE; color: black; border: inset thin; }
|
|
#configUI p label { display: block; }
|
|
#configUI #updateUI, #configUI .loginUI { text-align: center; }
|
|
#configUI input[type=button] { display: block; margin: auto; }
|
|
|
|
fieldset { margin: 1em; padding: 0.5em 1em; }
|
|
fieldset > legend + * { margin-top: 0; }
|
|
fieldset > :last-child { margin-bottom: 0; }
|
|
fieldset p { margin: 0.5em 0; }
|
|
|
|
.stability {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0; right: 0;
|
|
margin: 0 auto 0 auto !important;
|
|
z-index: 1000;
|
|
width: 50%;
|
|
background: maroon; color: yellow;
|
|
-webkit-border-radius: 1em 1em 0 0;
|
|
-moz-border-radius: 1em 1em 0 0;
|
|
border-radius: 1em 1em 0 0;
|
|
-moz-box-shadow: 0 0 1em #500;
|
|
-webkit-box-shadow: 0 0 1em #500;
|
|
box-shadow: 0 0 1em red;
|
|
padding: 0.5em 1em;
|
|
text-align: center;
|
|
}
|
|
.stability strong {
|
|
display: block;
|
|
}
|
|
.stability input {
|
|
appearance: none; margin: 0; border: 0; padding: 0.25em 0.5em; background: transparent; color: black;
|
|
position: absolute; top: -0.5em; right: 0; font: 1.25em sans-serif; text-align: center;
|
|
}
|
|
.stability input:hover {
|
|
color: white;
|
|
text-shadow: 0 0 2px black;
|
|
}
|
|
.stability input:active {
|
|
padding: 0.3em 0.45em 0.2em 0.55em;
|
|
}
|
|
.stability :link, .stability :visited,
|
|
.stability :link:hover, .stability :visited:hover {
|
|
background: transparent;
|
|
color: white;
|
|
}
|
|
|
|
</style><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D%0Ahtml%20%7B%20border:%20solid%20yellow;%20%7D%20.domintro:before%20%7B%20display:%20none;%20%7D" id="author" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D%20.domintro:before%20%7B%20background:%20%23FFEEEE;%20%7D" id="highlight" rel="alternate stylesheet" title="Highlight implementation
|
|
requirements"><link href="http://www.w3.org/StyleSheets/TR/W3C-WD" rel="stylesheet" type="text/css"><style type="text/css">
|
|
|
|
.applies thead th > * { display: block; }
|
|
.applies thead code { display: block; }
|
|
.applies tbody th { whitespace: nowrap; }
|
|
.applies td { text-align: center; }
|
|
.applies .yes { background: yellow; }
|
|
|
|
.matrix, .matrix td { border: hidden; text-align: right; }
|
|
.matrix { margin-left: 2em; }
|
|
|
|
.dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; }
|
|
.dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; }
|
|
.dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; }
|
|
|
|
td.eg { border-width: thin; text-align: center; }
|
|
|
|
#table-example-1 { border: solid thin; border-collapse: collapse; margin-left: 3em; }
|
|
#table-example-1 * { font-family: "Essays1743", serif; line-height: 1.01em; }
|
|
#table-example-1 caption { padding-bottom: 0.5em; }
|
|
#table-example-1 thead, #table-example-1 tbody { border: none; }
|
|
#table-example-1 th, #table-example-1 td { border: solid thin; }
|
|
#table-example-1 th { font-weight: normal; }
|
|
#table-example-1 td { border-style: none solid; vertical-align: top; }
|
|
#table-example-1 th { padding: 0.5em; vertical-align: middle; text-align: center; }
|
|
#table-example-1 tbody tr:first-child td { padding-top: 0.5em; }
|
|
#table-example-1 tbody tr:last-child td { padding-bottom: 1.5em; }
|
|
#table-example-1 tbody td:first-child { padding-left: 2.5em; padding-right: 0; width: 9em; }
|
|
#table-example-1 tbody td:first-child::after { content: leader(". "); }
|
|
#table-example-1 tbody td { padding-left: 2em; padding-right: 2em; }
|
|
#table-example-1 tbody td:first-child + td { width: 10em; }
|
|
#table-example-1 tbody td:first-child + td ~ td { width: 2.5em; }
|
|
#table-example-1 tbody td:first-child + td + td + td ~ td { width: 1.25em; }
|
|
|
|
.apple-table-examples { border: none; border-collapse: separate; border-spacing: 1.5em 0em; width: 40em; margin-left: 3em; }
|
|
.apple-table-examples * { font-family: "Times", serif; }
|
|
.apple-table-examples td, .apple-table-examples th { border: none; white-space: nowrap; padding-top: 0; padding-bottom: 0; }
|
|
.apple-table-examples tbody th:first-child { border-left: none; width: 100%; }
|
|
.apple-table-examples thead th:first-child ~ th { font-size: smaller; font-weight: bolder; border-bottom: solid 2px; text-align: center; }
|
|
.apple-table-examples tbody th::after, .apple-table-examples tfoot th::after { content: leader(". ") }
|
|
.apple-table-examples tbody th, .apple-table-examples tfoot th { font: inherit; text-align: left; }
|
|
.apple-table-examples td { text-align: right; vertical-align: top; }
|
|
.apple-table-examples.e1 tbody tr:last-child td { border-bottom: solid 1px; }
|
|
.apple-table-examples.e1 tbody + tbody tr:last-child td { border-bottom: double 3px; }
|
|
.apple-table-examples.e2 th[scope=row] { padding-left: 1em; }
|
|
.apple-table-examples sup { line-height: 0; }
|
|
|
|
.details-example img { vertical-align: top; }
|
|
|
|
#base64-table {
|
|
white-space: nowrap;
|
|
font-size: 0.6em;
|
|
column-width: 6em;
|
|
column-count: 5;
|
|
column-gap: 1em;
|
|
-moz-column-width: 6em;
|
|
-moz-column-count: 5;
|
|
-moz-column-gap: 1em;
|
|
-webkit-column-width: 6em;
|
|
-webkit-column-count: 5;
|
|
-webkit-column-gap: 1em;
|
|
}
|
|
#base64-table thead { display: none; }
|
|
#base64-table * { border: none; }
|
|
#base64-table tbody td:first-child:after { content: ':'; }
|
|
#base64-table tbody td:last-child { text-align: right; }
|
|
|
|
#named-character-references-table {
|
|
white-space: nowrap;
|
|
font-size: 0.6em;
|
|
column-width: 30em;
|
|
column-gap: 1em;
|
|
-moz-column-width: 30em;
|
|
-moz-column-gap: 1em;
|
|
-webkit-column-width: 30em;
|
|
-webkit-column-gap: 1em;
|
|
}
|
|
#named-character-references-table > table > tbody > tr > td:first-child + td,
|
|
#named-character-references-table > table > tbody > tr > td:last-child { text-align: center; }
|
|
#named-character-references-table > table > tbody > tr > td:last-child:hover > span { position: absolute; top: auto; left: auto; margin-left: 0.5em; line-height: 1.2; font-size: 5em; border: outset; padding: 0.25em 0.5em; background: white; width: 1.25em; height: auto; text-align: center; }
|
|
#named-character-references-table > table > tbody > tr#entity-CounterClockwiseContourIntegral > td:first-child { font-size: 0.5em; }
|
|
|
|
.glyph.control { color: red; }
|
|
|
|
@font-face {
|
|
font-family: 'Essays1743';
|
|
src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743.ttf');
|
|
}
|
|
@font-face {
|
|
font-family: 'Essays1743';
|
|
font-weight: bold;
|
|
src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-Bold.ttf');
|
|
}
|
|
@font-face {
|
|
font-family: 'Essays1743';
|
|
font-style: italic;
|
|
src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-Italic.ttf');
|
|
}
|
|
@font-face {
|
|
font-family: 'Essays1743';
|
|
font-style: italic;
|
|
font-weight: bold;
|
|
src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-BoldItalic.ttf');
|
|
}
|
|
|
|
</style><style type="text/css">
|
|
.domintro:before { display: table; margin: -1em -0.5em -0.5em auto; width: auto; content: 'This box is non-normative. Implementation requirements are given below this box.'; color: black; font-style: italic; border: solid 2px; background: white; padding: 0 0.25em; }
|
|
</style><script type="text/javascript">
|
|
function getCookie(name) {
|
|
var params = location.search.substr(1).split("&");
|
|
for (var index = 0; index < params.length; index++) {
|
|
if (params[index] == name)
|
|
return "1";
|
|
var data = params[index].split("=");
|
|
if (data[0] == name)
|
|
return unescape(data[1]);
|
|
}
|
|
var cookies = document.cookie.split("; ");
|
|
for (var index = 0; index < cookies.length; index++) {
|
|
var data = cookies[index].split("=");
|
|
if (data[0] == name)
|
|
return unescape(data[1]);
|
|
}
|
|
return null;
|
|
}
|
|
</script>
|
|
<script src="link-fixup.js" type="text/javascript"></script>
|
|
<link href="style.css" rel="stylesheet"><link href="grouping-content.html" title="4.5 Grouping content" rel="prev">
|
|
<link href="spec.html#contents" title="Table of contents" rel="index">
|
|
<link href="edits.html" title="4.7 Edits" rel="next">
|
|
</head><body><div class="head" id="head">
|
|
<div id="multipage-common">
|
|
<p class="stability" id="wip"><strong>This is a work in
|
|
progress!</strong> For the latest updates from the HTML WG, possibly
|
|
including important bug fixes, please look at the <a href="http://dev.w3.org/html5/spec/Overview.html">editor's draft</a> instead.
|
|
There may also be a more
|
|
<a href="http://www.w3.org/TR/html5">up-to-date Working Draft</a>
|
|
with changes based on resolution of Last Call issues.
|
|
<input onclick="closeWarning(this.parentNode)" type="button" value="╳⃝"></p>
|
|
<script type="text/javascript">
|
|
function closeWarning(element) {
|
|
element.parentNode.removeChild(element);
|
|
var date = new Date();
|
|
date.setDate(date.getDate()+4);
|
|
document.cookie = 'hide-obsolescence-warning=1; expires=' + date.toGMTString();
|
|
}
|
|
if (getCookie('hide-obsolescence-warning') == '1')
|
|
setTimeout(function () { document.getElementById('wip').parentNode.removeChild(document.getElementById('wip')); }, 2000);
|
|
</script></div>
|
|
|
|
<p><a href="http://www.w3.org/"><img alt="W3C" height="48" src="http://www.w3.org/Icons/w3c_home" width="72"></a></p>
|
|
|
|
<h1>HTML5</h1>
|
|
</div><div>
|
|
<a href="grouping-content.html" class="prev">4.5 Grouping content</a> –
|
|
<a href="spec.html#contents">Table of contents</a> –
|
|
<a href="edits.html" class="next">4.7 Edits</a>
|
|
<ol class="toc"><li><ol><li><a href="text-level-semantics.html#text-level-semantics"><span class="secno">4.6 </span>Text-level semantics</a>
|
|
<ol><li><a href="text-level-semantics.html#the-a-element"><span class="secno">4.6.1 </span>The <code>a</code> element</a></li><li><a href="text-level-semantics.html#the-em-element"><span class="secno">4.6.2 </span>The <code>em</code> element</a></li><li><a href="text-level-semantics.html#the-strong-element"><span class="secno">4.6.3 </span>The <code>strong</code> element</a></li><li><a href="text-level-semantics.html#the-small-element"><span class="secno">4.6.4 </span>The <code>small</code> element</a></li><li><a href="text-level-semantics.html#the-s-element"><span class="secno">4.6.5 </span>The <code>s</code> element</a></li><li><a href="text-level-semantics.html#the-cite-element"><span class="secno">4.6.6 </span>The <code>cite</code> element</a></li><li><a href="text-level-semantics.html#the-q-element"><span class="secno">4.6.7 </span>The <code>q</code> element</a></li><li><a href="text-level-semantics.html#the-dfn-element"><span class="secno">4.6.8 </span>The <code>dfn</code> element</a></li><li><a href="text-level-semantics.html#the-abbr-element"><span class="secno">4.6.9 </span>The <code>abbr</code> element</a></li><li><a href="text-level-semantics.html#the-time-element"><span class="secno">4.6.10 </span>The <code>time</code> element</a></li><li><a href="text-level-semantics.html#the-code-element"><span class="secno">4.6.11 </span>The <code>code</code> element</a></li><li><a href="text-level-semantics.html#the-var-element"><span class="secno">4.6.12 </span>The <code>var</code> element</a></li><li><a href="text-level-semantics.html#the-samp-element"><span class="secno">4.6.13 </span>The <code>samp</code> element</a></li><li><a href="text-level-semantics.html#the-kbd-element"><span class="secno">4.6.14 </span>The <code>kbd</code> element</a></li><li><a href="text-level-semantics.html#the-sub-and-sup-elements"><span class="secno">4.6.15 </span>The <code>sub</code> and <code>sup</code> elements</a></li><li><a href="text-level-semantics.html#the-i-element"><span class="secno">4.6.16 </span>The <code>i</code> element</a></li><li><a href="text-level-semantics.html#the-b-element"><span class="secno">4.6.17 </span>The <code>b</code> element</a></li><li><a href="text-level-semantics.html#the-u-element"><span class="secno">4.6.18 </span>The <code>u</code> element</a></li><li><a href="text-level-semantics.html#the-mark-element"><span class="secno">4.6.19 </span>The <code>mark</code> element</a></li><li><a href="text-level-semantics.html#the-ruby-element"><span class="secno">4.6.20 </span>The <code>ruby</code> element</a></li><li><a href="text-level-semantics.html#the-rt-element"><span class="secno">4.6.21 </span>The <code>rt</code> element</a></li><li><a href="text-level-semantics.html#the-rp-element"><span class="secno">4.6.22 </span>The <code>rp</code> element</a></li><li><a href="text-level-semantics.html#the-bdi-element"><span class="secno">4.6.23 </span>The <code>bdi</code> element</a></li><li><a href="text-level-semantics.html#the-bdo-element"><span class="secno">4.6.24 </span>The <code>bdo</code> element</a></li><li><a href="text-level-semantics.html#the-span-element"><span class="secno">4.6.25 </span>The <code>span</code> element</a></li><li><a href="text-level-semantics.html#the-br-element"><span class="secno">4.6.26 </span>The <code>br</code> element</a></li><li><a href="text-level-semantics.html#the-wbr-element"><span class="secno">4.6.27 </span>The <code>wbr</code> element</a></li><li><a href="text-level-semantics.html#usage-summary"><span class="secno">4.6.28 </span>Usage summary</a></li></ol></li></ol></li></ol></div>
|
|
|
|
<h3 id="text-level-semantics"><span class="secno">4.6 </span>Text-level semantics</h3><h4 id="the-a-element"><span class="secno">4.6.1 </span>The <dfn><code>a</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
|
|
<dd><a href="content-models.html#flow-content">Flow content</a>.</dd>
|
|
<dd>When the element only contains <a href="content-models.html#phrasing-content">phrasing content</a>: <a href="content-models.html#phrasing-content">phrasing content</a>.</dd>
|
|
<dd><a href="content-models.html#interactive-content">Interactive content</a>.</dd>
|
|
<dt>Contexts in which this element can be used:</dt>
|
|
<dd>When the element only contains <a href="content-models.html#phrasing-content">phrasing content</a>: where <a href="content-models.html#phrasing-content">phrasing content</a> is expected.</dd>
|
|
<dd>Otherwise: where <a href="content-models.html#flow-content">flow content</a> is expected.</dd>
|
|
<dt>Content model:</dt>
|
|
<dd><a href="content-models.html#transparent">Transparent</a>, but there must be no <a href="content-models.html#interactive-content">interactive content</a> descendant.</dd>
|
|
<dt>Content attributes:</dt>
|
|
<dd><a href="elements.html#global-attributes">Global attributes</a></dd>
|
|
<dd><code title="attr-hyperlink-href"><a href="links.html#attr-hyperlink-href">href</a></code></dd>
|
|
<dd><code title="attr-hyperlink-target"><a href="links.html#attr-hyperlink-target">target</a></code></dd>
|
|
<dd><code title="attr-hyperlink-rel"><a href="links.html#attr-hyperlink-rel">rel</a></code></dd>
|
|
<dd><code title="attr-hyperlink-media"><a href="links.html#attr-hyperlink-media">media</a></code></dd>
|
|
<dd><code title="attr-hyperlink-hreflang"><a href="links.html#attr-hyperlink-hreflang">hreflang</a></code></dd>
|
|
<dd><code title="attr-hyperlink-type"><a href="links.html#attr-hyperlink-type">type</a></code></dd>
|
|
<dt>DOM interface:</dt>
|
|
<dd>
|
|
<pre class="idl">interface <dfn id="htmlanchorelement">HTMLAnchorElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> {
|
|
stringifier attribute DOMString <a href="#dom-a-href" title="dom-a-href">href</a>;
|
|
attribute DOMString <a href="#dom-a-target" title="dom-a-target">target</a>;
|
|
attribute DOMString <a href="#dom-a-rel" title="dom-a-rel">rel</a>;
|
|
readonly attribute <a href="common-dom-interfaces.html#domtokenlist">DOMTokenList</a> <a href="#dom-a-rellist" title="dom-a-relList">relList</a>;
|
|
attribute DOMString <a href="#dom-a-media" title="dom-a-media">media</a>;
|
|
attribute DOMString <a href="#dom-a-hreflang" title="dom-a-hreflang">hreflang</a>;
|
|
attribute DOMString <a href="#dom-a-type" title="dom-a-type">type</a>;
|
|
|
|
attribute DOMString <a href="#dom-a-text" title="dom-a-text">text</a>;
|
|
|
|
// <a href="urls.html#url-decomposition-idl-attributes">URL decomposition IDL attributes</a>
|
|
attribute DOMString <a href="#dom-a-protocol" title="dom-a-protocol">protocol</a>;
|
|
attribute DOMString <a href="#dom-a-host" title="dom-a-host">host</a>;
|
|
attribute DOMString <a href="#dom-a-hostname" title="dom-a-hostname">hostname</a>;
|
|
attribute DOMString <a href="#dom-a-port" title="dom-a-port">port</a>;
|
|
attribute DOMString <a href="#dom-a-pathname" title="dom-a-pathname">pathname</a>;
|
|
attribute DOMString <a href="#dom-a-search" title="dom-a-search">search</a>;
|
|
attribute DOMString <a href="#dom-a-hash" title="dom-a-hash">hash</a>;
|
|
};</pre>
|
|
</dd>
|
|
</dl><p>If the <code><a href="#the-a-element">a</a></code> element has an <code title="attr-hyperlink-href"><a href="links.html#attr-hyperlink-href">href</a></code> attribute, then it
|
|
<a href="rendering.html#represents">represents</a> a <a href="links.html#hyperlink">hyperlink</a> (a hypertext
|
|
anchor).</p><p>If the <code><a href="#the-a-element">a</a></code> element has no <code title="attr-hyperlink-href"><a href="links.html#attr-hyperlink-href">href</a></code> attribute, then the element
|
|
<a href="rendering.html#represents">represents</a> a placeholder for where a link might
|
|
otherwise have been placed, if it had been relevant.</p><p>The <code title="attr-hyperlink-target"><a href="links.html#attr-hyperlink-target">target</a></code>,
|
|
<code title="attr-hyperlink-rel"><a href="links.html#attr-hyperlink-rel">rel</a></code>, <code title="attr-hyperlink-media"><a href="links.html#attr-hyperlink-media">media</a></code>, <code title="attr-hyperlink-hreflang"><a href="links.html#attr-hyperlink-hreflang">hreflang</a></code>, and <code title="attr-hyperlink-type"><a href="links.html#attr-hyperlink-type">type</a></code> attributes must be omitted
|
|
if the <code title="attr-hyperlink-href"><a href="links.html#attr-hyperlink-href">href</a></code> attribute is
|
|
not present.</p><div class="example">
|
|
<p>If a site uses a consistent navigation toolbar on every page,
|
|
then the link that would normally link to the page itself could be
|
|
marked up using an <code><a href="#the-a-element">a</a></code> element:</p>
|
|
<pre><nav>
|
|
<ul>
|
|
<li> <a href="/">Home</a> </li>
|
|
<li> <a href="/news">News</a> </li>
|
|
<li> <a>Examples</a> </li>
|
|
<li> <a href="/legal">Legal</a> </li>
|
|
</ul>
|
|
</nav></pre>
|
|
</div><div class="impl">
|
|
|
|
<p>The <code title="attr-hyperlink-href"><a href="links.html#attr-hyperlink-href">href</a></code>, <code title="attr-hyperlink-target"><a href="links.html#attr-hyperlink-target">target</a></code>
|
|
attributes affect what
|
|
happens when users <a href="links.html#following-hyperlinks" title="following hyperlinks">follow
|
|
hyperlinks</a> created using the <code><a href="#the-a-element">a</a></code> element. The
|
|
<code title="attr-hyperlink-rel"><a href="links.html#attr-hyperlink-rel">rel</a></code>, <code title="attr-hyperlink-media"><a href="links.html#attr-hyperlink-media">media</a></code>, <code title="attr-hyperlink-hreflang"><a href="links.html#attr-hyperlink-hreflang">hreflang</a></code>, and <code title="attr-hyperlink-type"><a href="links.html#attr-hyperlink-type">type</a></code> attributes may be used to
|
|
indicate to the user the likely nature of the target resource before
|
|
the user follows the link.</p>
|
|
|
|
<p>The <a href="content-models.html#activation-behavior">activation behavior</a> of <code><a href="#the-a-element">a</a></code> elements
|
|
that create <a href="links.html#hyperlink" title="hyperlink">hyperlinks</a> is to run the
|
|
following steps:</p>
|
|
|
|
<ol><li><p>If the <code title="event-click"><a href="infrastructure.html#event-click">click</a></code>
|
|
event in question is not <a href="infrastructure.html#concept-events-trusted" title="concept-events-trusted">trusted</a> (i.e. a <code title="dom-click"><a href="editing.html#dom-click">click()</a></code> method call was the reason for the
|
|
event being dispatched), and the <code><a href="#the-a-element">a</a></code> element's <code title="attr-hyperlink-target"><a href="links.html#attr-hyperlink-target">target</a></code> attribute is such that
|
|
applying <a href="browsers.html#the-rules-for-choosing-a-browsing-context-given-a-browsing-context-name">the rules for choosing a browsing context given a
|
|
browsing context name</a>, using the value of the <code title="attr-hyperlink-target"><a href="links.html#attr-hyperlink-target">target</a></code> attribute as the
|
|
browsing context name, would result in there not being a chosen
|
|
browsing context, then raise an <code><a href="common-dom-interfaces.html#invalid_access_err">INVALID_ACCESS_ERR</a></code>
|
|
exception and abort these steps.</p></li>
|
|
|
|
<li><p>If the target of the <code title="event-click"><a href="infrastructure.html#event-click">click</a></code>
|
|
event is an <code><a href="embedded-content-1.html#the-img-element">img</a></code> element with an <code title="attr-img-ismap"><a href="embedded-content-1.html#attr-img-ismap">ismap</a></code> attribute specified, then
|
|
server-side image map processing must be performed, as follows:</p>
|
|
|
|
<ol><li>If the <code title="event-click"><a href="infrastructure.html#event-click">click</a></code> event was a
|
|
real pointing-device-triggered <code title="event-click"><a href="infrastructure.html#event-click">click</a></code> event on the <code><a href="embedded-content-1.html#the-img-element">img</a></code>
|
|
element, then let <var title="">x</var> be the distance in CSS
|
|
pixels from the left edge of the image's left border, if it has
|
|
one, or the left edge of the image otherwise, to the location of
|
|
the click, and let <var title="">y</var> be the distance in CSS
|
|
pixels from the top edge of the image's top border, if it has
|
|
one, or the top edge of the image otherwise, to the location of
|
|
the click. Otherwise, let <var title="">x</var> and <var title="">y</var> be zero.</li>
|
|
|
|
<li>Let the <dfn id="hyperlink-suffix"><var>hyperlink suffix</var></dfn> be a U+003F
|
|
QUESTION MARK character, the value of <var title="">x</var>
|
|
expressed as a base-ten integer using ASCII digits, a U+002C
|
|
COMMA character (,), and the value of <var title="">y</var>
|
|
expressed as a base-ten integer using ASCII digits. ASCII digits
|
|
are the characters in the range U+0030 DIGIT ZERO (0) to U+0039
|
|
DIGIT NINE (9).</li>
|
|
|
|
</ol></li>
|
|
|
|
<li><p>Finally, the user agent must <a href="links.html#following-hyperlinks" title="following
|
|
hyperlinks">follow the hyperlink</a> created by the
|
|
<code><a href="#the-a-element">a</a></code> element. If the steps above defined a <var><a href="#hyperlink-suffix">hyperlink
|
|
suffix</a></var>, then take that into account when following the
|
|
hyperlink.</p></li>
|
|
|
|
</ol></div><dl class="domintro"><dt><var title="">a</var> . <code title="dom-a-text"><a href="#dom-a-text">text</a></code></dt>
|
|
|
|
<dd>
|
|
|
|
<p>Same as <code><a href="infrastructure.html#textcontent">textContent</a></code>.</p>
|
|
|
|
</dd>
|
|
|
|
</dl><div class="impl">
|
|
|
|
<p>The IDL attributes <dfn id="dom-a-href" title="dom-a-href"><code>href</code></dfn>,
|
|
<dfn id="dom-a-target" title="dom-a-target"><code>target</code></dfn>, <dfn id="dom-a-rel" title="dom-a-rel"><code>rel</code></dfn>, <dfn id="dom-a-media" title="dom-a-media"><code>media</code></dfn>, <dfn id="dom-a-hreflang" title="dom-a-hreflang"><code>hreflang</code></dfn>, and <dfn id="dom-a-type" title="dom-a-type"><code>type</code></dfn>, must
|
|
<a href="common-dom-interfaces.html#reflect">reflect</a> the respective content attributes of the same
|
|
name.</p>
|
|
|
|
<p>The IDL attribute <dfn id="dom-a-rellist" title="dom-a-rellist"><code>relList</code></dfn> must
|
|
<a href="common-dom-interfaces.html#reflect">reflect</a> the <code title="attr-hyperlink-rel"><a href="links.html#attr-hyperlink-rel">rel</a></code>
|
|
content attribute.</p>
|
|
|
|
<p>The <dfn id="dom-a-text" title="dom-a-text"><code>text</code></dfn> IDL
|
|
attribute, on getting, must return the same value as the
|
|
<code><a href="infrastructure.html#textcontent">textContent</a></code> IDL attribute on the element, and on
|
|
setting, must act as if the <code><a href="infrastructure.html#textcontent">textContent</a></code> IDL attribute
|
|
on the element had been set to the new value.</p>
|
|
|
|
<p>The <code><a href="#the-a-element">a</a></code> element also supports the complement of
|
|
<a href="urls.html#url-decomposition-idl-attributes">URL decomposition IDL attributes</a>, <dfn id="dom-a-protocol" title="dom-a-protocol"><code>protocol</code></dfn>, <dfn id="dom-a-host" title="dom-a-host"><code>host</code></dfn>, <dfn id="dom-a-port" title="dom-a-port"><code>port</code></dfn>, <dfn id="dom-a-hostname" title="dom-a-hostname"><code>hostname</code></dfn>, <dfn id="dom-a-pathname" title="dom-a-pathname"><code>pathname</code></dfn>, <dfn id="dom-a-search" title="dom-a-search"><code>search</code></dfn>, and <dfn id="dom-a-hash" title="dom-a-hash"><code>hash</code></dfn>. These must follow the
|
|
rules given for <a href="urls.html#url-decomposition-idl-attributes">URL decomposition IDL attributes</a>, with
|
|
the <a href="urls.html#concept-uda-input" title="concept-uda-input">input</a> being the result of
|
|
<a href="urls.html#resolve-a-url" title="resolve a url">resolving</a> the element's <code title="attr-hyperlink-href"><a href="links.html#attr-hyperlink-href">href</a></code> attribute relative to the
|
|
element, if there is such an attribute and resolving it is
|
|
successful, or the empty string otherwise; and the <a href="urls.html#concept-uda-setter" title="concept-uda-setter">common setter action</a> being the
|
|
same as setting the element's <code title="attr-hyperlink-href"><a href="links.html#attr-hyperlink-href">href</a></code> attribute to the new output
|
|
value.</p>
|
|
|
|
</div><div class="example">
|
|
|
|
<p>The <code><a href="#the-a-element">a</a></code> element may be wrapped around entire
|
|
paragraphs, lists, tables, and so forth, even entire sections, so
|
|
long as there is no interactive content within (e.g. buttons or
|
|
other links). This example shows how this can be used to make an
|
|
entire advertising block into a link:</p>
|
|
|
|
<pre><aside class="advertising">
|
|
<h1>Advertising</h1>
|
|
<a href="http://ad.example.com/?adid=1929&amp;pubid=1422">
|
|
<section>
|
|
<h1>Mellblomatic 9000!</h1>
|
|
<p>Turn all your widgets into mellbloms!</p>
|
|
<p>Only $9.99 plus shipping and handling.</p>
|
|
</section>
|
|
</a>
|
|
<a href="http://ad.example.com/?adid=375&amp;pubid=1422">
|
|
<section>
|
|
<h1>The Mellblom Browser</h1>
|
|
<p>Web browsing at the speed of light.</p>
|
|
<p>No other browser goes faster!</p>
|
|
</section>
|
|
</a>
|
|
</aside></pre>
|
|
|
|
</div><h4 id="the-em-element"><span class="secno">4.6.2 </span>The <dfn><code>em</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
|
|
<dd><a href="content-models.html#flow-content">Flow content</a>.</dd>
|
|
<dd><a href="content-models.html#phrasing-content">Phrasing content</a>.</dd>
|
|
<dt>Contexts in which this element can be used:</dt>
|
|
<dd>Where <a href="content-models.html#phrasing-content">phrasing content</a> is expected.</dd>
|
|
<dt>Content model:</dt>
|
|
<dd><a href="content-models.html#phrasing-content">Phrasing content</a>.</dd>
|
|
<dt>Content attributes:</dt>
|
|
<dd><a href="elements.html#global-attributes">Global attributes</a></dd>
|
|
<dt>DOM interface:</dt>
|
|
<dd>Uses <code><a href="elements.html#htmlelement">HTMLElement</a></code>.</dd>
|
|
</dl><p>The <code><a href="#the-em-element">em</a></code> element <a href="rendering.html#represents">represents</a> stress
|
|
emphasis of its contents.</p><p>The level of emphasis that a particular piece of content has is
|
|
given by its number of ancestor <code><a href="#the-em-element">em</a></code> elements.</p><p>The placement of emphasis changes the meaning of the sentence.
|
|
The element thus forms an integral part of the content. The precise
|
|
way in which emphasis is used in this way depends on the
|
|
language.</p><div class="example">
|
|
|
|
<p>These examples show how changing the emphasis changes the
|
|
meaning. First, a general statement of fact, with no emphasis:</p>
|
|
|
|
<pre><p>Cats are cute animals.</p></pre>
|
|
|
|
<p>By emphasizing the first word, the statement implies that the
|
|
kind of animal under discussion is in question (maybe someone is
|
|
asserting that dogs are cute):</p>
|
|
|
|
<pre><p><em>Cats</em> are cute animals.</p></pre>
|
|
|
|
<p>Moving the emphasis to the verb, one highlights that the truth
|
|
of the entire sentence is in question (maybe someone is saying cats
|
|
are not cute):</p>
|
|
|
|
<pre><p>Cats <em>are</em> cute animals.</p></pre>
|
|
|
|
<p>By moving it to the adjective, the exact nature of the cats
|
|
is reasserted (maybe someone suggested cats were <em>mean</em>
|
|
animals):</p>
|
|
|
|
<pre><p>Cats are <em>cute</em> animals.</p></pre>
|
|
|
|
<p>Similarly, if someone asserted that cats were vegetables,
|
|
someone correcting this might emphasize the last word:</p>
|
|
|
|
<pre><p>Cats are cute <em>animals</em>.</p></pre>
|
|
|
|
<p>By emphasizing the entire sentence, it becomes clear that the
|
|
speaker is fighting hard to get the point across. This kind of
|
|
emphasis also typically affects the punctuation, hence the
|
|
exclamation mark here.</p>
|
|
|
|
<pre><p><em>Cats are cute animals!</em></p></pre>
|
|
|
|
<p>Anger mixed with emphasizing the cuteness could lead to markup
|
|
such as:</p>
|
|
|
|
<pre><p><em>Cats are <em>cute</em> animals!</em></p></pre>
|
|
|
|
</div><div class="note">
|
|
|
|
<p>The <code><a href="#the-em-element">em</a></code> element isn't a generic "italics"
|
|
element. Sometimes, text is intended to stand out from the rest of
|
|
the paragraph, as if it was in a different mood or voice. For this,
|
|
the <code><a href="#the-i-element">i</a></code> element is more appropriate.</p>
|
|
|
|
<p>The <code><a href="#the-em-element">em</a></code> element also isn't intended to convey
|
|
importance; for that purpose, the <code><a href="#the-strong-element">strong</a></code> element is
|
|
more appropriate.</p>
|
|
|
|
|
|
</div><h4 id="the-strong-element"><span class="secno">4.6.3 </span>The <dfn><code>strong</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
|
|
<dd><a href="content-models.html#flow-content">Flow content</a>.</dd>
|
|
<dd><a href="content-models.html#phrasing-content">Phrasing content</a>.</dd>
|
|
<dt>Contexts in which this element can be used:</dt>
|
|
<dd>Where <a href="content-models.html#phrasing-content">phrasing content</a> is expected.</dd>
|
|
<dt>Content model:</dt>
|
|
<dd><a href="content-models.html#phrasing-content">Phrasing content</a>.</dd>
|
|
<dt>Content attributes:</dt>
|
|
<dd><a href="elements.html#global-attributes">Global attributes</a></dd>
|
|
<dt>DOM interface:</dt>
|
|
<dd>Uses <code><a href="elements.html#htmlelement">HTMLElement</a></code>.</dd>
|
|
</dl><p>The <code><a href="#the-strong-element">strong</a></code> element <a href="rendering.html#represents">represents</a> strong
|
|
importance for its contents.</p><p>The relative level of importance of a piece of content is given
|
|
by its number of ancestor <code><a href="#the-strong-element">strong</a></code> elements; each
|
|
<code><a href="#the-strong-element">strong</a></code> element increases the importance of its
|
|
contents.</p><p>Changing the importance of a piece of text with the
|
|
<code><a href="#the-strong-element">strong</a></code> element does not change the meaning of the
|
|
sentence.</p><div class="example">
|
|
<p>Here is an example of a warning notice in a game, with the
|
|
various parts marked up according to how important they are:</p>
|
|
|
|
<pre><p><strong>Warning.</strong> This dungeon is dangerous.
|
|
<strong>Avoid the ducks.</strong> Take any gold you find.
|
|
<strong><strong>Do not take any of the diamonds</strong>,
|
|
they are explosive and <strong>will destroy anything within
|
|
ten meters.</strong></strong> You have been warned.</p></pre>
|
|
</div><h4 id="the-small-element"><span class="secno">4.6.4 </span>The <dfn><code>small</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
|
|
<dd><a href="content-models.html#flow-content">Flow content</a>.</dd>
|
|
<dd><a href="content-models.html#phrasing-content">Phrasing content</a>.</dd>
|
|
<dt>Contexts in which this element can be used:</dt>
|
|
<dd>Where <a href="content-models.html#phrasing-content">phrasing content</a> is expected.</dd>
|
|
<dt>Content model:</dt>
|
|
<dd><a href="content-models.html#phrasing-content">Phrasing content</a>.</dd>
|
|
<dt>Content attributes:</dt>
|
|
<dd><a href="elements.html#global-attributes">Global attributes</a></dd>
|
|
<dt>DOM interface:</dt>
|
|
<dd>Uses <code><a href="elements.html#htmlelement">HTMLElement</a></code>.</dd>
|
|
</dl><p>The <code><a href="#the-small-element">small</a></code> element <a href="rendering.html#represents">represents</a> side
|
|
comments such as small print.</p><p class="note">Small print typically features disclaimers, caveats,
|
|
legal restrictions, or copyrights. Small print is also sometimes
|
|
used for attribution, or for satisfying licensing requirements.</p><p class="note">The <code><a href="#the-small-element">small</a></code> element does not
|
|
"de-emphasize" or lower the importance of text emphasized by the
|
|
<code><a href="#the-em-element">em</a></code> element or marked as important with the
|
|
<code><a href="#the-strong-element">strong</a></code> element. To mark text as not emphasized or
|
|
important, simply do not mark it up with the <code><a href="#the-em-element">em</a></code> or
|
|
<code><a href="#the-strong-element">strong</a></code> elements respectively.</p><p>The <code><a href="#the-small-element">small</a></code> element should not be used for extended
|
|
spans of text, such as multiple paragraphs, lists, or sections of
|
|
text. It is only intended for short runs of text. The text of a page
|
|
listing terms of use, for instance, would not be a suitable
|
|
candidate for the <code><a href="#the-small-element">small</a></code> element: in such a case, the
|
|
text is not a side comment, it is the main content of the page.</p><div class="example">
|
|
|
|
<p>In this example, the <code><a href="#the-small-element">small</a></code> element is used to
|
|
indicate that value-added tax is not included in a price of a hotel
|
|
room:</p>
|
|
|
|
<pre class="example"><dl>
|
|
<dt>Single room
|
|
<dd>199 € <small>breakfast included, VAT not included</small>
|
|
<dt>Double room
|
|
<dd>239 € <small>breakfast included, VAT not included</small>
|
|
</dl></pre>
|
|
|
|
</div><div class="example">
|
|
|
|
<p>In this second example, the <code><a href="#the-small-element">small</a></code> element is used
|
|
for a side comment in an article.</p>
|
|
|
|
<pre><p>Example Corp today announced record profits for the
|
|
second quarter <small>(Full Disclosure: Foo News is a subsidiary of
|
|
Example Corp)</small>, leading to speculation about a third quarter
|
|
merger with Demo Group.</p></pre>
|
|
|
|
<p>This is distinct from a sidebar, which might be multiple
|
|
paragraphs long and is removed from the main flow of text. In the
|
|
following example, we see a sidebar from the same article. This
|
|
sidebar also has small print, indicating the source of the
|
|
information in the sidebar.</p>
|
|
|
|
<pre><aside>
|
|
<h1>Example Corp</h1>
|
|
<p>This company mostly creates small software and Web
|
|
sites.</p>
|
|
<p>The Example Corp company mission is "To provide entertainment
|
|
and news on a sample basis".</p>
|
|
<p><small>Information obtained from <a
|
|
href="http://example.com/about.html">example.com</a> home
|
|
page.</small></p>
|
|
</aside></pre>
|
|
|
|
</div><div class="example">
|
|
|
|
<p>In this last example, the <code><a href="#the-small-element">small</a></code> element is marked
|
|
as being <em>important</em> small print.</p>
|
|
|
|
<pre><p><strong><small>Continued use of this service will result in a kiss.</small></strong></p></pre>
|
|
|
|
</div><h4 id="the-s-element"><span class="secno">4.6.5 </span>The <dfn><code>s</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
|
|
<dd><a href="content-models.html#flow-content">Flow content</a>.</dd>
|
|
<dd><a href="content-models.html#phrasing-content">Phrasing content</a>.</dd>
|
|
<dt>Contexts in which this element can be used:</dt>
|
|
<dd>Where <a href="content-models.html#phrasing-content">phrasing content</a> is expected.</dd>
|
|
<dt>Content model:</dt>
|
|
<dd><a href="content-models.html#phrasing-content">Phrasing content</a>.</dd>
|
|
<dt>Content attributes:</dt>
|
|
<dd><a href="elements.html#global-attributes">Global attributes</a></dd>
|
|
<dt>DOM interface:</dt>
|
|
<dd>Uses <code><a href="elements.html#htmlelement">HTMLElement</a></code>.</dd>
|
|
</dl><p>The <code><a href="#the-s-element">s</a></code> element <a href="rendering.html#represents">represents</a> contents that
|
|
are no longer accurate or no longer relevant.</p><p class="note">The <code><a href="#the-s-element">s</a></code> element is not appropriate when
|
|
indicating document edits; to mark a span of text as having been
|
|
removed from a document, use the <code><a href="edits.html#the-del-element">del</a></code> element.</p><div class="example">
|
|
|
|
<p>In this example a recommended retail price has been marked as no
|
|
longer relevant as the product in question has a new sale
|
|
price.</p>
|
|
|
|
<pre><p>Buy our Iced Tea and Lemonade!</p>
|
|
<p><s>Recommended retail price: $3.99 per bottle</s></p>
|
|
<p><strong>Now selling for just $2.99 a bottle!</strong></p></pre>
|
|
|
|
</div><h4 id="the-cite-element"><span class="secno">4.6.6 </span>The <dfn><code>cite</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
|
|
<dd><a href="content-models.html#flow-content">Flow content</a>.</dd>
|
|
<dd><a href="content-models.html#phrasing-content">Phrasing content</a>.</dd>
|
|
<dt>Contexts in which this element can be used:</dt>
|
|
<dd>Where <a href="content-models.html#phrasing-content">phrasing content</a> is expected.</dd>
|
|
<dt>Content model:</dt>
|
|
<dd><a href="content-models.html#phrasing-content">Phrasing content</a>.</dd>
|
|
<dt>Content attributes:</dt>
|
|
<dd><a href="elements.html#global-attributes">Global attributes</a></dd>
|
|
<dt>DOM interface:</dt>
|
|
<dd>Uses <code><a href="elements.html#htmlelement">HTMLElement</a></code>.</dd>
|
|
</dl><p>The <code><a href="#the-cite-element">cite</a></code> element <a href="rendering.html#represents">represents</a> the title
|
|
of a work (e.g.
|
|
a book,
|
|
a paper,
|
|
an essay,
|
|
a poem,
|
|
a score,
|
|
a song,
|
|
a script,
|
|
a film,
|
|
a TV show,
|
|
a game,
|
|
a sculpture,
|
|
a painting,
|
|
a theatre production,
|
|
a play,
|
|
an opera,
|
|
a musical,
|
|
an exhibition,
|
|
a legal case report,
|
|
etc). This can be a work that is being quoted or
|
|
referenced in detail (i.e. a citation), or it can just be a work
|
|
that is mentioned in passing.</p><p>A person's name is not the title of a work — even if people
|
|
call that person a piece of work — and the element must
|
|
therefore not be used to mark up people's names. (In some cases, the
|
|
<code><a href="#the-b-element">b</a></code> element might be appropriate for names; e.g. in a
|
|
gossip article where the names of famous people are keywords
|
|
rendered with a different style to draw attention to them. In other
|
|
cases, if an element is <em>really</em> needed, the
|
|
<code><a href="#the-span-element">span</a></code> element can be used.)</p><div class="example">
|
|
|
|
<p>This next example shows a typical use of the <code><a href="#the-cite-element">cite</a></code>
|
|
element:</p>
|
|
|
|
<pre><p>My favorite book is <cite>The Reality Dysfunction</cite> by
|
|
Peter F. Hamilton. My favorite comic is <cite>Pearls Before
|
|
Swine</cite> by Stephan Pastis. My favorite track is <cite>Jive
|
|
Samba</cite> by the Cannonball Adderley Sextet.</p></pre>
|
|
|
|
</div><div class="example">
|
|
|
|
<p>This is correct usage:</p>
|
|
|
|
<pre><p>According to the Wikipedia article <cite>HTML</cite>, as it
|
|
stood in mid-February 2008, leaving attribute values unquoted is
|
|
unsafe. This is obviously an over-simplification.</p></pre>
|
|
|
|
<p>The following, however, is incorrect usage, as the
|
|
<code><a href="#the-cite-element">cite</a></code> element here is containing far more than the
|
|
title of the work:</p>
|
|
|
|
<pre class="bad"><!-- do not copy this example, it is an example of bad usage! -->
|
|
<p>According to <cite>the Wikipedia article on HTML</cite>, as it
|
|
stood in mid-February 2008, leaving attribute values unquoted is
|
|
unsafe. This is obviously an over-simplification.</p></pre>
|
|
|
|
</div><div class="example">
|
|
|
|
<p>The <code><a href="#the-cite-element">cite</a></code> element is obviously a key part of any
|
|
citation in a bibliography, but it is only used to mark the
|
|
title:</p>
|
|
|
|
<pre><p><cite>Universal Declaration of Human Rights</cite>, United Nations,
|
|
December 1948. Adopted by General Assembly resolution 217 A (III).</p></pre>
|
|
|
|
</div><p class="note">A <em>citation</em> is not a <em>quote</em> (for
|
|
which the <code><a href="#the-q-element">q</a></code> element is appropriate).</p><div class="example">
|
|
|
|
<p>This is incorrect usage, because <code><a href="#the-cite-element">cite</a></code> is not for
|
|
quotes:</p>
|
|
|
|
<pre><p><cite>This is wrong!</cite>, said Ian.</p></pre>
|
|
|
|
<p>This is also incorrect usage, because a person is not a
|
|
work:</p>
|
|
|
|
<pre><p><q>This is still wrong!</q>, said <cite>Ian</cite>.</p></pre>
|
|
|
|
<p>The correct usage does not use a <code><a href="#the-cite-element">cite</a></code> element:</p>
|
|
|
|
<pre><p><q>This is correct</q>, said Ian.</p></pre>
|
|
|
|
<p>As mentioned above, the <code><a href="#the-b-element">b</a></code> element might be relevant
|
|
for marking names as being keywords in certain kinds of
|
|
documents:</p>
|
|
|
|
<pre><p>And then <b>Ian</b> said <q>this might be right, in a
|
|
gossip column, maybe!</q>.</p></pre>
|
|
|
|
</div><h4 id="the-q-element"><span class="secno">4.6.7 </span>The <dfn><code>q</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
|
|
<dd><a href="content-models.html#flow-content">Flow content</a>.</dd>
|
|
<dd><a href="content-models.html#phrasing-content">Phrasing content</a>.</dd>
|
|
<dt>Contexts in which this element can be used:</dt>
|
|
<dd>Where <a href="content-models.html#phrasing-content">phrasing content</a> is expected.</dd>
|
|
<dt>Content model:</dt>
|
|
<dd><a href="content-models.html#phrasing-content">Phrasing content</a>.</dd>
|
|
<dt>Content attributes:</dt>
|
|
<dd><a href="elements.html#global-attributes">Global attributes</a></dd>
|
|
<dd><code title="attr-q-cite"><a href="#attr-q-cite">cite</a></code></dd>
|
|
<dt>DOM interface:</dt>
|
|
<dd>Uses <code><a href="grouping-content.html#htmlquoteelement">HTMLQuoteElement</a></code>.</dd>
|
|
</dl><p>The <code><a href="#the-q-element">q</a></code> element <a href="rendering.html#represents">represents</a> some <a href="content-models.html#phrasing-content" title="phrasing content">phrasing content</a> quoted from another
|
|
source.</p><p>Quotation punctuation (such as quotation marks) that is quoting
|
|
the contents of the element must not appear immediately before,
|
|
after, or inside <code><a href="#the-q-element">q</a></code> elements; they will be inserted into
|
|
the rendering by the user agent.</p><p>Content inside a <code><a href="#the-q-element">q</a></code> element must be quoted from
|
|
another source, whose address, if it has one, may be cited in the
|
|
<dfn id="attr-q-cite" title="attr-q-cite"><code>cite</code></dfn> attribute. The
|
|
source may be fictional, as when quoting characters in a novel or
|
|
screenplay.</p><p>If the <code title="attr-q-cite"><a href="#attr-q-cite">cite</a></code> attribute is
|
|
present, it must be a <a href="urls.html#valid-url-potentially-surrounded-by-spaces">valid URL potentially surrounded by
|
|
spaces</a>. <span class="impl">To obtain the corresponding
|
|
citation link, the value of the attribute must be <a href="urls.html#resolve-a-url" title="resolve a url">resolved</a> relative to the element. User
|
|
agents should allow users to follow such citation links.</span></p><p>The <code><a href="#the-q-element">q</a></code> element must not be used in place of quotation
|
|
marks that do not represent quotes; for example, it is inappropriate
|
|
to use the <code><a href="#the-q-element">q</a></code> element for marking up sarcastic
|
|
statements.</p><p>The use of <code><a href="#the-q-element">q</a></code> elements to mark up quotations is
|
|
entirely optional; using explicit quotation punctuation without
|
|
<code><a href="#the-q-element">q</a></code> elements is just as correct.</p><div class="example">
|
|
|
|
<p>Here is a simple example of the use of the <code><a href="#the-q-element">q</a></code>
|
|
element:</p>
|
|
|
|
<pre><p>The man said <q>Things that are impossible just take
|
|
longer</q>. I disagreed with him.</p></pre>
|
|
|
|
</div><div class="example">
|
|
|
|
<p>Here is an example with both an explicit citation link in the
|
|
<code><a href="#the-q-element">q</a></code> element, and an explicit citation outside:</p>
|
|
|
|
<pre><p>The W3C page <cite>About W3C</cite> says the W3C's
|
|
mission is <q cite="http://www.w3.org/Consortium/">To lead the
|
|
World Wide Web to its full potential by developing protocols and
|
|
guidelines that ensure long-term growth for the Web</q>. I
|
|
disagree with this mission.</p></pre>
|
|
|
|
</div><div class="example">
|
|
|
|
<p>In the following example, the quotation itself contains a
|
|
quotation:</p>
|
|
|
|
<pre><p>In <cite>Example One</cite>, he writes <q>The man
|
|
said <q>Things that are impossible just take longer</q>. I
|
|
disagreed with him</q>. Well, I disagree even more!</p></pre>
|
|
|
|
</div><div class="example">
|
|
|
|
<p>In the following example, quotation marks are used instead of
|
|
the <code><a href="#the-q-element">q</a></code> element:</p>
|
|
|
|
<pre><p>His best argument was ❝I disagree❞, which
|
|
I thought was laughable.</p></pre>
|
|
|
|
</div><div class="example">
|
|
|
|
<p>In the following example, there is no quote — the
|
|
quotation marks are used to name a word. Use of the <code><a href="#the-q-element">q</a></code>
|
|
element in this case would be inappropriate.</p>
|
|
|
|
<pre><p>The word "ineffable" could have been used to describe the disaster
|
|
resulting from the campaign's mismanagement.</p></pre>
|
|
|
|
</div><h4 id="the-dfn-element"><span class="secno">4.6.8 </span>The <dfn><code>dfn</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
|
|
<dd><a href="content-models.html#flow-content">Flow content</a>.</dd>
|
|
<dd><a href="content-models.html#phrasing-content">Phrasing content</a>.</dd>
|
|
<dt>Contexts in which this element can be used:</dt>
|
|
<dd>Where <a href="content-models.html#phrasing-content">phrasing content</a> is expected.</dd>
|
|
<dt>Content model:</dt>
|
|
<dd><a href="content-models.html#phrasing-content">Phrasing content</a>, but there must be no <code><a href="#the-dfn-element">dfn</a></code> element descendants.</dd>
|
|
<dt>Content attributes:</dt>
|
|
<dd><a href="elements.html#global-attributes">Global attributes</a></dd>
|
|
<dd>Also, the <code title="attr-dfn-title"><a href="#attr-dfn-title">title</a></code> attribute has special semantics on this element.</dd>
|
|
<dt>DOM interface:</dt>
|
|
<dd>Uses <code><a href="elements.html#htmlelement">HTMLElement</a></code>.</dd>
|
|
</dl><p>The <code><a href="#the-dfn-element">dfn</a></code> element <a href="rendering.html#represents">represents</a> the defining
|
|
instance of a term. The <a href="content-models.html#paragraph" title="paragraph">paragraph</a>,
|
|
<a href="grouping-content.html#the-dl-element" title="dl">description list group</a>, or <a href="content-models.html#sectioning-content" title="sectioning content">section</a> that is the nearest
|
|
ancestor of the <code><a href="#the-dfn-element">dfn</a></code> element must also contain the
|
|
definition(s) for the <a href="#defining-term" title="defining term">term</a> given
|
|
by the <code><a href="#the-dfn-element">dfn</a></code> element.</p><p><dfn id="defining-term">Defining term</dfn>: If the <code><a href="#the-dfn-element">dfn</a></code> element has a
|
|
<dfn id="attr-dfn-title" title="attr-dfn-title"><code>title</code></dfn> attribute, then
|
|
the exact value of that attribute is the term being defined.
|
|
Otherwise, if it contains exactly one element child node and no
|
|
child <a href="infrastructure.html#text-node" title="text node">text nodes</a>, and that child
|
|
element is an <code><a href="#the-abbr-element">abbr</a></code> element with a <code title="attr-abbr-title"><a href="#attr-abbr-title">title</a></code> attribute, then the exact value
|
|
of <em>that</em> attribute is the term being defined. Otherwise, it
|
|
is the exact <code><a href="infrastructure.html#textcontent">textContent</a></code> of the <code><a href="#the-dfn-element">dfn</a></code>
|
|
element that gives the term being defined.</p><p>If the <code title="attr-dfn-title"><a href="#attr-dfn-title">title</a></code> attribute of the
|
|
<code><a href="#the-dfn-element">dfn</a></code> element is present, then it must contain only the
|
|
term being defined.</p><p class="note">The <code title="attr-title"><a href="elements.html#the-title-attribute">title</a></code> attribute
|
|
of ancestor elements does not affect <code><a href="#the-dfn-element">dfn</a></code> elements.</p><p>An <code><a href="#the-a-element">a</a></code> element that links to a <code><a href="#the-dfn-element">dfn</a></code>
|
|
element represents an instance of the term defined by the
|
|
<code><a href="#the-dfn-element">dfn</a></code> element.</p><div class="example">
|
|
|
|
<p>In the following fragment, the term "GDO" is first defined in
|
|
the first paragraph, then used in the second.</p>
|
|
|
|
<pre><p>The <dfn><abbr title="Garage Door Opener">GDO</abbr></dfn>
|
|
is a device that allows off-world teams to open the iris.</p>
|
|
<!-- ... later in the document: -->
|
|
<p>Teal'c activated his <abbr title="Garage Door Opener">GDO</abbr>
|
|
and so Hammond ordered the iris to be opened.</p></pre>
|
|
|
|
<p>With the addition of an <code><a href="#the-a-element">a</a></code> element, the reference
|
|
can be made explicit:</p>
|
|
|
|
<pre><p>The <dfn id=gdo><abbr title="Garage Door Opener">GDO</abbr></dfn>
|
|
is a device that allows off-world teams to open the iris.</p>
|
|
<!-- ... later in the document: -->
|
|
<p>Teal'c activated his <a href=#gdo><abbr title="Garage Door Opener">GDO</abbr></a>
|
|
and so Hammond ordered the iris to be opened.</p></pre>
|
|
|
|
</div><h4 id="the-abbr-element"><span class="secno">4.6.9 </span>The <dfn><code>abbr</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
|
|
<dd><a href="content-models.html#flow-content">Flow content</a>.</dd>
|
|
<dd><a href="content-models.html#phrasing-content">Phrasing content</a>.</dd>
|
|
<dt>Contexts in which this element can be used:</dt>
|
|
<dd>Where <a href="content-models.html#phrasing-content">phrasing content</a> is expected.</dd>
|
|
<dt>Content model:</dt>
|
|
<dd><a href="content-models.html#phrasing-content">Phrasing content</a>.</dd>
|
|
<dt>Content attributes:</dt>
|
|
<dd><a href="elements.html#global-attributes">Global attributes</a></dd>
|
|
<dd>Also, the <code title="attr-abbr-title"><a href="#attr-abbr-title">title</a></code> attribute has special semantics on this element.</dd>
|
|
<dt>DOM interface:</dt>
|
|
<dd>Uses <code><a href="elements.html#htmlelement">HTMLElement</a></code>.</dd>
|
|
</dl><p>The <code><a href="#the-abbr-element">abbr</a></code> element <a href="rendering.html#represents">represents</a> an
|
|
abbreviation or acronym, optionally with its expansion. The <dfn id="attr-abbr-title" title="attr-abbr-title"><code>title</code></dfn> attribute may be
|
|
used to provide an expansion of the abbreviation. The attribute, if
|
|
specified, must contain an expansion of the abbreviation, and
|
|
nothing else.</p><div class="example">
|
|
<p>The paragraph below contains an abbreviation marked up with the
|
|
<code><a href="#the-abbr-element">abbr</a></code> element. This paragraph <a href="#defining-term" title="defining
|
|
term">defines the term</a> "Web Hypertext Application Technology
|
|
Working Group".</p>
|
|
<pre><p>The <dfn id=whatwg><abbr
|
|
title="Web Hypertext Application Technology Working Group">WHATWG</abbr></dfn>
|
|
is a loose unofficial collaboration of Web browser manufacturers and
|
|
interested parties who wish to develop new technologies designed to
|
|
allow authors to write and deploy Applications over the World Wide
|
|
Web.</p></pre>
|
|
<p>An alternative way to write this would be:</p>
|
|
<pre><p>The <dfn id=whatwg>Web Hypertext Application Technology
|
|
Working Group</dfn> (<abbr
|
|
title="Web Hypertext Application Technology Working Group">WHATWG</abbr>)
|
|
is a loose unofficial collaboration of Web browser manufacturers and
|
|
interested parties who wish to develop new technologies designed to
|
|
allow authors to write and deploy Applications over the World Wide
|
|
Web.</p></pre>
|
|
</div><div class="example">
|
|
<p>This paragraph has two abbreviations. Notice how only one is
|
|
defined; the other, with no expansion associated with it, does not
|
|
use the <code><a href="#the-abbr-element">abbr</a></code> element.</p>
|
|
<pre><p>The
|
|
<abbr title="Web Hypertext Application Technology Working Group">WHATWG</abbr>
|
|
started working on HTML5 in 2004.</p></pre>
|
|
</div><div class="example">
|
|
<p>This paragraph links an abbreviation to its definition.</p>
|
|
<pre><p>The <a href="#whatwg"><abbr
|
|
title="Web Hypertext Application Technology Working Group">WHATWG</abbr></a>
|
|
community does not have much representation from Asia.</p></pre>
|
|
</div><div class="example">
|
|
<p>This paragraph marks up an abbreviation without giving an
|
|
expansion, possibly as a hook to apply styles for abbreviations
|
|
(e.g. smallcaps).</p>
|
|
<pre><p>Philip` and Dashiva both denied that they were going to
|
|
get the issue counts from past revisions of the specification to
|
|
backfill the <abbr>WHATWG</abbr> issue graph.</p></pre>
|
|
</div><p>If an abbreviation is pluralized, the expansion's grammatical
|
|
number (plural vs singular) must match the grammatical number of the
|
|
contents of the element.</p><div class="example">
|
|
|
|
<p>Here the plural is outside the element, so the expansion is in
|
|
the singular:</p>
|
|
|
|
<pre><p>Two <abbr title="Working Group">WG</abbr>s worked on
|
|
this specification: the <abbr>WHATWG</abbr> and the
|
|
<abbr>HTMLWG</abbr>.</p></pre>
|
|
|
|
<p>Here the plural is inside the element, so the expansion is in
|
|
the plural:</p>
|
|
|
|
<pre><p>Two <abbr title="Working Groups">WGs</abbr> worked on
|
|
this specification: the <abbr>WHATWG</abbr> and the
|
|
<abbr>HTMLWG</abbr>.</p></pre>
|
|
|
|
</div><p>Abbreviations do not have to be marked up using this element. It
|
|
is expected to be useful in the following cases:</p><ul><li>Abbreviations for which the author wants to give expansions,
|
|
where using the <code><a href="#the-abbr-element">abbr</a></code> element with a <code title="attr-title"><a href="elements.html#the-title-attribute">title</a></code> attribute is an alternative to
|
|
including the expansion inline (e.g. in parentheses).</li>
|
|
|
|
<li>Abbreviations that are likely to be unfamiliar to the
|
|
document's readers, for which authors are encouraged to either mark
|
|
up the abbreviation using a <code><a href="#the-abbr-element">abbr</a></code> element with a <code title="attr-title"><a href="elements.html#the-title-attribute">title</a></code> attribute or include the expansion
|
|
inline in the text the first time the abbreviation is used.</li>
|
|
|
|
<li>Abbreviations whose presence needs to be semantically
|
|
annotated, e.g. so that they can be identified from a style sheet
|
|
and given specific styles, for which the <code><a href="#the-abbr-element">abbr</a></code> element
|
|
can be used without a <code title="attr-title"><a href="elements.html#the-title-attribute">title</a></code>
|
|
attribute.</li>
|
|
|
|
</ul><p title="note">Providing an expansion in a <code title="attr-title"><a href="elements.html#the-title-attribute">title</a></code> attribute once will not necessarily
|
|
cause other <code><a href="#the-abbr-element">abbr</a></code> elements in the same document with the
|
|
same contents but without a <code title="attr-title"><a href="elements.html#the-title-attribute">title</a></code>
|
|
attribute to behave as if they had the same expansion. Every
|
|
<code><a href="#the-abbr-element">abbr</a></code> element is independent.</p><h4 id="the-time-element"><span class="secno">4.6.10 </span>The <dfn><code>time</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
|
|
<dd><a href="content-models.html#flow-content">Flow content</a>.</dd>
|
|
<dd><a href="content-models.html#phrasing-content">Phrasing content</a>.</dd>
|
|
<dt>Contexts in which this element can be used:</dt>
|
|
<dd>Where <a href="content-models.html#phrasing-content">phrasing content</a> is expected.</dd>
|
|
<dt>Content model:</dt>
|
|
<dd><a href="content-models.html#phrasing-content">Phrasing content</a>, but there must be no <code><a href="#the-time-element">time</a></code> element descendants.</dd>
|
|
<dt>Content attributes:</dt>
|
|
<dd><a href="elements.html#global-attributes">Global attributes</a></dd>
|
|
<dd><code title="attr-time-datetime"><a href="#attr-time-datetime">datetime</a></code></dd>
|
|
<dd><code title="attr-time-pubdate"><a href="#attr-time-pubdate">pubdate</a></code></dd>
|
|
<dt>DOM interface:</dt>
|
|
<dd>
|
|
<pre class="idl">interface <dfn id="htmltimeelement">HTMLTimeElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> {
|
|
attribute DOMString <a href="#dom-time-datetime" title="dom-time-datetime">dateTime</a>;
|
|
attribute boolean <a href="#dom-time-pubdate" title="dom-time-pubDate">pubDate</a>;
|
|
readonly attribute <span>Date</span> <a href="#dom-time-valueasdate" title="dom-time-valueAsDate">valueAsDate</a>;
|
|
};</pre>
|
|
</dd>
|
|
</dl><p>The <code><a href="#the-time-element">time</a></code> element <a href="rendering.html#represents">represents</a> either a
|
|
time on a 24 hour clock, or a precise date in the proleptic
|
|
Gregorian calendar, optionally with a time and a time-zone
|
|
offset. <a href="references.html#refsGREGORIAN">[GREGORIAN]</a></p><p>This element is intended as a way to encode modern dates and
|
|
times in a machine-readable way so that, for example, user agents
|
|
can offer to add birthday reminders or scheduled events to the
|
|
user's calendar.</p><div class="note">
|
|
|
|
<p>The <code><a href="#the-time-element">time</a></code> element is not intended for encoding times
|
|
for which a precise date or time cannot be established. For
|
|
example, it would be inappropriate for encoding times like "one
|
|
millisecond after the big bang", "the early part of the Jurassic
|
|
period", or "a winter around 250 BCE".</p>
|
|
|
|
<p>For dates before the introduction of the Gregorian calendar,
|
|
authors are encouraged to not use the <code><a href="#the-time-element">time</a></code> element, or
|
|
else to be very careful about converting dates and times from the
|
|
period to the Gregorian calendar. This is complicated by the manner
|
|
in which the Gregorian calendar was phased in, which occurred at
|
|
different times in different countries, ranging from partway
|
|
through the 16th century all the way to early in the 20th.</p>
|
|
|
|
</div><p>The <dfn id="attr-time-pubdate" title="attr-time-pubdate"><code>pubdate</code></dfn>
|
|
attribute is a <a href="common-microsyntaxes.html#boolean-attribute">boolean attribute</a>. If specified, it
|
|
indicates that the date and time given by the element is the
|
|
publication date and time of the nearest ancestor
|
|
<code><a href="sections.html#the-article-element">article</a></code> element, or, if the element has no ancestor
|
|
<code><a href="sections.html#the-article-element">article</a></code> element, of the document as a whole. If the
|
|
element has a <code title="attr-time-pubdate"><a href="#attr-time-pubdate">pubdate</a></code>
|
|
attribute specified, then the element <dfn id="needs-a-date">needs a date</dfn>. For
|
|
each <code><a href="sections.html#the-article-element">article</a></code> element, there must be no more than one
|
|
<code><a href="#the-time-element">time</a></code> element with a <code title="attr-time-pubdate"><a href="#attr-time-pubdate">pubdate</a></code> attribute whose nearest
|
|
ancestor is that <code><a href="sections.html#the-article-element">article</a></code> element. Furthermore, for each
|
|
<code><a href="infrastructure.html#document">Document</a></code>, there must be no more than one
|
|
<code><a href="#the-time-element">time</a></code> element with a <code title="attr-time-pubdate"><a href="#attr-time-pubdate">pubdate</a></code> attribute that does not
|
|
have an ancestor <code><a href="sections.html#the-article-element">article</a></code> element.</p><p>The <dfn id="attr-time-datetime" title="attr-time-datetime"><code>datetime</code></dfn>
|
|
attribute, if present, gives the date or time being
|
|
specified. Otherwise, the date or time is given by the element's
|
|
contents.</p><p>If the element <i><a href="#needs-a-date">needs a date</a></i>, and the <code title="attr-time-datetime"><a href="#attr-time-datetime">datetime</a></code> attribute is present,
|
|
then the attribute's value must be a <a href="common-microsyntaxes.html#valid-date-string-with-optional-time">valid date string with
|
|
optional time</a>.</p><p>If the element <i><a href="#needs-a-date">needs a date</a></i>, but the <code title="attr-time-datetime"><a href="#attr-time-datetime">datetime</a></code> attribute is not present,
|
|
then the element's <code><a href="infrastructure.html#textcontent">textContent</a></code> must be a <a href="common-microsyntaxes.html#valid-date-string-in-content-with-optional-time">valid
|
|
date string in content with optional time</a>.</p><p>If the element does not <i title="needs a date"><a href="#needs-a-date">need a date</a></i>,
|
|
and the <code title="attr-time-datetime"><a href="#attr-time-datetime">datetime</a></code> attribute
|
|
is present, then the attribute's value must be a <a href="common-microsyntaxes.html#valid-date-or-time-string">valid date or
|
|
time string</a>.</p><p>If the element does not <i title="needs a date"><a href="#needs-a-date">need a date</a></i>,
|
|
but the <code title="attr-time-datetime"><a href="#attr-time-datetime">datetime</a></code> attribute
|
|
is not present, then the element's <code><a href="infrastructure.html#textcontent">textContent</a></code> must be
|
|
a <a href="common-microsyntaxes.html#valid-date-or-time-string-in-content">valid date or time string in content</a>.</p><p>The date, if any, must be expressed using the Gregorian
|
|
calendar.</p><div class="impl">
|
|
|
|
<p>If the <code title="attr-time-datetime"><a href="#attr-time-datetime">datetime</a></code> attribute
|
|
is present, the user agent should convey the attribute's value to
|
|
the user when rendering the element.</p>
|
|
|
|
</div><div class="example">
|
|
|
|
<p>The <code><a href="#the-time-element">time</a></code> element can be used to encode dates, for
|
|
example in Microformats. The following shows a hypothetical way of
|
|
encoding an event using a variant on hCalendar that uses the
|
|
<code><a href="#the-time-element">time</a></code> element:</p>
|
|
|
|
<pre><div class="vevent">
|
|
<a class="url" href="http://www.web2con.com/">http://www.web2con.com/</a>
|
|
<span class="summary">Web 2.0 Conference</span>:
|
|
<time class="dtstart" datetime="2007-10-05">October 5</time> -
|
|
<time class="dtend" datetime="2007-10-20">19</time>,
|
|
at the <span class="location">Argent Hotel, San Francisco, CA</span>
|
|
</div></pre>
|
|
|
|
<p>(The end date is encoded as one day after the last date of the
|
|
event because in the iCalendar format, end dates are
|
|
<em>exclusive</em>, not inclusive.)</p>
|
|
|
|
</div><div class="example">
|
|
|
|
<p>The <code><a href="#the-time-element">time</a></code> element is not necessary for encoding
|
|
dates or times. In the following snippet, the time is encoded using
|
|
<code><a href="#the-time-element">time</a></code>, so that it can be restyled (e.g. using XBL2) to
|
|
match local conventions, while the year is not marked up at all,
|
|
since marking it up would not be particularly useful, and doing so
|
|
is thus not allowed.</p>
|
|
|
|
<pre><p>I usually have a snack at <time>16:00</time>.</p>
|
|
<p>I've liked model trains since at least 1983.</p></pre>
|
|
|
|
<p>Using a styling technology that supports restyling times, the
|
|
first paragraph from the above snippet could be rendered as follows:</p>
|
|
|
|
<blockquote><p>I usually have a snack at 4pm.</p></blockquote>
|
|
|
|
<p>Or it could be rendered as follows:</p>
|
|
|
|
<blockquote><p>I usually have a snack at 16h00.</p></blockquote>
|
|
|
|
</div><div class="impl">
|
|
|
|
<p>The <dfn id="dom-time-datetime" title="dom-time-datetime"><code>dateTime</code></dfn> IDL
|
|
attribute must <a href="common-dom-interfaces.html#reflect">reflect</a> the <code title="attr-time-datetime"><a href="#attr-time-datetime">datetime</a></code> content attribute.</p>
|
|
|
|
<p>The <dfn id="dom-time-pubdate" title="dom-time-pubDate"><code>pubDate</code></dfn> IDL
|
|
attribute must <a href="common-dom-interfaces.html#reflect">reflect</a> the <code title="attr-time-pubdate"><a href="#attr-time-pubdate">pubdate</a></code> content attribute.</p>
|
|
|
|
<p>User agents, to obtain the <dfn id="concept-time-date" title="concept-time-date">date</dfn>, <dfn id="concept-time-time" title="concept-time-time">time</dfn>, and <dfn id="concept-time-timezone" title="concept-time-timezone">time-zone offset</dfn> represented by
|
|
a <code><a href="#the-time-element">time</a></code> element, must follow these steps:</p>
|
|
|
|
<ol><li>If the <code title="attr-time-datetime"><a href="#attr-time-datetime">datetime</a></code>
|
|
attribute is present, then use the rules to <a href="common-microsyntaxes.html#parse-a-date-or-time-string">parse a date or
|
|
time string</a> with the flag <i>in attribute</i> from the value
|
|
of that attribute, and let the result be <var title="">result</var>.</li>
|
|
|
|
<li>Otherwise, use the rules to <a href="common-microsyntaxes.html#parse-a-date-or-time-string">parse a date or time
|
|
string</a> with the flag <i>in content</i> from the element's
|
|
<code><a href="infrastructure.html#textcontent">textContent</a></code>, and let the result be <var title="">result</var>.</li>
|
|
|
|
<li>If <var title="">result</var> is empty (because the parsing
|
|
failed), then the <a href="#concept-time-date" title="concept-time-date">date</a> is
|
|
unknown, the <a href="#concept-time-time" title="concept-time-time">time</a> is
|
|
unknown, and the <a href="#concept-time-timezone" title="concept-time-timezone">time-zone
|
|
offset</a> is unknown.</li>
|
|
|
|
<li>Otherwise: if <var title="">result</var> contains a date, then
|
|
that is the <a href="#concept-time-date" title="concept-time-date">date</a>; if <var title="">result</var> contains a time, then that is the <a href="#concept-time-time" title="concept-time-time">time</a>; and if <var title="">result</var> contains a time-zone offset, then the
|
|
time-zone offset is the element's <a href="#concept-time-timezone" title="concept-time-timezone">time-zone offset</a>. (A time-zone
|
|
offset can only be present if both a date and a time are also
|
|
present.)</li>
|
|
|
|
</ol></div><dl class="domintro"><dt><var title="">time</var> . <code title="dom-time-valueAsDate"><a href="#dom-time-valueasdate">valueAsDate</a></code></dt>
|
|
|
|
<dd>
|
|
|
|
<p>Returns a <code>Date</code> object representing the specified date and time.</p>
|
|
|
|
</dd>
|
|
|
|
</dl><div class="impl">
|
|
|
|
<p>The <dfn id="dom-time-valueasdate" title="dom-time-valueAsDate"><code>valueAsDate</code></dfn> IDL
|
|
attribute must return either null or a new <code>Date</code> object
|
|
initialised to the relevant value as defined by the following
|
|
list:</p>
|
|
|
|
<dl><dt>If the <a href="#concept-time-date" title="concept-time-date">date</a> is known but
|
|
the <a href="#concept-time-time" title="concept-time-time">time</a> is not</dt>
|
|
|
|
<dd>The time corresponding to midnight UTC (i.e. the first second)
|
|
of the given <a href="#concept-time-date" title="concept-time-date">date</a>.</dd>
|
|
|
|
<dt>If the <a href="#concept-time-time" title="concept-time-time">time</a> is known but
|
|
the <a href="#concept-time-date" title="concept-time-date">date</a> is not</dt>
|
|
|
|
<dd>The time corresponding to the given <a href="#concept-time-time" title="concept-time-time">time</a> of 1970-01-01, with the time
|
|
zone UTC.</dd>
|
|
|
|
<dt>If both the <a href="#concept-time-date" title="concept-time-date">date</a> and the
|
|
<a href="#concept-time-time" title="concept-time-time">time</a> are known</dt>
|
|
|
|
<dd>The time corresponding to the <a href="#concept-time-date" title="concept-time-date">date</a> and <a href="#concept-time-time" title="concept-time-time">time</a>, with the given <a href="#concept-time-timezone" title="concept-time-timezone">time-zone offset</a>.</dd>
|
|
|
|
<dt>If neither the <a href="#concept-time-date" title="concept-time-date">date</a> nor
|
|
the <a href="#concept-time-time" title="concept-time-time">time</a> are known</dt>
|
|
|
|
<dd>The null value.</dd>
|
|
|
|
</dl><p>When a <code>Date</code> object is to be returned, a new one must
|
|
be constructed.</p>
|
|
</div><div class="example">
|
|
|
|
<p>In the following snippet:</p>
|
|
|
|
<pre><p>Our first date was <time datetime="2006-09-23">a Saturday</time>.</p></pre>
|
|
|
|
<p>...the <code><a href="#the-time-element">time</a></code> element's <code title="dom-time-valueAsDate"><a href="#dom-time-valueasdate">valueAsDate</a></code> attribute would
|
|
have the value 1,158,969,600,000ms.</p>
|
|
|
|
</div><div class="example">
|
|
|
|
<p>In the following snippet:</p>
|
|
|
|
<pre><p>Many people get up at <time>08:00</time>.</p></pre>
|
|
|
|
<p>...the <code><a href="#the-time-element">time</a></code> element's <code title="dom-time-valueAsDate"><a href="#dom-time-valueasdate">valueAsDate</a></code> attribute would
|
|
have the value 28,800,000ms.</p>
|
|
|
|
</div><div class="example">
|
|
|
|
<p>In this example, an article's publication date is marked up
|
|
using <code><a href="#the-time-element">time</a></code>:</p>
|
|
|
|
<pre><article>
|
|
<h1>Small tasks</h1>
|
|
<footer>Published <time pubdate>2009-08-30</time>.</footer>
|
|
<p>I put a bike bell on his bike.</p>
|
|
</article></pre>
|
|
|
|
<p>Here is another way that could be marked up. In this example,
|
|
legacy user agents would say "today", while newer user agents would
|
|
render the time in a locale-specific manner based on the value of
|
|
the attribute.</p>
|
|
|
|
<pre><article>
|
|
<h1>Small tasks</h1>
|
|
<footer>Published <time pubdate datetime="2009-08-30">today</time>.</footer>
|
|
<p>I put a bike bell on his bike.</p>
|
|
</article></pre>
|
|
|
|
<p>Here is the same thing but with the time included only. Because
|
|
the element is empty, legacy user agents will not show anything
|
|
useful; user agents that implement this specification, on the other
|
|
hand, would show the date and time in a locale-specific manner.</p>
|
|
|
|
<pre><article>
|
|
<h1>Small tasks</h1>
|
|
<footer>Published <time pubdate datetime="2009-08-30T07:13Z"></time>.</footer>
|
|
<p>I put a bike bell on his bike.</p>
|
|
</article></pre>
|
|
|
|
</div><h4 id="the-code-element"><span class="secno">4.6.11 </span>The <dfn><code>code</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
|
|
<dd><a href="content-models.html#flow-content">Flow content</a>.</dd>
|
|
<dd><a href="content-models.html#phrasing-content">Phrasing content</a>.</dd>
|
|
<dt>Contexts in which this element can be used:</dt>
|
|
<dd>Where <a href="content-models.html#phrasing-content">phrasing content</a> is expected.</dd>
|
|
<dt>Content model:</dt>
|
|
<dd><a href="content-models.html#phrasing-content">Phrasing content</a>.</dd>
|
|
<dt>Content attributes:</dt>
|
|
<dd><a href="elements.html#global-attributes">Global attributes</a></dd>
|
|
<dt>DOM interface:</dt>
|
|
<dd>Uses <code><a href="elements.html#htmlelement">HTMLElement</a></code>.</dd>
|
|
</dl><p>The <code><a href="#the-code-element">code</a></code> element <a href="rendering.html#represents">represents</a> a fragment
|
|
of computer code. This could be an XML element name, a filename, a
|
|
computer program, or any other string that a computer would
|
|
recognize.</p><p>Although there is no formal way to indicate the language of
|
|
computer code being marked up, authors who wish to mark
|
|
<code><a href="#the-code-element">code</a></code> elements with the language used, e.g. so that
|
|
syntax highlighting scripts can use the right rules, may do so by
|
|
adding a class prefixed with "<code title="">language-</code>" to
|
|
the element.</p><div class="example">
|
|
|
|
<p>The following example shows how the element can be used in a
|
|
paragraph to mark up element names and computer code, including
|
|
punctuation.</p>
|
|
|
|
<pre><p>The <code>code</code> element represents a fragment of computer
|
|
code.</p>
|
|
|
|
<p>When you call the <code>activate()</code> method on the
|
|
<code>robotSnowman</code> object, the eyes glow.</p>
|
|
|
|
<p>The example below uses the <code>begin</code> keyword to indicate
|
|
the start of a statement block. It is paired with an <code>end</code>
|
|
keyword, which is followed by the <code>.</code> punctuation character
|
|
(full stop) to indicate the end of the program.</p></pre>
|
|
|
|
</div><div class="example">
|
|
|
|
<p>The following example shows how a block of code could be marked
|
|
up using the <code><a href="grouping-content.html#the-pre-element">pre</a></code> and <code><a href="#the-code-element">code</a></code> elements.</p>
|
|
|
|
<pre><pre><code class="language-pascal">var i: Integer;
|
|
begin
|
|
i := 1;
|
|
end.</code></pre></pre>
|
|
|
|
<p>A class is used in that example to indicate the language
|
|
used.</p>
|
|
|
|
</div><p class="note">See the <code><a href="grouping-content.html#the-pre-element">pre</a></code> element for more details.</p><h4 id="the-var-element"><span class="secno">4.6.12 </span>The <dfn><code>var</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
|
|
<dd><a href="content-models.html#flow-content">Flow content</a>.</dd>
|
|
<dd><a href="content-models.html#phrasing-content">Phrasing content</a>.</dd>
|
|
<dt>Contexts in which this element can be used:</dt>
|
|
<dd>Where <a href="content-models.html#phrasing-content">phrasing content</a> is expected.</dd>
|
|
<dt>Content model:</dt>
|
|
<dd><a href="content-models.html#phrasing-content">Phrasing content</a>.</dd>
|
|
<dt>Content attributes:</dt>
|
|
<dd><a href="elements.html#global-attributes">Global attributes</a></dd>
|
|
<dt>DOM interface:</dt>
|
|
<dd>Uses <code><a href="elements.html#htmlelement">HTMLElement</a></code>.</dd>
|
|
</dl><p>The <code><a href="#the-var-element">var</a></code> element <a href="rendering.html#represents">represents</a> a
|
|
variable. This could be an actual variable in a mathematical
|
|
expression or programming context, or it could just be a term used
|
|
as a placeholder in prose.</p><div class="example">
|
|
<p>In the paragraph below, the letter "n" is being used as a
|
|
variable in prose:</p>
|
|
<pre><p>If there are <var>n</var> pipes leading to the ice
|
|
cream factory then I expect at <em>least</em> <var>n</var>
|
|
flavors of ice cream to be available for purchase!</p></pre>
|
|
</div><p>For mathematics, in particular for anything beyond the simplest
|
|
of expressions, MathML is more appropriate. However, the
|
|
<code><a href="#the-var-element">var</a></code> element can still be used to refer to specific
|
|
variables that are then mentioned in MathML expressions.</p><div class="example">
|
|
|
|
<p>In this example, an equation is shown, with a legend that
|
|
references the variables in the equation. The expression itself is
|
|
marked up with MathML, but the variables are mentioned in the
|
|
figure's legend using <code><a href="#the-var-element">var</a></code>.</p>
|
|
|
|
<pre><figure>
|
|
<math>
|
|
<mi>a</mi>
|
|
<mo>=</mo>
|
|
<msqrt>
|
|
<msup><mi>b</mi><mn>2</mn></msup>
|
|
<mi>+</mi>
|
|
<msup><mi>c</mi><mn>2</mn></msup>
|
|
</msqrt>
|
|
</math>
|
|
<figcaption>
|
|
Using Pythagoras' theorem to solve for the hypotenuse <var>a</var> of
|
|
a triangle with sides <var>b</var> and <var>c</var>
|
|
</figcaption>
|
|
</figure></pre>
|
|
|
|
</div><h4 id="the-samp-element"><span class="secno">4.6.13 </span>The <dfn><code>samp</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
|
|
<dd><a href="content-models.html#flow-content">Flow content</a>.</dd>
|
|
<dd><a href="content-models.html#phrasing-content">Phrasing content</a>.</dd>
|
|
<dt>Contexts in which this element can be used:</dt>
|
|
<dd>Where <a href="content-models.html#phrasing-content">phrasing content</a> is expected.</dd>
|
|
<dt>Content model:</dt>
|
|
<dd><a href="content-models.html#phrasing-content">Phrasing content</a>.</dd>
|
|
<dt>Content attributes:</dt>
|
|
<dd><a href="elements.html#global-attributes">Global attributes</a></dd>
|
|
<dt>DOM interface:</dt>
|
|
<dd>Uses <code><a href="elements.html#htmlelement">HTMLElement</a></code>.</dd>
|
|
</dl><p>The <code><a href="#the-samp-element">samp</a></code> element <a href="rendering.html#represents">represents</a> (sample)
|
|
output from a program or computing system.</p><p class="note">See the <code><a href="grouping-content.html#the-pre-element">pre</a></code> and <code><a href="#the-kbd-element">kbd</a></code>
|
|
elements for more details.</p><div class="example">
|
|
<p>This example shows the <code><a href="#the-samp-element">samp</a></code> element being used
|
|
inline:</p>
|
|
<pre><p>The computer said <samp>Too much cheese in tray
|
|
two</samp> but I didn't know what that meant.</p></pre>
|
|
|
|
<p>This second example shows a block of sample output. Nested
|
|
<code><a href="#the-samp-element">samp</a></code> and <code><a href="#the-kbd-element">kbd</a></code> elements allow for the
|
|
styling of specific elements of the sample output using a
|
|
style sheet.</p>
|
|
|
|
<pre><pre><samp><span class="prompt">jdoe@mowmow:~$</span> <kbd>ssh demo.example.com</kbd>
|
|
Last login: Tue Apr 12 09:10:17 2005 from mowmow.example.com on pts/1
|
|
Linux demo 2.6.10-grsec+gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2b-reslog-v6.189 #1 SMP Tue Feb 1 11:22:36 PST 2005 i686 unknown
|
|
|
|
<span class="prompt">jdoe@demo:~$</span> <span class="cursor">_</span></samp></pre></pre>
|
|
</div><h4 id="the-kbd-element"><span class="secno">4.6.14 </span>The <dfn><code>kbd</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
|
|
<dd><a href="content-models.html#flow-content">Flow content</a>.</dd>
|
|
<dd><a href="content-models.html#phrasing-content">Phrasing content</a>.</dd>
|
|
<dt>Contexts in which this element can be used:</dt>
|
|
<dd>Where <a href="content-models.html#phrasing-content">phrasing content</a> is expected.</dd>
|
|
<dt>Content model:</dt>
|
|
<dd><a href="content-models.html#phrasing-content">Phrasing content</a>.</dd>
|
|
<dt>Content attributes:</dt>
|
|
<dd><a href="elements.html#global-attributes">Global attributes</a></dd>
|
|
<dt>DOM interface:</dt>
|
|
<dd>Uses <code><a href="elements.html#htmlelement">HTMLElement</a></code>.</dd>
|
|
</dl><p>The <code><a href="#the-kbd-element">kbd</a></code> element <a href="rendering.html#represents">represents</a> user input
|
|
(typically keyboard input, although it may also be used to represent
|
|
other input, such as voice commands).</p><p>When the <code><a href="#the-kbd-element">kbd</a></code> element is nested inside a
|
|
<code><a href="#the-samp-element">samp</a></code> element, it represents the input as it was echoed
|
|
by the system.</p><p>When the <code><a href="#the-kbd-element">kbd</a></code> element <em>contains</em> a
|
|
<code><a href="#the-samp-element">samp</a></code> element, it represents input based on system
|
|
output, for example invoking a menu item.</p><p>When the <code><a href="#the-kbd-element">kbd</a></code> element is nested inside another
|
|
<code><a href="#the-kbd-element">kbd</a></code> element, it represents an actual key or other
|
|
single unit of input as appropriate for the input mechanism.</p><div class="example">
|
|
<p>Here the <code><a href="#the-kbd-element">kbd</a></code> element is used to indicate keys to press:</p>
|
|
<pre><p>To make George eat an apple, press <kbd><kbd>Shift</kbd>+<kbd>F3</kbd></kbd></p></pre>
|
|
|
|
<p>In this second example, the user is told to pick a particular
|
|
menu item. The outer <code><a href="#the-kbd-element">kbd</a></code> element marks up a block of
|
|
input, with the inner <code><a href="#the-kbd-element">kbd</a></code> elements representing each
|
|
individual step of the input, and the <code><a href="#the-samp-element">samp</a></code> elements
|
|
inside them indicating that the steps are input based on something
|
|
being displayed by the system, in this case menu labels:</p>
|
|
|
|
<pre><p>To make George eat an apple, select
|
|
<kbd><kbd><samp>File</samp></kbd>|<kbd><samp>Eat Apple...</samp></kbd></kbd>
|
|
</p></pre>
|
|
|
|
<p>Such precision isn't necessary; the following is equally fine:</p>
|
|
|
|
<pre><p>To make George eat an apple, select <kbd>File | Eat Apple...</kbd></p></pre>
|
|
|
|
</div><h4 id="the-sub-and-sup-elements"><span class="secno">4.6.15 </span>The <dfn id="the-sub-element"><code>sub</code></dfn> and <dfn id="the-sup-element"><code>sup</code></dfn> elements</h4><dl class="element"><dt>Categories</dt>
|
|
<dd><a href="content-models.html#flow-content">Flow content</a>.</dd>
|
|
<dd><a href="content-models.html#phrasing-content">Phrasing content</a>.</dd>
|
|
<dt>Contexts in which this element can be used:</dt>
|
|
<dd>Where <a href="content-models.html#phrasing-content">phrasing content</a> is expected.</dd>
|
|
<dt>Content model:</dt>
|
|
<dd><a href="content-models.html#phrasing-content">Phrasing content</a>.</dd>
|
|
<dt>Content attributes:</dt>
|
|
<dd><a href="elements.html#global-attributes">Global attributes</a></dd>
|
|
<dt>DOM interface:</dt>
|
|
<dd>Use <code><a href="elements.html#htmlelement">HTMLElement</a></code>.</dd>
|
|
</dl><p>The <code><a href="#the-sub-and-sup-elements">sup</a></code> element <a href="rendering.html#represents">represents</a> a
|
|
superscript and the <code><a href="#the-sub-and-sup-elements">sub</a></code> element <a href="rendering.html#represents">represents</a>
|
|
a subscript.</p><p>These elements must be used only to mark up typographical
|
|
conventions with specific meanings, not for typographical
|
|
presentation for presentation's sake. For example, it would be
|
|
inappropriate for the <code><a href="#the-sub-and-sup-elements">sub</a></code> and <code><a href="#the-sub-and-sup-elements">sup</a></code> elements
|
|
to be used in the name of the LaTeX document preparation system. In
|
|
general, authors should use these elements only if the
|
|
<em>absence</em> of those elements would change the meaning of the
|
|
content.</p><p>In certain languages, superscripts are part of the typographical
|
|
conventions for some abbreviations.</p><div class="example">
|
|
<pre><p>The most beautiful women are
|
|
<span lang="fr"><abbr>M<sup>lle</sup></abbr> Gwendoline</span> and
|
|
<span lang="fr"><abbr>M<sup>me</sup></abbr> Denise</span>.</p></pre>
|
|
</div><p>The <code><a href="#the-sub-and-sup-elements">sub</a></code> element can be used inside a
|
|
<code><a href="#the-var-element">var</a></code> element, for variables that have subscripts.</p><div class="example">
|
|
|
|
<p>Here, the <code><a href="#the-sub-and-sup-elements">sub</a></code> element is used to represents the
|
|
subscript that identifies the variable in a family of
|
|
variables:</p>
|
|
|
|
<pre><p>The coordinate of the <var>i</var>th point is
|
|
(<var>x<sub><var>i</var></sub></var>, <var>y<sub><var>i</var></sub></var>).
|
|
For example, the 10th point has coordinate
|
|
(<var>x<sub>10</sub></var>, <var>y<sub>10</sub></var>).</p></pre>
|
|
</div><p>Mathematical expressions often use subscripts and superscripts.
|
|
Authors are encouraged to use MathML for marking up mathematics, but
|
|
authors may opt to use <code><a href="#the-sub-and-sup-elements">sub</a></code> and <code><a href="#the-sub-and-sup-elements">sup</a></code> if
|
|
detailed mathematical markup is not desired. <a href="references.html#refsMATHML">[MATHML]</a></p><div class="example">
|
|
<pre><var>E</var>=<var>m</var><var>c</var><sup>2</sup></pre>
|
|
<pre>f(<var>x</var>, <var>n</var>) = log<sub>4</sub><var>x</var><sup><var>n</var></sup></pre>
|
|
</div><h4 id="the-i-element"><span class="secno">4.6.16 </span>The <dfn><code>i</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
|
|
<dd><a href="content-models.html#flow-content">Flow content</a>.</dd>
|
|
<dd><a href="content-models.html#phrasing-content">Phrasing content</a>.</dd>
|
|
<dt>Contexts in which this element can be used:</dt>
|
|
<dd>Where <a href="content-models.html#phrasing-content">phrasing content</a> is expected.</dd>
|
|
<dt>Content model:</dt>
|
|
<dd><a href="content-models.html#phrasing-content">Phrasing content</a>.</dd>
|
|
<dt>Content attributes:</dt>
|
|
<dd><a href="elements.html#global-attributes">Global attributes</a></dd>
|
|
<dt>DOM interface:</dt>
|
|
<dd>Uses <code><a href="elements.html#htmlelement">HTMLElement</a></code>.</dd>
|
|
</dl><p>The <code><a href="#the-i-element">i</a></code> element <a href="rendering.html#represents">represents</a> a span of text
|
|
in an alternate voice or mood, or otherwise offset from the normal
|
|
prose in a manner indicating a different quality of text, such as a
|
|
taxonomic designation, a technical term, an idiomatic phrase from
|
|
another language, a thought, or a ship name in Western texts.</p><p>Terms in languages different from the main text should be
|
|
annotated with <code title="attr-lang"><a href="elements.html#attr-lang">lang</a></code> attributes (or,
|
|
in XML, <a href="elements.html#attr-xml-lang" title="attr-xml-lang"><code title="">lang</code>
|
|
attributes in the <span>XML namespace</span></a>).</p><div class="example">
|
|
<p>The examples below show uses of the <code><a href="#the-i-element">i</a></code> element:</p>
|
|
<pre><p>The <i class="taxonomy">Felis silvestris catus</i> is cute.</p>
|
|
<p>The term <i>prose content</i> is defined above.</p>
|
|
<p>There is a certain <i lang="fr">je ne sais quoi</i> in the air.</p></pre>
|
|
<p>In the following example, a dream sequence is marked up using
|
|
<code><a href="#the-i-element">i</a></code> elements.</p>
|
|
<pre><p>Raymond tried to sleep.</p>
|
|
<p><i>The ship sailed away on Thursday</i>, he
|
|
dreamt. <i>The ship had many people aboard, including a beautiful
|
|
princess called Carey. He watched her, day-in, day-out, hoping she
|
|
would notice him, but she never did.</i></p>
|
|
<p><i>Finally one night he picked up the courage to speak with
|
|
her—</i></p>
|
|
<p>Raymond woke with a start as the fire alarm rang out.</p></pre>
|
|
</div><p>Authors can use the <code title="attr-class"><a href="elements.html#classes">class</a></code>
|
|
attribute on the <code><a href="#the-i-element">i</a></code> element to identify why the element
|
|
is being used, so that if the style of a particular use (e.g. dream
|
|
sequences as opposed to taxonomic terms) is to be changed at a later
|
|
date, the author doesn't have to go through the entire document (or
|
|
series of related documents) annotating each use.</p><p>Authors are encouraged to consider whether other elements might
|
|
be more applicable than the <code><a href="#the-i-element">i</a></code> element, for instance the
|
|
<code><a href="#the-em-element">em</a></code> element for marking up stress emphasis, or the
|
|
<code><a href="#the-dfn-element">dfn</a></code> element to mark up the defining instance of a
|
|
term.</p><p class="note">Style sheets can be used to format <code><a href="#the-i-element">i</a></code>
|
|
elements, just like any other element can be restyled. Thus, it is
|
|
not the case that content in <code><a href="#the-i-element">i</a></code> elements will
|
|
necessarily be italicized.</p><h4 id="the-b-element"><span class="secno">4.6.17 </span>The <dfn><code>b</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
|
|
<dd><a href="content-models.html#flow-content">Flow content</a>.</dd>
|
|
<dd><a href="content-models.html#phrasing-content">Phrasing content</a>.</dd>
|
|
<dt>Contexts in which this element can be used:</dt>
|
|
<dd>Where <a href="content-models.html#phrasing-content">phrasing content</a> is expected.</dd>
|
|
<dt>Content model:</dt>
|
|
<dd><a href="content-models.html#phrasing-content">Phrasing content</a>.</dd>
|
|
<dt>Content attributes:</dt>
|
|
<dd><a href="elements.html#global-attributes">Global attributes</a></dd>
|
|
<dt>DOM interface:</dt>
|
|
<dd>Uses <code><a href="elements.html#htmlelement">HTMLElement</a></code>.</dd>
|
|
</dl><p>The <code><a href="#the-b-element">b</a></code> element <a href="rendering.html#represents">represents</a> a span of text
|
|
to which attention is being drawn for utilitarian purposes without
|
|
conveying any extra importance and with no implication of an
|
|
alternate voice or mood, such as key words in a document abstract,
|
|
product names in a review, actionable words in interactive
|
|
text-driven software, or an article lede.</p><div class="example">
|
|
<p>The following example shows a use of the <code><a href="#the-b-element">b</a></code> element
|
|
to highlight key words without marking them up as important:</p>
|
|
<pre><p>The <b>frobonitor</b> and <b>barbinator</b> components are fried.</p></pre>
|
|
</div><div class="example">
|
|
<p>In the following example, objects in a text adventure are
|
|
highlighted as being special by use of the <code><a href="#the-b-element">b</a></code>
|
|
element.</p>
|
|
<pre><p>You enter a small room. Your <b>sword</b> glows
|
|
brighter. A <b>rat</b> scurries past the corner wall.</p></pre>
|
|
</div><div class="example">
|
|
<p>Another case where the <code><a href="#the-b-element">b</a></code> element is appropriate is
|
|
in marking up the lede (or lead) sentence or paragraph. The
|
|
following example shows how a <a href="http://news.bbc.co.uk/2/hi/uk_news/scotland/north_east/7101506.stm">BBC
|
|
article about kittens adopting a rabbit as their own</a> could be
|
|
marked up:</p>
|
|
<pre><article>
|
|
<h2>Kittens 'adopted' by pet rabbit</h2>
|
|
<p><b class="lede">Six abandoned kittens have found an
|
|
unexpected new mother figure — a pet rabbit.</b></p>
|
|
<p>Veterinary nurse Melanie Humble took the three-week-old
|
|
kittens to her Aberdeen home.</p>
|
|
<i>[...]</i></pre>
|
|
</div><p>As with the <code><a href="#the-i-element">i</a></code> element, authors can use the <code title="attr-class"><a href="elements.html#classes">class</a></code> attribute on the <code><a href="#the-b-element">b</a></code>
|
|
element to identify why the element is being used, so that if the
|
|
style of a particular use is to be changed at a later date, the
|
|
author doesn't have to go through annotating each use.</p><p>The <code><a href="#the-b-element">b</a></code> element should be used as a last resort when
|
|
no other element is more appropriate. In particular, headings should
|
|
use the <code><a href="sections.html#the-h1-h2-h3-h4-h5-and-h6-elements">h1</a></code> to <code><a href="sections.html#the-h1-h2-h3-h4-h5-and-h6-elements">h6</a></code> elements, stress emphasis
|
|
should use the <code><a href="#the-em-element">em</a></code> element, importance should be denoted
|
|
with the <code><a href="#the-strong-element">strong</a></code> element, and text marked or highlighted
|
|
should use the <code><a href="#the-mark-element">mark</a></code> element.</p><div class="example">
|
|
<p>The following would be <em>incorrect</em> usage:</p>
|
|
<pre class="bad"><p><b>WARNING!</b> Do not frob the barbinator!</p></pre>
|
|
<p>In the previous example, the correct element to use would have
|
|
been <code><a href="#the-strong-element">strong</a></code>, not <code><a href="#the-b-element">b</a></code>.</p>
|
|
</div><p class="note">Style sheets can be used to format <code><a href="#the-b-element">b</a></code>
|
|
elements, just like any other element can be restyled. Thus, it is
|
|
not the case that content in <code><a href="#the-b-element">b</a></code> elements will
|
|
necessarily be boldened.</p><h4 id="the-u-element"><span class="secno">4.6.18 </span>The <dfn><code>u</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
|
|
<dd><a href="content-models.html#flow-content">Flow content</a>.</dd>
|
|
<dd><a href="content-models.html#phrasing-content">Phrasing content</a>.</dd>
|
|
<dt>Contexts in which this element can be used:</dt>
|
|
<dd>Where <a href="content-models.html#phrasing-content">phrasing content</a> is expected.</dd>
|
|
<dt>Content model:</dt>
|
|
<dd><a href="content-models.html#phrasing-content">Phrasing content</a>.</dd>
|
|
<dt>Content attributes:</dt>
|
|
<dd><a href="elements.html#global-attributes">Global attributes</a></dd>
|
|
<dt>DOM interface:</dt>
|
|
<dd>Uses <code><a href="elements.html#htmlelement">HTMLElement</a></code>.</dd>
|
|
</dl><p>The <code><a href="#the-u-element">u</a></code> element <a href="rendering.html#represents">represents</a> a span of text
|
|
with an unarticulated, though explicitly rendered, non-textual
|
|
annotation, such as labeling the text as being a proper name in
|
|
Chinese text (a Chinese proper name mark), or labeling the text as
|
|
being misspelt.</p><p>In most cases, another element is likely to be more appropriate:
|
|
for marking stress emphasis, the <code><a href="#the-em-element">em</a></code> element should be
|
|
used; for marking key words or phrases either the <code><a href="#the-b-element">b</a></code>
|
|
element or the <code><a href="#the-mark-element">mark</a></code> element should be used, depending
|
|
on the context; for marking book titles, the <code><a href="#the-cite-element">cite</a></code>
|
|
element should be used; for labeling text with explicit textual
|
|
annotations, the <code><a href="#the-ruby-element">ruby</a></code> element should be used; for
|
|
labeling ship names in Western texts, the <code><a href="#the-i-element">i</a></code> element
|
|
should be used.</p><p class="note">The default rendering of the <code><a href="#the-u-element">u</a></code> element
|
|
in visual presentations clashes with the conventional rendering of
|
|
hyperlinks (underlining). Authors are encouraged to avoid using the
|
|
<code><a href="#the-u-element">u</a></code> element where it could be confused for a
|
|
hyperlink.</p><h4 id="the-mark-element"><span class="secno">4.6.19 </span>The <dfn><code>mark</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
|
|
<dd><a href="content-models.html#flow-content">Flow content</a>.</dd>
|
|
<dd><a href="content-models.html#phrasing-content">Phrasing content</a>.</dd>
|
|
<dt>Contexts in which this element can be used:</dt>
|
|
<dd>Where <a href="content-models.html#phrasing-content">phrasing content</a> is expected.</dd>
|
|
<dt>Content model:</dt>
|
|
<dd><a href="content-models.html#phrasing-content">Phrasing content</a>.</dd>
|
|
<dt>Content attributes:</dt>
|
|
<dd><a href="elements.html#global-attributes">Global attributes</a></dd>
|
|
<dt>DOM interface:</dt>
|
|
<dd>Uses <code><a href="elements.html#htmlelement">HTMLElement</a></code>.</dd>
|
|
</dl><p>The <code><a href="#the-mark-element">mark</a></code> element <a href="rendering.html#represents">represents</a> a run of
|
|
text in one document marked or highlighted for reference purposes,
|
|
due to its relevance in another context. When used in a quotation or
|
|
other block of text referred to from the prose, it indicates a
|
|
highlight that was not originally present but which has been added
|
|
to bring the reader's attention to a part of the text that might not
|
|
have been considered important by the original author when the block
|
|
was originally written, but which is now under previously unexpected
|
|
scrutiny. When used in the main prose of a document, it indicates a
|
|
part of the document that has been highlighted due to its likely
|
|
relevance to the user's current activity.</p><div class="example">
|
|
<p>This example shows how the <code><a href="#the-mark-element">mark</a></code> element can be used
|
|
to bring attention to a particular part of a quotation:</p>
|
|
<pre><p lang="en-US">Consider the following quote:</p>
|
|
<blockquote lang="en-GB">
|
|
<p>Look around and you will find, no-one's really
|
|
<mark>colour</mark> blind.</p>
|
|
</blockquote>
|
|
<p lang="en-US">As we can tell from the <em>spelling</em> of the word,
|
|
the person writing this quote is clearly not American.</p></pre>
|
|
<p>(If the goal was to mark the element as misspelt, however, the
|
|
<code><a href="#the-u-element">u</a></code> element, possibly with a class, would be more
|
|
appropriate.</p>
|
|
</div><div class="example">
|
|
|
|
<p>Another example of the <code><a href="#the-mark-element">mark</a></code> element is highlighting
|
|
parts of a document that are matching some search string. If
|
|
someone looked at a document, and the server knew that the user was
|
|
searching for the word "kitten", then the server might return the
|
|
document with one paragraph modified as follows:</p>
|
|
|
|
<pre><p>I also have some <mark>kitten</mark>s who are visiting me
|
|
these days. They're really cute. I think they like my garden! Maybe I
|
|
should adopt a <mark>kitten</mark>.</p></pre>
|
|
|
|
</div><div class="example">
|
|
|
|
<p>In the following snippet, a paragraph of text refers to a
|
|
specific part of a code fragment.</p>
|
|
|
|
<pre><p>The highlighted part below is where the error lies:</p>
|
|
<pre><code>var i: Integer;
|
|
begin
|
|
i := <mark>1.1</mark>;
|
|
end.</code></pre></pre>
|
|
|
|
<p>This is separate from <em>syntax highlighting</em>, for which
|
|
<code><a href="#the-span-element">span</a></code> is more appropriate. Combining both, one would
|
|
get:</p>
|
|
|
|
<pre><p>The highlighted part below is where the error lies:</p>
|
|
<pre><code><span class=keyword>var</span> <span class=ident>i</span>: <span class=type>Integer</span>;
|
|
<span class=keyword>begin</span>
|
|
<span class=ident>i</span> := <span class=literal><mark>1.1</mark></span>;
|
|
<span class=keyword>end</span>.</code></pre></pre>
|
|
|
|
</div><div class="example">
|
|
|
|
<p>This is another example showing the use of <code><a href="#the-mark-element">mark</a></code> to
|
|
highlight a part of quoted text that was originally not
|
|
emphasized. In this example, common typographic conventions have
|
|
led the author to explicitly style <code><a href="#the-mark-element">mark</a></code> elements in
|
|
quotes to render in italics.</p>
|
|
|
|
<pre><article>
|
|
<style scoped>
|
|
blockquote mark, q mark {
|
|
font: inherit; font-style: italic;
|
|
text-decoration: none;
|
|
background: transparent; color: inherit;
|
|
}
|
|
.bubble em {
|
|
font: inherit; font-size: larger;
|
|
text-decoration: underline;
|
|
}
|
|
</style>
|
|
<h1>She knew</h1>
|
|
<p>Did you notice the subtle joke in the joke on panel 4?</p>
|
|
<blockquote>
|
|
<p class="bubble">I didn't <em>want</em> to believe. <mark>Of course
|
|
on some level I realized it was a known-plaintext attack.</mark> But I
|
|
couldn't admit it until I saw for myself.</p>
|
|
</blockquote>
|
|
<p>(Emphasis mine.) I thought that was great. It's so pedantic, yet it
|
|
explains everything neatly.</p>
|
|
</article></pre>
|
|
|
|
<p>Note, incidentally, the distinction between the <code><a href="#the-em-element">em</a></code>
|
|
element in this example, which is part of the original text being
|
|
quoted, and the <code><a href="#the-mark-element">mark</a></code> element, which is highlighting a
|
|
part for comment.</p>
|
|
|
|
</div><div class="example">
|
|
|
|
<p>The following example shows the difference between denoting the
|
|
<em>importance</em> of a span of text (<code><a href="#the-strong-element">strong</a></code>) as
|
|
opposed to denoting the <em>relevance</em> of a span of text
|
|
(<code><a href="#the-mark-element">mark</a></code>). It is an extract from a textbook, where the
|
|
extract has had the parts relevant to the exam highlighted. The
|
|
safety warnings, important though they may be, are apparently not
|
|
relevant to the exam.</p>
|
|
|
|
<pre><h3>Wormhole Physics Introduction</h3>
|
|
|
|
<p><mark>A wormhole in normal conditions can be held open for a
|
|
maximum of just under 39 minutes.</mark> Conditions that can increase
|
|
the time include a powerful energy source coupled to one or both of
|
|
the gates connecting the wormhole, and a large gravity well (such as a
|
|
black hole).</p>
|
|
|
|
<p><mark>Momentum is preserved across the wormhole. Electromagnetic
|
|
radiation can travel in both directions through a wormhole,
|
|
but matter cannot.</mark></p>
|
|
|
|
<p>When a wormhole is created, a vortex normally forms.
|
|
<strong>Warning: The vortex caused by the wormhole opening will
|
|
annihilate anything in its path.</strong> Vortexes can be avoided when
|
|
using sufficiently advanced dialing technology.</p>
|
|
|
|
<p><mark>An obstruction in a gate will prevent it from accepting a
|
|
wormhole connection.</mark></p></pre>
|
|
|
|
</div><h4 id="the-ruby-element"><span class="secno">4.6.20 </span>The <dfn><code>ruby</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
|
|
<dd><a href="content-models.html#flow-content">Flow content</a>.</dd>
|
|
<dd><a href="content-models.html#phrasing-content">Phrasing content</a>.</dd>
|
|
<dt>Contexts in which this element can be used:</dt>
|
|
<dd>Where <a href="content-models.html#phrasing-content">phrasing content</a> is expected.</dd>
|
|
<dt>Content model:</dt>
|
|
<dd>One or more groups of: <a href="content-models.html#phrasing-content">phrasing content</a> followed either by a single <code><a href="#the-rt-element">rt</a></code> element, or an <code><a href="#the-rp-element">rp</a></code> element, an <code><a href="#the-rt-element">rt</a></code> element, and another <code><a href="#the-rp-element">rp</a></code> element.</dd>
|
|
<dt>Content attributes:</dt>
|
|
<dd><a href="elements.html#global-attributes">Global attributes</a></dd>
|
|
<dt>DOM interface:</dt>
|
|
<dd>Uses <code><a href="elements.html#htmlelement">HTMLElement</a></code>.</dd>
|
|
</dl><p>The <code><a href="#the-ruby-element">ruby</a></code> element allows one or more spans of
|
|
phrasing content to be marked with ruby annotations. Ruby
|
|
annotations are short runs of text presented alongside base text,
|
|
primarily used in East Asian typography as a guide for
|
|
pronunciation or to include other annotations. In Japanese, this
|
|
form of typography is also known as <i>furigana</i>.</p><p>A <code><a href="#the-ruby-element">ruby</a></code> element <a href="rendering.html#represents">represents</a> the spans of
|
|
phrasing content it contains, ignoring all the child <code><a href="#the-rt-element">rt</a></code>
|
|
and <code><a href="#the-rp-element">rp</a></code> elements and their descendants. Those spans of
|
|
phrasing content have associated annotations created using the
|
|
<code><a href="#the-rt-element">rt</a></code> element.</p><div class="example">
|
|
|
|
|
|
|
|
|
|
<p>In this example, each ideograph in the Japanese text <span lang="ja" title="">漢字</span> is annotated with its
|
|
reading in hiragana.</p>
|
|
|
|
<pre lang="ja">...
|
|
<ruby>漢<rt>かん</rt>字<rt>じ　</rt></ruby>
|
|
...</pre>
|
|
|
|
<p>This might be rendered as:</p>
|
|
|
|
<p><img alt="The two main ideographs, each with its annotation in hiragana rendered in a smaller font above it." height="78" src="sample-ruby-ja.png" width="171"></p>
|
|
|
|
</div><div class="example">
|
|
|
|
|
|
|
|
<p>In this example, each ideograph in the traditional Chinese text
|
|
<span lang="zh-TW" title="">漢字</span> is annotated
|
|
with its bopomofo reading.</p>
|
|
|
|
<pre lang="zh-TW"><ruby>漢<rt>ㄏㄢˋ</rt>字<rt>ㄗˋ　</rt></ruby></pre>
|
|
|
|
<p>This might be rendered as:</p>
|
|
|
|
<p><img alt="The two main ideographs, each with its bopomofo annotation rendered in a smaller font next to it." height="100" src="sample-ruby-bopomofo.png" width="78"></p>
|
|
|
|
</div><div class="example">
|
|
|
|
|
|
|
|
<p>In this example, each ideograph in the simplified Chinese text
|
|
<span lang="zh-CN" title="">汉字</span> is annotated
|
|
with its pinyin reading.</p>
|
|
|
|
<pre lang="zh-CN">...<ruby>汉<rt>hàn</rt>字<rt>zì </rt></ruby>...</pre>
|
|
|
|
<p>This might be rendered as:</p>
|
|
|
|
<p><img alt="The two main ideographs, each with its pinyin annotation rendered in a smaller font above it." height="79" src="sample-ruby-pinyin.png" width="173"></p>
|
|
|
|
</div><h4 id="the-rt-element"><span class="secno">4.6.21 </span>The <dfn><code>rt</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
|
|
<dd>None.</dd>
|
|
<dt>Contexts in which this element can be used:</dt>
|
|
<dd>As a child of a <code><a href="#the-ruby-element">ruby</a></code> element.</dd>
|
|
<dt>Content model:</dt>
|
|
<dd><a href="content-models.html#phrasing-content">Phrasing content</a>.</dd>
|
|
<dt>Content attributes:</dt>
|
|
<dd><a href="elements.html#global-attributes">Global attributes</a></dd>
|
|
<dt>DOM interface:</dt>
|
|
<dd>Uses <code><a href="elements.html#htmlelement">HTMLElement</a></code>.</dd>
|
|
</dl><p>The <code><a href="#the-rt-element">rt</a></code> element marks the ruby text component of a
|
|
ruby annotation.</p><p>An <code><a href="#the-rt-element">rt</a></code> element <span class="impl">that is a child of
|
|
a <code><a href="#the-ruby-element">ruby</a></code> element</span> <a href="rendering.html#represents">represents</a> an
|
|
annotation (given by its children) for the zero or more nodes of
|
|
phrasing content that immediately precedes it in the
|
|
<code><a href="#the-ruby-element">ruby</a></code> element, ignoring <code><a href="#the-rp-element">rp</a></code> elements.</p><div class="impl">
|
|
|
|
<p>An <code><a href="#the-rt-element">rt</a></code> element that is not a child of a
|
|
<code><a href="#the-ruby-element">ruby</a></code> element represents the same thing as its
|
|
children.</p>
|
|
|
|
</div><h4 id="the-rp-element"><span class="secno">4.6.22 </span>The <dfn><code>rp</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
|
|
<dd>None.</dd>
|
|
<dt>Contexts in which this element can be used:</dt>
|
|
<dd>As a child of a <code><a href="#the-ruby-element">ruby</a></code> element, either immediately before or immediately after an <code><a href="#the-rt-element">rt</a></code> element.</dd>
|
|
<dt>Content model:</dt>
|
|
<dd><a href="content-models.html#phrasing-content">Phrasing content</a>.</dd>
|
|
<dt>Content attributes:</dt>
|
|
<dd><a href="elements.html#global-attributes">Global attributes</a></dd>
|
|
<dt>DOM interface:</dt>
|
|
<dd>Uses <code><a href="elements.html#htmlelement">HTMLElement</a></code>.</dd>
|
|
</dl><p>The <code><a href="#the-rp-element">rp</a></code> element can be used to provide parentheses
|
|
around a ruby text component of a ruby annotation, to be shown by
|
|
user agents that don't support ruby annotations.</p><p>An <code><a href="#the-rp-element">rp</a></code> element <span class="impl">that is a child of
|
|
a <code><a href="#the-ruby-element">ruby</a></code> element</span> <a href="rendering.html#represents">represents</a>
|
|
nothing<span class="impl"> and its contents must be
|
|
ignored</span>. <span class="impl">An <code><a href="#the-rp-element">rp</a></code> element whose
|
|
parent element is not a <code><a href="#the-ruby-element">ruby</a></code> element
|
|
<a href="rendering.html#represents">represents</a> its children.</span></p><div class="example">
|
|
|
|
<p>The example above, in which each ideograph in the text <span lang="ja" title="">漢字</span> is annotated with its
|
|
phonetic reading, could be expanded to use <code><a href="#the-rp-element">rp</a></code> so that in
|
|
legacy user agents the readings are in parentheses:</p>
|
|
|
|
<pre lang="ja">...
|
|
<ruby>
|
|
漢 <rp>(</rp><rt>かん</rt><rp>)</rp>
|
|
字 <rp>(</rp><rt>じ</rt><rp>)</rp>
|
|
</ruby>
|
|
...</pre>
|
|
|
|
<p>In conforming user agents the rendering would be as above, but
|
|
in user agents that do not support ruby, the rendering would
|
|
be:</p>
|
|
|
|
<pre lang="ja">... 漢 (かん) 字 (じ) ...</pre>
|
|
|
|
</div><h4 id="the-bdi-element"><span class="secno">4.6.23 </span>The <dfn><code>bdi</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
|
|
<dd><a href="content-models.html#flow-content">Flow content</a>.</dd>
|
|
<dd><a href="content-models.html#phrasing-content">Phrasing content</a>.</dd>
|
|
<dt>Contexts in which this element can be used:</dt>
|
|
<dd>Where <a href="content-models.html#phrasing-content">phrasing content</a> is expected.</dd>
|
|
<dt>Content model:</dt>
|
|
<dd><a href="content-models.html#phrasing-content">Phrasing content</a>.</dd>
|
|
<dt>Content attributes:</dt>
|
|
<dd><a href="elements.html#global-attributes">Global attributes</a></dd>
|
|
<dd>Also, the <code title="attr-dir"><a href="elements.html#the-dir-attribute">dir</a></code> global attribute has special semantics on this element.</dd>
|
|
<dt>DOM interface:</dt>
|
|
<dd>Uses <code><a href="elements.html#htmlelement">HTMLElement</a></code>.</dd>
|
|
</dl><p>The <code><a href="#the-bdi-element">bdi</a></code> element <a href="rendering.html#represents">represents</a> a span of
|
|
text that is to be isolated from its surroundings for the purposes
|
|
of bidirectional text formatting. <a href="references.html#refsBIDI">[BIDI]</a></p><p class="note">The <code title="attr-dir"><a href="elements.html#the-dir-attribute">dir</a></code> global
|
|
attribute defaults to <code title="attr-dir-auto"><a href="elements.html#attr-dir-auto">auto</a></code> on
|
|
this element (it never inherits from the parent element like with
|
|
other elements).</p><div class="impl">
|
|
|
|
<p>For the purposes of applying the bidirectional algorithm to the
|
|
contents of a <code><a href="#the-bdi-element">bdi</a></code> element, user agents must treat the
|
|
element as a paragraph-level container.</p>
|
|
|
|
<p>For the purposes of applying the bidirectional algorithm to the
|
|
paragraph-level container that a <code><a href="#the-bdi-element">bdi</a></code> element finds
|
|
itself within, the <code><a href="#the-bdi-element">bdi</a></code> element must be treated like a
|
|
U+FFFC OBJECT REPLACEMENT CHARACTER (in the same manner that an
|
|
image or other inline object is handled).</p>
|
|
|
|
<p>The requirements on handling the <code><a href="#the-bdi-element">bdi</a></code> element for the
|
|
bidirectional algorithm may be implemented indirectly through the
|
|
style layer. For example, an HTML+CSS user agent could implement
|
|
these requirements by implementing the CSS 'unicode-bidi' property.
|
|
<a href="references.html#refsCSS">[CSS]</a></p>
|
|
|
|
</div><div class="example">
|
|
|
|
<p>This element is especially useful when embedding user-generated
|
|
content with an unknown directionality.</p>
|
|
|
|
<p>In this example, usernames are shown along with the number of
|
|
posts that the user has submitted. If the <code><a href="#the-bdi-element">bdi</a></code> element
|
|
were not used, the username of the Arabic user would end up
|
|
confusing the text (the bidirectional algorithm would put the colon
|
|
and the number "3" next to the word "User" rather than next to the
|
|
word "posts").</p>
|
|
|
|
<pre><ul>
|
|
<li>User <bdi>jcranmer</bdi>: 12 posts.
|
|
<li>User <bdi>hober</bdi>: 5 posts.
|
|
<li>User <bdi><bdo dir="rtl">إيان</bdo></bdi>: 3 posts.
|
|
</ul></pre>
|
|
|
|
</div><h4 id="the-bdo-element"><span class="secno">4.6.24 </span>The <dfn><code>bdo</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
|
|
<dd><a href="content-models.html#flow-content">Flow content</a>.</dd>
|
|
<dd><a href="content-models.html#phrasing-content">Phrasing content</a>.</dd>
|
|
<dt>Contexts in which this element can be used:</dt>
|
|
<dd>Where <a href="content-models.html#phrasing-content">phrasing content</a> is expected.</dd>
|
|
<dt>Content model:</dt>
|
|
<dd><a href="content-models.html#phrasing-content">Phrasing content</a>.</dd>
|
|
<dt>Content attributes:</dt>
|
|
<dd><a href="elements.html#global-attributes">Global attributes</a></dd>
|
|
<dd>Also, the <code title="attr-dir"><a href="elements.html#the-dir-attribute">dir</a></code> global attribute has special semantics on this element.</dd>
|
|
<dt>DOM interface:</dt>
|
|
<dd>Uses <code><a href="elements.html#htmlelement">HTMLElement</a></code>.</dd>
|
|
</dl><p>The <code><a href="#the-bdo-element">bdo</a></code> element <a href="rendering.html#represents">represents</a> explicit
|
|
text directionality formatting control for its children. It allows
|
|
authors to override the Unicode bidirectional algorithm by
|
|
explicitly specifying a direction override. <a href="references.html#refsBIDI">[BIDI]</a></p><p>Authors must specify the <code title="attr-dir"><a href="elements.html#the-dir-attribute">dir</a></code>
|
|
attribute on this element, with the value <code>ltr</code> to
|
|
specify a left-to-right override and with the value <code>rtl</code>
|
|
to specify a right-to-left override.</p><div class="impl">
|
|
|
|
<p>If the element's <code title="attr-dir"><a href="elements.html#the-dir-attribute">dir</a></code> attribute is
|
|
in the <i title="attr-dir-rtl-state"><a href="elements.html#attr-dir-rtl-state">rtl</a></i> state, then for the
|
|
purposes of the bidirectional algorithm, the user agent must act as
|
|
if there was a U+202D LEFT-TO-RIGHT OVERRIDE character at the start
|
|
of the element, and a U+202C POP DIRECTIONAL FORMATTING at the end
|
|
of the element.</p>
|
|
|
|
<p>If the element's <code title="attr-dir"><a href="elements.html#the-dir-attribute">dir</a></code> attribute is
|
|
in the <i title="attr-dir-ltr-state"><a href="elements.html#attr-dir-ltr-state">ltr</a></i>, then for the purposes
|
|
of the bidirectional algorithm, the user agent must act as if there
|
|
was a U+202E RIGHT-TO-LEFT OVERRIDE character at the start of the
|
|
element, and a U+202C POP DIRECTIONAL FORMATTING at the end of the
|
|
element.</p>
|
|
|
|
<p>The requirements on handling the <code><a href="#the-bdo-element">bdo</a></code> element for the
|
|
bidirectional algorithm may be implemented indirectly through the
|
|
style layer. For example, an HTML+CSS user agent could implement
|
|
these requirements by implementing the CSS 'unicode-bidi' property.
|
|
<a href="references.html#refsCSS">[CSS]</a></p>
|
|
|
|
</div><h4 id="the-span-element"><span class="secno">4.6.25 </span>The <dfn><code>span</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
|
|
<dd><a href="content-models.html#flow-content">Flow content</a>.</dd>
|
|
<dd><a href="content-models.html#phrasing-content">Phrasing content</a>.</dd>
|
|
<dt>Contexts in which this element can be used:</dt>
|
|
<dd>Where <a href="content-models.html#phrasing-content">phrasing content</a> is expected.</dd>
|
|
<dt>Content model:</dt>
|
|
<dd><a href="content-models.html#phrasing-content">Phrasing content</a>.</dd>
|
|
<dt>Content attributes:</dt>
|
|
<dd><a href="elements.html#global-attributes">Global attributes</a></dd>
|
|
<dt>DOM interface:</dt>
|
|
<dd>
|
|
<pre class="idl">interface <dfn id="htmlspanelement">HTMLSpanElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> {};</pre>
|
|
</dd>
|
|
</dl><p>The <code><a href="#the-span-element">span</a></code> element doesn't mean anything on its own,
|
|
but can be useful when used together with the <a href="elements.html#global-attributes">global
|
|
attributes</a>, e.g. <code title="attr-class"><a href="elements.html#classes">class</a></code>, <code title="attr-lang"><a href="elements.html#attr-lang">lang</a></code>, or <code title="attr-dir"><a href="elements.html#the-dir-attribute">dir</a></code>.
|
|
It <a href="rendering.html#represents">represents</a> its children.</p><div class="example">
|
|
|
|
<p>In this example, a code fragment is marked up using
|
|
<code><a href="#the-span-element">span</a></code> elements and <code title="attr-class"><a href="elements.html#classes">class</a></code> attributes so that its keywords and
|
|
identifiers can be color-coded from CSS:</p>
|
|
|
|
|
|
|
|
<pre><pre><code class="lang-c"><span class="keyword">for</span> (<span class="ident">j</span> = 0; <span class="ident">j</span> &lt; 256; <span class="ident">j</span>++) {
|
|
<span class="ident">i_t3</span> = (<span class="ident">i_t3</span> & 0x1ffff) | (<span class="ident">j</span> &lt;&lt; 17);
|
|
<span class="ident">i_t6</span> = (((((((<span class="ident">i_t3</span> >> 3) ^ <span class="ident">i_t3</span>) >> 1) ^ <span class="ident">i_t3</span>) >> 8) ^ <span class="ident">i_t3</span>) >> 5) & 0xff;
|
|
<span class="keyword">if</span> (<span class="ident">i_t6</span> == <span class="ident">i_t1</span>)
|
|
<span class="keyword">break</span>;
|
|
}</code></pre></pre>
|
|
|
|
</div><h4 id="the-br-element"><span class="secno">4.6.26 </span>The <dfn><code>br</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
|
|
<dd><a href="content-models.html#flow-content">Flow content</a>.</dd>
|
|
<dd><a href="content-models.html#phrasing-content">Phrasing content</a>.</dd>
|
|
<dt>Contexts in which this element can be used:</dt>
|
|
<dd>Where <a href="content-models.html#phrasing-content">phrasing content</a> is expected.</dd>
|
|
<dt>Content model:</dt>
|
|
<dd>Empty.</dd>
|
|
<dt>Content attributes:</dt>
|
|
<dd><a href="elements.html#global-attributes">Global attributes</a></dd>
|
|
<dt>DOM interface:</dt>
|
|
<dd>
|
|
<pre class="idl">interface <dfn id="htmlbrelement">HTMLBRElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> {};</pre>
|
|
</dd>
|
|
</dl><p>The <code><a href="#the-br-element">br</a></code> element <a href="rendering.html#represents">represents</a> a line
|
|
break.</p><p class="note">While line breaks are usually represented in visual
|
|
media by physically moving subsequent text to a new line, a style
|
|
sheet or user agent would be equally justified in causing line
|
|
breaks to be rendered in a different manner, for instance as green
|
|
dots, or as extra spacing.</p><p><code><a href="#the-br-element">br</a></code> elements must be used only for line breaks that
|
|
are actually part of the content, as in poems or addresses.</p><div class="example">
|
|
|
|
<p>The following example is correct usage of the <code><a href="#the-br-element">br</a></code>
|
|
element:</p>
|
|
|
|
<pre><p>P. Sherman<br>
|
|
42 Wallaby Way<br>
|
|
Sydney</p></pre>
|
|
|
|
</div><p><code><a href="#the-br-element">br</a></code> elements must not be used for separating thematic
|
|
groups in a paragraph.</p><div class="example">
|
|
|
|
<p>The following examples are non-conforming, as they abuse the
|
|
<code><a href="#the-br-element">br</a></code> element:</p>
|
|
|
|
<pre><p><a ...>34 comments.</a><br>
|
|
<a ...>Add a comment.</a></p></pre>
|
|
|
|
<pre><p><label>Name: <input name="name"></label><br>
|
|
<label>Address: <input name="address"></label></p></pre>
|
|
|
|
<p>Here are alternatives to the above, which are correct:</p>
|
|
|
|
<pre><p><a ...>34 comments.</a></p>
|
|
<p><a ...>Add a comment.</a></p></pre>
|
|
|
|
<pre><p><label>Name: <input name="name"></label></p>
|
|
<p><label>Address: <input name="address"></label></p></pre>
|
|
|
|
</div><p>If a <a href="content-models.html#paragraph">paragraph</a> consists of nothing but a single
|
|
<code><a href="#the-br-element">br</a></code> element, it represents a placeholder blank line
|
|
(e.g. as in a template). Such blank lines must not be used for
|
|
presentation purposes.</p><div class="impl">
|
|
|
|
<p>Any content inside <code><a href="#the-br-element">br</a></code> elements must not be
|
|
considered part of the surrounding text.</p>
|
|
|
|
<p>A <code><a href="#the-br-element">br</a></code> element should separate paragraphs for the
|
|
purposes of the Unicode bidirectional algorithm. This requirement
|
|
may be implemented indirectly through the style layer. For example,
|
|
an HTML+CSS user agent could implement these requirements by
|
|
implementing the CSS 'unicode-bidi' property. <a href="references.html#refsBIDI">[BIDI]</a> <a href="references.html#refsCSS">[CSS]</a></p>
|
|
|
|
|
|
</div><h4 id="the-wbr-element"><span class="secno">4.6.27 </span>The <dfn><code>wbr</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
|
|
<dd><a href="content-models.html#flow-content">Flow content</a>.</dd>
|
|
<dd><a href="content-models.html#phrasing-content">Phrasing content</a>.</dd>
|
|
<dt>Contexts in which this element can be used:</dt>
|
|
<dd>Where <a href="content-models.html#phrasing-content">phrasing content</a> is expected.</dd>
|
|
<dt>Content model:</dt>
|
|
<dd>Empty.</dd>
|
|
<dt>Content attributes:</dt>
|
|
<dd><a href="elements.html#global-attributes">Global attributes</a></dd>
|
|
<dt>DOM interface:</dt>
|
|
<dd>Uses <code><a href="elements.html#htmlelement">HTMLElement</a></code>.</dd>
|
|
</dl><p>The <code><a href="#the-wbr-element">wbr</a></code> element <a href="rendering.html#represents">represents</a> a line break
|
|
opportunity.</p><div class="example">
|
|
|
|
<p>In the following example, someone is quoted as saying something
|
|
which, for effect, is written as one long word. However, to ensure
|
|
that the text can be wrapped in a readable fashion, the individual
|
|
words in the quote are separated using a <code><a href="#the-wbr-element">wbr</a></code>
|
|
element.</p>
|
|
|
|
<pre><p>So then he pointed at the tiger and screamed
|
|
"there<wbr>is<wbr>no<wbr>way<wbr>you<wbr>are<wbr>ever<wbr>going<wbr>to<wbr>catch<wbr>me"!</p></pre>
|
|
|
|
</div><div class="impl">
|
|
|
|
<p>Any content inside <code><a href="#the-wbr-element">wbr</a></code> elements must not be
|
|
considered part of the surrounding text.</p>
|
|
|
|
</div><h4 id="usage-summary"><span class="secno">4.6.28 </span>Usage summary</h4><p><i>This section is non-normative.</i></p><table><thead><tr><th>Element
|
|
</th><th>Purpose
|
|
</th><th>Example
|
|
</th></tr></thead><tbody><tr><td><code><a href="#the-a-element">a</a></code>
|
|
</td><td>Hyperlinks
|
|
</td><td><pre class="example">Visit my <strong><a href="drinks.html">drinks</a></strong> page.</pre>
|
|
|
|
</td></tr><tr><td><code><a href="#the-em-element">em</a></code>
|
|
</td><td>Stress emphasis
|
|
</td><td><pre class="example">I must say I <strong><em>adore</em></strong> lemonade.</pre>
|
|
|
|
</td></tr><tr><td><code><a href="#the-strong-element">strong</a></code>
|
|
</td><td>Importance
|
|
</td><td><pre class="example">This tea is <strong><strong>very hot</strong></strong>.</pre>
|
|
|
|
</td></tr><tr><td><code><a href="#the-small-element">small</a></code>
|
|
</td><td>Side comments
|
|
</td><td><pre class="example">These grapes are made into wine. <strong><small>Alcohol is addictive.</small></strong></pre>
|
|
|
|
</td></tr><tr><td><code><a href="#the-s-element">s</a></code>
|
|
</td><td>Inaccurate text
|
|
</td><td><pre class="example">Price: <strong><s>£4.50</s></strong> £2.00!</pre>
|
|
|
|
</td></tr><tr><td><code><a href="#the-cite-element">cite</a></code>
|
|
</td><td>Titles of works
|
|
</td><td><pre class="example">The case <strong><cite>Hugo v. Danielle</cite></strong> is relevant here.</pre>
|
|
|
|
</td></tr><tr><td><code><a href="#the-q-element">q</a></code>
|
|
</td><td>Quotations
|
|
</td><td><pre class="example">The judge said <strong><q>You can drink water from the fish tank</q></strong> but advised against it.</pre>
|
|
|
|
</td></tr><tr><td><code><a href="#the-dfn-element">dfn</a></code>
|
|
</td><td>Defining instance
|
|
</td><td><pre class="example">The term <strong><dfn>organic food</dfn></strong> refers to food produced without synthetic chemicals.</pre>
|
|
|
|
</td></tr><tr><td><code><a href="#the-abbr-element">abbr</a></code>
|
|
</td><td>Abbreviations
|
|
</td><td><pre class="example">Organic food in Ireland is certified by the <strong><abbr title="Irish Organic Farmers and Growers Association">IOFGA</abbr></strong>.</pre>
|
|
|
|
</td></tr><tr><td><code><a href="#the-time-element">time</a></code>
|
|
</td><td>Date and/or time
|
|
</td><td><pre class="example">Published <strong><time>2009-10-21</time></strong>.</pre>
|
|
|
|
</td></tr><tr><td><code><a href="#the-code-element">code</a></code>
|
|
</td><td>Computer code
|
|
</td><td><pre class="example">The <strong><code>fruitdb</code></strong> program can be used for tracking fruit production.</pre>
|
|
|
|
</td></tr><tr><td><code><a href="#the-var-element">var</a></code>
|
|
</td><td>Variables
|
|
</td><td><pre class="example">If there are <strong><var>n</var></strong> fruit in the bowl, at least <strong><var>n</var></strong>÷2 will be ripe.</pre>
|
|
|
|
</td></tr><tr><td><code><a href="#the-samp-element">samp</a></code>
|
|
</td><td>Computer output
|
|
</td><td><pre class="example">The computer said <strong><samp>Unknown error -3</samp></strong>.</pre>
|
|
|
|
</td></tr><tr><td><code><a href="#the-kbd-element">kbd</a></code>
|
|
</td><td>User input
|
|
</td><td><pre class="example">Hit <strong><kbd>F1</kbd></strong> to continue.</pre>
|
|
|
|
</td></tr><tr><td><code><a href="#the-sub-and-sup-elements">sub</a></code>
|
|
</td><td>Subscripts
|
|
</td><td><pre class="example">Water is H<strong><sub>2</sub></strong>O.</pre>
|
|
|
|
</td></tr><tr><td><code><a href="#the-sub-and-sup-elements">sup</a></code>
|
|
</td><td>Superscripts
|
|
</td><td><pre class="example">The Hydrogen in heavy water is usually <strong><sup>2</sup></strong>H.</pre>
|
|
|
|
</td></tr><tr><td><code><a href="#the-i-element">i</a></code>
|
|
</td><td>Alternative voice
|
|
</td><td><pre class="example">Lemonade consists primarily of <strong><i>Citrus limon</i></strong>.</pre>
|
|
|
|
</td></tr><tr><td><code><a href="#the-b-element">b</a></code>
|
|
</td><td>Keywords
|
|
</td><td><pre class="example">Take a <strong><b>lemon</b></strong> and squeeze it with a <strong><b>juicer</b></strong>.</pre>
|
|
|
|
</td></tr><tr><td><code><a href="#the-u-element">u</a></code>
|
|
</td><td>Annotations
|
|
</td><td><pre class="example">The mixture of apple juice and <u class="spelling">eldeflower</u> juice is very pleasant.</pre>
|
|
|
|
</td></tr><tr><td><code><a href="#the-mark-element">mark</a></code>
|
|
</td><td>Highlight
|
|
</td><td><pre class="example">Elderflower cordial, with one <strong><mark>part</mark></strong> cordial to ten <strong><mark>part</mark></strong>s water, stands a<strong><mark>part</mark></strong> from the rest.</pre>
|
|
|
|
</td></tr><tr><td><code><a href="#the-ruby-element">ruby</a></code>, <code><a href="#the-rt-element">rt</a></code>, <code><a href="#the-rp-element">rp</a></code>
|
|
</td><td>Ruby annotations
|
|
</td><td><pre class="example"><strong><ruby> OJ <rp>(<rt>Orange Juice<rp>)</ruby></strong></pre>
|
|
|
|
</td></tr><tr><td><code><a href="#the-bdi-element">bdi</a></code>
|
|
</td><td>Text directionality isolation
|
|
</td><td><pre class="example">The recommended restaurant is <strong><bdi lang="">My Juice Café (At The Beach)</bdi></strong>.</pre>
|
|
|
|
</td></tr><tr><td><code><a href="#the-bdo-element">bdo</a></code>
|
|
</td><td>Text directionality formatting
|
|
</td><td><pre class="example">The proposal is to write English, but in reverse order. "Juice" would become "<strong><bdo dir=rtl>Juice</bdo></strong>"</pre>
|
|
|
|
</td></tr><tr><td><code><a href="#the-span-element">span</a></code>
|
|
</td><td>Other
|
|
</td><td><pre class="example">In French we call it <strong><span lang="fr">sirop de sureau</span></strong>.</pre>
|
|
|
|
</td></tr><tr><td><code><a href="#the-br-element">br</a></code>
|
|
</td><td>Line break
|
|
</td><td><pre class="example">Simply Orange Juice Company<strong><br></strong>Apopka, FL 32703<strong><br></strong>U.S.A.</pre>
|
|
|
|
</td></tr><tr><td><code><a href="#the-wbr-element">wbr</a></code>
|
|
</td><td>Line breaking opportunity
|
|
</td><td><pre class="example">www.simply<strong><wbr></strong>orange<strong><wbr></strong>juice.com</pre>
|
|
|
|
</td></tr></tbody></table></body></html>
|