text-level-semantics.html 138 KB

Raw Blame History Permalink

<!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 &#8212; 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="&#9587;&#8413;"></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> &#8211;
   <a href="spec.html#contents">Table of contents</a> &#8211;
   <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>&lt;nav&gt;
 &lt;ul&gt;
  &lt;li&gt; &lt;a href="/"&gt;Home&lt;/a&gt; &lt;/li&gt;
  &lt;li&gt; &lt;a href="/news"&gt;News&lt;/a&gt; &lt;/li&gt;
  &lt;li&gt; &lt;a&gt;Examples&lt;/a&gt; &lt;/li&gt;
  &lt;li&gt; &lt;a href="/legal"&gt;Legal&lt;/a&gt; &lt;/li&gt;
 &lt;/ul&gt;
&lt;/nav&gt;</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>&lt;aside class="advertising"&gt;
 &lt;h1&gt;Advertising&lt;/h1&gt;
 &lt;a href="http://ad.example.com/?adid=1929&amp;amp;pubid=1422"&gt;
  &lt;section&gt;
   &lt;h1&gt;Mellblomatic 9000!&lt;/h1&gt;
   &lt;p&gt;Turn all your widgets into mellbloms!&lt;/p&gt;
   &lt;p&gt;Only $9.99 plus shipping and handling.&lt;/p&gt;
  &lt;/section&gt;
 &lt;/a&gt;
 &lt;a href="http://ad.example.com/?adid=375&amp;amp;pubid=1422"&gt;
  &lt;section&gt;
   &lt;h1&gt;The Mellblom Browser&lt;/h1&gt;
   &lt;p&gt;Web browsing at the speed of light.&lt;/p&gt;
   &lt;p&gt;No other browser goes faster!&lt;/p&gt;
  &lt;/section&gt;
 &lt;/a&gt;
&lt;/aside&gt;</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>&lt;p&gt;Cats are cute animals.&lt;/p&gt;</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>&lt;p&gt;&lt;em&gt;Cats&lt;/em&gt; are cute animals.&lt;/p&gt;</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>&lt;p&gt;Cats &lt;em&gt;are&lt;/em&gt; cute animals.&lt;/p&gt;</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>&lt;p&gt;Cats are &lt;em&gt;cute&lt;/em&gt; animals.&lt;/p&gt;</pre>

   <p>Similarly, if someone asserted that cats were vegetables,
   someone correcting this might emphasize the last word:</p>

   <pre>&lt;p&gt;Cats are cute &lt;em&gt;animals&lt;/em&gt;.&lt;/p&gt;</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>&lt;p&gt;&lt;em&gt;Cats are cute animals!&lt;/em&gt;&lt;/p&gt;</pre>

   <p>Anger mixed with emphasizing the cuteness could lead to markup
   such as:</p>

   <pre>&lt;p&gt;&lt;em&gt;Cats are &lt;em&gt;cute&lt;/em&gt; animals!&lt;/em&gt;&lt;/p&gt;</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>&lt;p&gt;&lt;strong&gt;Warning.&lt;/strong&gt; This dungeon is dangerous.
&lt;strong&gt;Avoid the ducks.&lt;/strong&gt; Take any gold you find.
&lt;strong&gt;&lt;strong&gt;Do not take any of the diamonds&lt;/strong&gt;,
they are explosive and &lt;strong&gt;will destroy anything within
ten meters.&lt;/strong&gt;&lt;/strong&gt; You have been warned.&lt;/p&gt;</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">&lt;dl&gt;
 &lt;dt&gt;Single room
 &lt;dd&gt;199 &#8364; &lt;small&gt;breakfast included, VAT not included&lt;/small&gt;
 &lt;dt&gt;Double room
 &lt;dd&gt;239 &#8364; &lt;small&gt;breakfast included, VAT not included&lt;/small&gt;
&lt;/dl&gt;</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>&lt;p&gt;Example Corp today announced record profits for the
second quarter &lt;small&gt;(Full Disclosure: Foo News is a subsidiary of
Example Corp)&lt;/small&gt;, leading to speculation about a third quarter
merger with Demo Group.&lt;/p&gt;</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>&lt;aside&gt;
 &lt;h1&gt;Example Corp&lt;/h1&gt;
 &lt;p&gt;This company mostly creates small software and Web
 sites.&lt;/p&gt;
 &lt;p&gt;The Example Corp company mission is "To provide entertainment
 and news on a sample basis".&lt;/p&gt;
 &lt;p&gt;&lt;small&gt;Information obtained from &lt;a
 href="http://example.com/about.html"&gt;example.com&lt;/a&gt; home
 page.&lt;/small&gt;&lt;/p&gt;
&lt;/aside&gt;</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>&lt;p&gt;&lt;strong&gt;&lt;small&gt;Continued use of this service will result in a kiss.&lt;/small&gt;&lt;/strong&gt;&lt;/p&gt;</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>&lt;p&gt;Buy our Iced Tea and Lemonade!&lt;/p&gt;
&lt;p&gt;&lt;s&gt;Recommended retail price: $3.99 per bottle&lt;/s&gt;&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Now selling for just $2.99 a bottle!&lt;/strong&gt;&lt;/p&gt;</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 &#8212; even if people
  call that person a piece of work &#8212; 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>&lt;p&gt;My favorite book is &lt;cite&gt;The Reality Dysfunction&lt;/cite&gt; by
Peter F. Hamilton. My favorite comic is &lt;cite&gt;Pearls Before
Swine&lt;/cite&gt; by Stephan Pastis. My favorite track is &lt;cite&gt;Jive
Samba&lt;/cite&gt; by the Cannonball Adderley Sextet.&lt;/p&gt;</pre>

  </div><div class="example">

   <p>This is correct usage:</p>

   <pre>&lt;p&gt;According to the Wikipedia article &lt;cite&gt;HTML&lt;/cite&gt;, as it
stood in mid-February 2008, leaving attribute values unquoted is
unsafe. This is obviously an over-simplification.&lt;/p&gt;</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">&lt;!-- do not copy this example, it is an example of bad usage! --&gt;
&lt;p&gt;According to &lt;cite&gt;the Wikipedia article on HTML&lt;/cite&gt;, as it
stood in mid-February 2008, leaving attribute values unquoted is
unsafe. This is obviously an over-simplification.&lt;/p&gt;</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>&lt;p&gt;&lt;cite&gt;Universal Declaration of Human Rights&lt;/cite&gt;, United Nations,
December 1948. Adopted by General Assembly resolution 217 A (III).&lt;/p&gt;</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>&lt;p&gt;&lt;cite&gt;This is wrong!&lt;/cite&gt;, said Ian.&lt;/p&gt;</pre>

   <p>This is also incorrect usage, because a person is not a
   work:</p>

   <pre>&lt;p&gt;&lt;q&gt;This is still wrong!&lt;/q&gt;, said &lt;cite&gt;Ian&lt;/cite&gt;.&lt;/p&gt;</pre>

   <p>The correct usage does not use a <code><a href="#the-cite-element">cite</a></code> element:</p>

   <pre>&lt;p&gt;&lt;q&gt;This is correct&lt;/q&gt;, said Ian.&lt;/p&gt;</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>&lt;p&gt;And then &lt;b&gt;Ian&lt;/b&gt; said &lt;q&gt;this might be right, in a
gossip column, maybe!&lt;/q&gt;.&lt;/p&gt;</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>&lt;p&gt;The man said &lt;q&gt;Things that are impossible just take
longer&lt;/q&gt;. I disagreed with him.&lt;/p&gt;</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>&lt;p&gt;The W3C page &lt;cite&gt;About W3C&lt;/cite&gt; says the W3C's
mission is &lt;q cite="http://www.w3.org/Consortium/"&gt;To lead the
World Wide Web to its full potential by developing protocols and
guidelines that ensure long-term growth for the Web&lt;/q&gt;. I
disagree with this mission.&lt;/p&gt;</pre>

  </div><div class="example">

   <p>In the following example, the quotation itself contains a
   quotation:</p>

   <pre>&lt;p&gt;In &lt;cite&gt;Example One&lt;/cite&gt;, he writes &lt;q&gt;The man
said &lt;q&gt;Things that are impossible just take longer&lt;/q&gt;. I
disagreed with him&lt;/q&gt;. Well, I disagree even more!&lt;/p&gt;</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>&lt;p&gt;His best argument was &#10077;I disagree&#10078;, which
I thought was laughable.&lt;/p&gt;</pre>

  </div><div class="example">

   <p>In the following example, there is no quote &#8212; 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>&lt;p&gt;The word "ineffable" could have been used to describe the disaster
resulting from the campaign's mismanagement.&lt;/p&gt;</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>&lt;p&gt;The &lt;dfn&gt;&lt;abbr title="Garage Door Opener"&gt;GDO&lt;/abbr&gt;&lt;/dfn&gt;
is a device that allows off-world teams to open the iris.&lt;/p&gt;
&lt;!-- ... later in the document: --&gt;
&lt;p&gt;Teal'c activated his &lt;abbr title="Garage Door Opener"&gt;GDO&lt;/abbr&gt;
and so Hammond ordered the iris to be opened.&lt;/p&gt;</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>&lt;p&gt;The &lt;dfn id=gdo&gt;&lt;abbr title="Garage Door Opener"&gt;GDO&lt;/abbr&gt;&lt;/dfn&gt;
is a device that allows off-world teams to open the iris.&lt;/p&gt;
&lt;!-- ... later in the document: --&gt;
&lt;p&gt;Teal'c activated his &lt;a href=#gdo&gt;&lt;abbr title="Garage Door Opener"&gt;GDO&lt;/abbr&gt;&lt;/a&gt;
and so Hammond ordered the iris to be opened.&lt;/p&gt;</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>&lt;p&gt;The &lt;dfn id=whatwg&gt;&lt;abbr
title="Web Hypertext Application Technology Working Group"&gt;WHATWG&lt;/abbr&gt;&lt;/dfn&gt;
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.&lt;/p&gt;</pre>
   <p>An alternative way to write this would be:</p>
   <pre>&lt;p&gt;The &lt;dfn id=whatwg&gt;Web Hypertext Application Technology
Working Group&lt;/dfn&gt; (&lt;abbr
title="Web Hypertext Application Technology Working Group"&gt;WHATWG&lt;/abbr&gt;)
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.&lt;/p&gt;</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>&lt;p&gt;The
&lt;abbr title="Web Hypertext Application Technology Working Group"&gt;WHATWG&lt;/abbr&gt;
started working on HTML5 in 2004.&lt;/p&gt;</pre>
  </div><div class="example">
   <p>This paragraph links an abbreviation to its definition.</p>
   <pre>&lt;p&gt;The &lt;a href="#whatwg"&gt;&lt;abbr
title="Web Hypertext Application Technology Working Group"&gt;WHATWG&lt;/abbr&gt;&lt;/a&gt;
community does not have much representation from Asia.&lt;/p&gt;</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>&lt;p&gt;Philip` and Dashiva both denied that they were going to
get the issue counts from past revisions of the specification to
backfill the &lt;abbr&gt;WHATWG&lt;/abbr&gt; issue graph.&lt;/p&gt;</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>&lt;p&gt;Two &lt;abbr title="Working Group"&gt;WG&lt;/abbr&gt;s worked on
this specification: the &lt;abbr&gt;WHATWG&lt;/abbr&gt; and the
&lt;abbr&gt;HTMLWG&lt;/abbr&gt;.&lt;/p&gt;</pre>

   <p>Here the plural is inside the element, so the expansion is in
   the plural:</p>

   <pre>&lt;p&gt;Two &lt;abbr title="Working Groups"&gt;WGs&lt;/abbr&gt; worked on
this specification: the &lt;abbr&gt;WHATWG&lt;/abbr&gt; and the
&lt;abbr&gt;HTMLWG&lt;/abbr&gt;.&lt;/p&gt;</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>&lt;div class="vevent"&gt;
 &lt;a class="url" href="http://www.web2con.com/"&gt;http://www.web2con.com/&lt;/a&gt;
  &lt;span class="summary"&gt;Web 2.0 Conference&lt;/span&gt;:
  &lt;time class="dtstart" datetime="2007-10-05"&gt;October 5&lt;/time&gt; -
  &lt;time class="dtend" datetime="2007-10-20"&gt;19&lt;/time&gt;,
  at the &lt;span class="location"&gt;Argent Hotel, San Francisco, CA&lt;/span&gt;
 &lt;/div&gt;</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>&lt;p&gt;I usually have a snack at &lt;time&gt;16:00&lt;/time&gt;.&lt;/p&gt;
&lt;p&gt;I've liked model trains since at least 1983.&lt;/p&gt;</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>&lt;p&gt;Our first date was &lt;time datetime="2006-09-23"&gt;a Saturday&lt;/time&gt;.&lt;/p&gt;</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>&lt;p&gt;Many people get up at &lt;time&gt;08:00&lt;/time&gt;.&lt;/p&gt;</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>&lt;article&gt;
 &lt;h1&gt;Small tasks&lt;/h1&gt;
 &lt;footer&gt;Published &lt;time pubdate&gt;2009-08-30&lt;/time&gt;.&lt;/footer&gt;
 &lt;p&gt;I put a bike bell on his bike.&lt;/p&gt;
&lt;/article&gt;</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>&lt;article&gt;
 &lt;h1&gt;Small tasks&lt;/h1&gt;
 &lt;footer&gt;Published &lt;time pubdate datetime="2009-08-30"&gt;today&lt;/time&gt;.&lt;/footer&gt;
 &lt;p&gt;I put a bike bell on his bike.&lt;/p&gt;
&lt;/article&gt;</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>&lt;article&gt;
 &lt;h1&gt;Small tasks&lt;/h1&gt;
 &lt;footer&gt;Published &lt;time pubdate datetime="2009-08-30T07:13Z"&gt;&lt;/time&gt;.&lt;/footer&gt;
 &lt;p&gt;I put a bike bell on his bike.&lt;/p&gt;
&lt;/article&gt;</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>&lt;p&gt;The &lt;code&gt;code&lt;/code&gt; element represents a fragment of computer
code.&lt;/p&gt;

&lt;p&gt;When you call the &lt;code&gt;activate()&lt;/code&gt; method on the
&lt;code&gt;robotSnowman&lt;/code&gt; object, the eyes glow.&lt;/p&gt;

&lt;p&gt;The example below uses the &lt;code&gt;begin&lt;/code&gt; keyword to indicate
the start of a statement block. It is paired with an &lt;code&gt;end&lt;/code&gt;
keyword, which is followed by the &lt;code&gt;.&lt;/code&gt; punctuation character
(full stop) to indicate the end of the program.&lt;/p&gt;</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>&lt;pre&gt;&lt;code class="language-pascal"&gt;var i: Integer;
begin
   i := 1;
end.&lt;/code&gt;&lt;/pre&gt;</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>&lt;p&gt;If there are &lt;var&gt;n&lt;/var&gt; pipes leading to the ice
cream factory then I expect at &lt;em&gt;least&lt;/em&gt; &lt;var&gt;n&lt;/var&gt;
flavors of ice cream to be available for purchase!&lt;/p&gt;</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>&lt;figure&gt;
 &lt;math&gt;
  &lt;mi&gt;a&lt;/mi&gt;
  &lt;mo&gt;=&lt;/mo&gt;
  &lt;msqrt&gt;
   &lt;msup&gt;&lt;mi&gt;b&lt;/mi&gt;&lt;mn&gt;2&lt;/mn&gt;&lt;/msup&gt;
   &lt;mi&gt;+&lt;/mi&gt;
   &lt;msup&gt;&lt;mi&gt;c&lt;/mi&gt;&lt;mn&gt;2&lt;/mn&gt;&lt;/msup&gt;
  &lt;/msqrt&gt;
 &lt;/math&gt;
 &lt;figcaption&gt;
  Using Pythagoras' theorem to solve for the hypotenuse &lt;var&gt;a&lt;/var&gt; of
  a triangle with sides &lt;var&gt;b&lt;/var&gt; and &lt;var&gt;c&lt;/var&gt;
 &lt;/figcaption&gt;
&lt;/figure&gt;</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>&lt;p&gt;The computer said &lt;samp&gt;Too much cheese in tray
two&lt;/samp&gt; but I didn't know what that meant.&lt;/p&gt;</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>&lt;pre&gt;&lt;samp&gt;&lt;span class="prompt"&gt;jdoe@mowmow:~$&lt;/span&gt; &lt;kbd&gt;ssh demo.example.com&lt;/kbd&gt;
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

&lt;span class="prompt"&gt;jdoe@demo:~$&lt;/span&gt; &lt;span class="cursor"&gt;_&lt;/span&gt;&lt;/samp&gt;&lt;/pre&gt;</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>&lt;p&gt;To make George eat an apple, press &lt;kbd&gt;&lt;kbd&gt;Shift&lt;/kbd&gt;+&lt;kbd&gt;F3&lt;/kbd&gt;&lt;/kbd&gt;&lt;/p&gt;</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>&lt;p&gt;To make George eat an apple, select
    &lt;kbd&gt;&lt;kbd&gt;&lt;samp&gt;File&lt;/samp&gt;&lt;/kbd&gt;|&lt;kbd&gt;&lt;samp&gt;Eat Apple...&lt;/samp&gt;&lt;/kbd&gt;&lt;/kbd&gt;
&lt;/p&gt;</pre>

   <p>Such precision isn't necessary; the following is equally fine:</p>

   <pre>&lt;p&gt;To make George eat an apple, select &lt;kbd&gt;File | Eat Apple...&lt;/kbd&gt;&lt;/p&gt;</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>&lt;p&gt;The most beautiful women are
&lt;span lang="fr"&gt;&lt;abbr&gt;M&lt;sup&gt;lle&lt;/sup&gt;&lt;/abbr&gt; Gwendoline&lt;/span&gt; and
&lt;span lang="fr"&gt;&lt;abbr&gt;M&lt;sup&gt;me&lt;/sup&gt;&lt;/abbr&gt; Denise&lt;/span&gt;.&lt;/p&gt;</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>&lt;p&gt;The coordinate of the &lt;var&gt;i&lt;/var&gt;th point is
(&lt;var&gt;x&lt;sub&gt;&lt;var&gt;i&lt;/var&gt;&lt;/sub&gt;&lt;/var&gt;, &lt;var&gt;y&lt;sub&gt;&lt;var&gt;i&lt;/var&gt;&lt;/sub&gt;&lt;/var&gt;).
For example, the 10th point has coordinate
(&lt;var&gt;x&lt;sub&gt;10&lt;/sub&gt;&lt;/var&gt;, &lt;var&gt;y&lt;sub&gt;10&lt;/sub&gt;&lt;/var&gt;).&lt;/p&gt;</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>&lt;var&gt;E&lt;/var&gt;=&lt;var&gt;m&lt;/var&gt;&lt;var&gt;c&lt;/var&gt;&lt;sup&gt;2&lt;/sup&gt;</pre>
   <pre>f(&lt;var&gt;x&lt;/var&gt;, &lt;var&gt;n&lt;/var&gt;) = log&lt;sub&gt;4&lt;/sub&gt;&lt;var&gt;x&lt;/var&gt;&lt;sup&gt;&lt;var&gt;n&lt;/var&gt;&lt;/sup&gt;</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>&lt;p&gt;The &lt;i class="taxonomy"&gt;Felis silvestris catus&lt;/i&gt; is cute.&lt;/p&gt;
&lt;p&gt;The term &lt;i&gt;prose content&lt;/i&gt; is defined above.&lt;/p&gt;
&lt;p&gt;There is a certain &lt;i lang="fr"&gt;je ne sais quoi&lt;/i&gt; in the air.&lt;/p&gt;</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>&lt;p&gt;Raymond tried to sleep.&lt;/p&gt;
&lt;p&gt;&lt;i&gt;The ship sailed away on Thursday&lt;/i&gt;, he
dreamt. &lt;i&gt;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.&lt;/i&gt;&lt;/p&gt;
&lt;p&gt;&lt;i&gt;Finally one night he picked up the courage to speak with
her&#8212;&lt;/i&gt;&lt;/p&gt;
&lt;p&gt;Raymond woke with a start as the fire alarm rang out.&lt;/p&gt;</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>&lt;p&gt;The &lt;b&gt;frobonitor&lt;/b&gt; and &lt;b&gt;barbinator&lt;/b&gt; components are fried.&lt;/p&gt;</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>&lt;p&gt;You enter a small room. Your &lt;b&gt;sword&lt;/b&gt; glows
brighter. A &lt;b&gt;rat&lt;/b&gt; scurries past the corner wall.&lt;/p&gt;</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>&lt;article&gt;
 &lt;h2&gt;Kittens 'adopted' by pet rabbit&lt;/h2&gt;
 &lt;p&gt;&lt;b class="lede"&gt;Six abandoned kittens have found an
 unexpected new mother figure &#8212; a pet rabbit.&lt;/b&gt;&lt;/p&gt;
 &lt;p&gt;Veterinary nurse Melanie Humble took the three-week-old
 kittens to her Aberdeen home.&lt;/p&gt;
<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">&lt;p&gt;&lt;b&gt;WARNING!&lt;/b&gt; Do not frob the barbinator!&lt;/p&gt;</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>&lt;p lang="en-US"&gt;Consider the following quote:&lt;/p&gt;
&lt;blockquote lang="en-GB"&gt;
 &lt;p&gt;Look around and you will find, no-one's really
 &lt;mark&gt;colour&lt;/mark&gt; blind.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p lang="en-US"&gt;As we can tell from the &lt;em&gt;spelling&lt;/em&gt; of the word,
the person writing this quote is clearly not American.&lt;/p&gt;</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>&lt;p&gt;I also have some &lt;mark&gt;kitten&lt;/mark&gt;s who are visiting me
these days. They're really cute. I think they like my garden! Maybe I
should adopt a &lt;mark&gt;kitten&lt;/mark&gt;.&lt;/p&gt;</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>&lt;p&gt;The highlighted part below is where the error lies:&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;var i: Integer;
begin
   i := &lt;mark&gt;1.1&lt;/mark&gt;;
end.&lt;/code&gt;&lt;/pre&gt;</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>&lt;p&gt;The highlighted part below is where the error lies:&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;&lt;span class=keyword&gt;var&lt;/span&gt; &lt;span class=ident&gt;i&lt;/span&gt;: &lt;span class=type&gt;Integer&lt;/span&gt;;
&lt;span class=keyword&gt;begin&lt;/span&gt;
   &lt;span class=ident&gt;i&lt;/span&gt; := &lt;span class=literal&gt;&lt;mark&gt;1.1&lt;/mark&gt;&lt;/span&gt;;
&lt;span class=keyword&gt;end&lt;/span&gt;.&lt;/code&gt;&lt;/pre&gt;</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>&lt;article&gt;
 &lt;style scoped&gt;
  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;
  }
 &lt;/style&gt;
 &lt;h1&gt;She knew&lt;/h1&gt;
 &lt;p&gt;Did you notice the subtle joke in the joke on panel 4?&lt;/p&gt;
 &lt;blockquote&gt;
  &lt;p class="bubble"&gt;I didn't &lt;em&gt;want&lt;/em&gt; to believe. &lt;mark&gt;Of course
  on some level I realized it was a known-plaintext attack.&lt;/mark&gt; But I
  couldn't admit it until I saw for myself.&lt;/p&gt;
 &lt;/blockquote&gt;
 &lt;p&gt;(Emphasis mine.) I thought that was great. It's so pedantic, yet it
 explains everything neatly.&lt;/p&gt;
&lt;/article&gt;</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>&lt;h3&gt;Wormhole Physics Introduction&lt;/h3&gt;

&lt;p&gt;&lt;mark&gt;A wormhole in normal conditions can be held open for a
maximum of just under 39 minutes.&lt;/mark&gt; 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).&lt;/p&gt;

&lt;p&gt;&lt;mark&gt;Momentum is preserved across the wormhole. Electromagnetic
radiation can travel in both directions through a wormhole,
but matter cannot.&lt;/mark&gt;&lt;/p&gt;

&lt;p&gt;When a wormhole is created, a vortex normally forms.
&lt;strong&gt;Warning: The vortex caused by the wormhole opening will
annihilate anything in its path.&lt;/strong&gt; Vortexes can be avoided when
using sufficiently advanced dialing technology.&lt;/p&gt;

&lt;p&gt;&lt;mark&gt;An obstruction in a gate will prevent it from accepting a
wormhole connection.&lt;/mark&gt;&lt;/p&gt;</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="">&#28450;&#23383;</span> is annotated with its
   reading in hiragana.</p>

   <pre lang="ja">...
&lt;ruby&gt;&#28450;&lt;rt&gt;&#12363;&#12435;&lt;/rt&gt;&#23383;&lt;rt&gt;&#12376;&#12288;&lt;/rt&gt;&lt;/ruby&gt;
...</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="">&#28450;&#23383;</span> is annotated
   with its bopomofo reading.</p>

   <pre lang="zh-TW">&lt;ruby&gt;&#28450;&lt;rt&gt;&#12559;&#12578;&#715;&lt;/rt&gt;&#23383;&lt;rt&gt;&#12567;&#715;&#12288;&lt;/rt&gt;&lt;/ruby&gt;</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="">&#27721;&#23383;</span> is annotated
   with its pinyin reading.</p>

   <pre lang="zh-CN">...&lt;ruby&gt;&#27721;&lt;rt&gt;h&#224;n&lt;/rt&gt;&#23383;&lt;rt&gt;z&#236;&#160;&lt;/rt&gt;&lt;/ruby&gt;...</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="">&#28450;&#23383;</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">...
&lt;ruby&gt;
 &#28450; &lt;rp&gt;(&lt;/rp&gt;&lt;rt&gt;&#12363;&#12435;&lt;/rt&gt;&lt;rp&gt;)&lt;/rp&gt;
 &#23383; &lt;rp&gt;(&lt;/rp&gt;&lt;rt&gt;&#12376;&lt;/rt&gt;&lt;rp&gt;)&lt;/rp&gt;
&lt;/ruby&gt;
...</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">... &#28450; (&#12363;&#12435;) &#23383; (&#12376;) ...</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>&lt;ul&gt;
 &lt;li&gt;User &lt;bdi&gt;jcranmer&lt;/bdi&gt;: 12 posts.
 &lt;li&gt;User &lt;bdi&gt;hober&lt;/bdi&gt;: 5 posts.
 &lt;li&gt;User &lt;bdi&gt;<bdo dir="rtl">&#1573;&#1610;&#1575;&#1606;</bdo>&lt;/bdi&gt;: 3 posts.
&lt;/ul&gt;</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>&lt;pre&gt;&lt;code class="lang-c"&gt;&lt;span class="keyword"&gt;for&lt;/span&gt; (&lt;span class="ident"&gt;j&lt;/span&gt; = 0; &lt;span class="ident"&gt;j&lt;/span&gt; &amp;lt; 256; &lt;span class="ident"&gt;j&lt;/span&gt;++) {
  &lt;span class="ident"&gt;i_t3&lt;/span&gt; = (&lt;span class="ident"&gt;i_t3&lt;/span&gt; &amp; 0x1ffff) | (&lt;span class="ident"&gt;j&lt;/span&gt; &amp;lt;&amp;lt; 17);
  &lt;span class="ident"&gt;i_t6&lt;/span&gt; = (((((((&lt;span class="ident"&gt;i_t3&lt;/span&gt; &gt;&gt; 3) ^ &lt;span class="ident"&gt;i_t3&lt;/span&gt;) &gt;&gt; 1) ^ &lt;span class="ident"&gt;i_t3&lt;/span&gt;) &gt;&gt; 8) ^ &lt;span class="ident"&gt;i_t3&lt;/span&gt;) &gt;&gt; 5) &amp; 0xff;
  &lt;span class="keyword"&gt;if&lt;/span&gt; (&lt;span class="ident"&gt;i_t6&lt;/span&gt; == &lt;span class="ident"&gt;i_t1&lt;/span&gt;)
    &lt;span class="keyword"&gt;break&lt;/span&gt;;
}&lt;/code&gt;&lt;/pre&gt;</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>&lt;p&gt;P. Sherman&lt;br&gt;
42 Wallaby Way&lt;br&gt;
Sydney&lt;/p&gt;</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>&lt;p&gt;&lt;a ...&gt;34 comments.&lt;/a&gt;&lt;br&gt;
&lt;a ...&gt;Add a comment.&lt;/a&gt;&lt;/p&gt;</pre>

   <pre>&lt;p&gt;&lt;label&gt;Name: &lt;input name="name"&gt;&lt;/label&gt;&lt;br&gt;
&lt;label&gt;Address: &lt;input name="address"&gt;&lt;/label&gt;&lt;/p&gt;</pre>

   <p>Here are alternatives to the above, which are correct:</p>

   <pre>&lt;p&gt;&lt;a ...&gt;34 comments.&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;a ...&gt;Add a comment.&lt;/a&gt;&lt;/p&gt;</pre>

   <pre>&lt;p&gt;&lt;label&gt;Name: &lt;input name="name"&gt;&lt;/label&gt;&lt;/p&gt;
&lt;p&gt;&lt;label&gt;Address: &lt;input name="address"&gt;&lt;/label&gt;&lt;/p&gt;</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>&lt;p&gt;So then he pointed at the tiger and screamed
"there&lt;wbr&gt;is&lt;wbr&gt;no&lt;wbr&gt;way&lt;wbr&gt;you&lt;wbr&gt;are&lt;wbr&gt;ever&lt;wbr&gt;going&lt;wbr&gt;to&lt;wbr&gt;catch&lt;wbr&gt;me"!&lt;/p&gt;</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>&lt;a href="drinks.html"&gt;drinks&lt;/a&gt;</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>&lt;em&gt;adore&lt;/em&gt;</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>&lt;strong&gt;very hot&lt;/strong&gt;</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>&lt;small&gt;Alcohol is addictive.&lt;/small&gt;</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>&lt;s&gt;&#163;4.50&lt;/s&gt;</strong> &#163;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>&lt;cite&gt;Hugo v. Danielle&lt;/cite&gt;</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>&lt;q&gt;You can drink water from the fish tank&lt;/q&gt;</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>&lt;dfn&gt;organic food&lt;/dfn&gt;</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>&lt;abbr title="Irish Organic Farmers and Growers Association"&gt;IOFGA&lt;/abbr&gt;</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>&lt;time&gt;2009-10-21&lt;/time&gt;</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>&lt;code&gt;fruitdb&lt;/code&gt;</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>&lt;var&gt;n&lt;/var&gt;</strong> fruit in the bowl, at least <strong>&lt;var&gt;n&lt;/var&gt;</strong>&#247;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>&lt;samp&gt;Unknown error -3&lt;/samp&gt;</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>&lt;kbd&gt;F1&lt;/kbd&gt;</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>&lt;sub&gt;2&lt;/sub&gt;</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>&lt;sup&gt;2&lt;/sup&gt;</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>&lt;i&gt;Citrus limon&lt;/i&gt;</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>&lt;b&gt;lemon&lt;/b&gt;</strong> and squeeze it with a <strong>&lt;b&gt;juicer&lt;/b&gt;</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 &lt;u class="spelling"&gt;eldeflower&lt;/u&gt; 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>&lt;mark&gt;part&lt;/mark&gt;</strong> cordial to ten <strong>&lt;mark&gt;part&lt;/mark&gt;</strong>s water, stands a<strong>&lt;mark&gt;part&lt;/mark&gt;</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>&lt;ruby&gt; OJ &lt;rp&gt;(&lt;rt&gt;Orange Juice&lt;rp&gt;)&lt;/ruby&gt;</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>&lt;bdi lang=""&gt;My Juice Caf&#233; (At The Beach)&lt;/bdi&gt;</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>&lt;bdo dir=rtl&gt;Juice&lt;/bdo&gt;</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>&lt;span lang="fr"&gt;sirop de sureau&lt;/span&gt;</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>&lt;br&gt;</strong>Apopka, FL 32703<strong>&lt;br&gt;</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>&lt;wbr&gt;</strong>orange<strong>&lt;wbr&gt;</strong>juice.com</pre>

  </td></tr></tbody></table></body></html>