semantics.html 128 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 The elements of HTML &#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="apis-in-html-documents.html" title="3.3 APIs in HTML documents" rel="prev">
  <link href="spec.html#contents" title="Table of contents" rel="index">
  <link href="scripting-1.html" title="4.3 Scripting" 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="apis-in-html-documents.html" class="prev">3.3 APIs in HTML documents</a> &#8211;
   <a href="spec.html#contents">Table of contents</a> &#8211;
   <a href="scripting-1.html" class="next">4.3 Scripting</a>
  <ol class="toc"><li><a href="semantics.html#semantics"><span class="secno">4 </span>The elements of HTML</a>
  <ol><li><a href="semantics.html#the-root-element"><span class="secno">4.1 </span>The root element</a>
    <ol><li><a href="semantics.html#the-html-element"><span class="secno">4.1.1 </span>The <code>html</code> element</a></li></ol></li><li><a href="semantics.html#document-metadata"><span class="secno">4.2 </span>Document metadata</a>
    <ol><li><a href="semantics.html#the-head-element"><span class="secno">4.2.1 </span>The <code>head</code> element</a></li><li><a href="semantics.html#the-title-element"><span class="secno">4.2.2 </span>The <code>title</code> element</a></li><li><a href="semantics.html#the-base-element"><span class="secno">4.2.3 </span>The <code>base</code> element</a></li><li><a href="semantics.html#the-link-element"><span class="secno">4.2.4 </span>The <code>link</code> element</a></li><li><a href="semantics.html#the-meta-element"><span class="secno">4.2.5 </span>The <code>meta</code> element</a>
      <ol><li><a href="semantics.html#standard-metadata-names"><span class="secno">4.2.5.1 </span>Standard metadata names</a></li><li><a href="semantics.html#other-metadata-names"><span class="secno">4.2.5.2 </span>Other metadata names</a></li><li><a href="semantics.html#pragma-directives"><span class="secno">4.2.5.3 </span>Pragma directives</a></li><li><a href="semantics.html#other-pragma-directives"><span class="secno">4.2.5.4 </span>Other pragma directives</a></li><li><a href="semantics.html#charset"><span class="secno">4.2.5.5 </span>Specifying the document's character encoding</a></li></ol></li><li><a href="semantics.html#the-style-element"><span class="secno">4.2.6 </span>The <code>style</code> element</a></li><li><a href="semantics.html#styling"><span class="secno">4.2.7 </span>Styling</a></li></ol></li></ol></li></ol></div>

  <h2 id="semantics"><span class="secno">4 </span>The elements of HTML</h2><h3 id="the-root-element"><span class="secno">4.1 </span>The root element</h3><h4 id="the-html-element"><span class="secno">4.1.1 </span>The <dfn><code>html</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 the root element of a document.</dd>
   <dd>Wherever a subdocument fragment is allowed in a compound document.</dd>
   <dt>Content model:</dt>
   <dd>A <code><a href="#the-head-element">head</a></code> element followed by a <code><a href="sections.html#the-body-element">body</a></code> element.</dd>
   <dt>Content attributes:</dt>
   <dd><a href="elements.html#global-attributes">Global attributes</a></dd>
   <dd><code title="attr-html-manifest"><a href="#attr-html-manifest">manifest</a></code></dd>
   <dt>DOM interface:</dt>
   <dd>
    <pre class="idl">interface <dfn id="htmlhtmlelement">HTMLHtmlElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> {};</pre>
   </dd>
  </dl><p>The <code><a href="#the-html-element">html</a></code> element <a href="rendering.html#represents">represents</a> the root of
  an HTML document.</p><p>The <dfn id="attr-html-manifest" title="attr-html-manifest"><code>manifest</code></dfn>
  attribute gives the address of the document's <a href="offline.html#application-cache">application
  cache</a> <a href="offline.html#concept-appcache-manifest" title="concept-appcache-manifest">manifest</a>, if there is
  one. If the attribute is present, the attribute's value must be a
  <a href="urls.html#valid-non-empty-url-potentially-surrounded-by-spaces">valid non-empty URL potentially surrounded by
  spaces</a>.</p><p>The <code title="attr-html-manifest"><a href="#attr-html-manifest">manifest</a></code> attribute
  only <a href="offline.html#concept-appcache-init" title="concept-appcache-init">has an effect</a> during
  the early stages of document load. Changing the attribute
  dynamically thus has no effect (and thus, no DOM API is provided for
  this attribute).</p><p class="note">For the purposes of <a href="offline.html#concept-appcache-init" title="concept-appcache-init">application cache selection</a>,
  later <code><a href="#the-base-element">base</a></code> elements cannot affect the <a href="urls.html#resolve-a-url" title="resolve a url">resolving of relative URLs</a> in <code title="attr-html-manifest"><a href="#attr-html-manifest">manifest</a></code> attributes, as the
  attributes are processed before those elements are seen.</p><p class="note">The <code title="dom-applicationCache"><a href="offline.html#dom-applicationcache">window.applicationCache</a></code> IDL
  attribute provides scripted access to the offline <a href="offline.html#application-cache">application
  cache</a> mechanism.</p><div class="example">

   <p>The <code><a href="#the-html-element">html</a></code> element in the following example declares
   that the document's language is English.</p>

   <pre>&lt;!DOCTYPE html&gt;
<strong>&lt;html lang="en"&gt;</strong>
&lt;head&gt;
&lt;title&gt;Swapping Songs&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;h1&gt;Swapping Songs&lt;/h1&gt;
&lt;p&gt;Tonight I swapped some of the songs I wrote with some friends, who
gave me some of the songs they wrote. I love sharing my music.&lt;/p&gt;
&lt;/body&gt;
<strong>&lt;/html&gt;</strong></pre>

  </div><h3 id="document-metadata"><span class="secno">4.2 </span>Document metadata</h3><h4 id="the-head-element"><span class="secno">4.2.1 </span>The <dfn><code>head</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 the first element in an <code><a href="#the-html-element">html</a></code> element.</dd>
   <dt>Content model:</dt>
   <dd>If the document is <a href="the-iframe-element.html#an-iframe-srcdoc-document">an <code>iframe</code> <code title="attr-iframe-srcdoc">srcdoc</code> document</a> or if title information is available from a higher-level protocol: Zero or more elements of <a href="content-models.html#metadata-content">metadata content</a>.</dd>
   <dd>Otherwise: One or more elements of <a href="content-models.html#metadata-content">metadata content</a>, of which exactly one is a <code><a href="#the-title-element">title</a></code> element.</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="htmlheadelement">HTMLHeadElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> {};</pre>
   </dd>
  </dl><p>The <code><a href="#the-head-element">head</a></code> element <a href="rendering.html#represents">represents</a> a
  collection of metadata for the <code><a href="infrastructure.html#document">Document</a></code>.</p><div class="example">

   <p>The collection of metadata in a <code><a href="#the-head-element">head</a></code> element can be
   large or small. Here is an example of a very short one:</p>

   <pre>&lt;!doctype html&gt;
&lt;html&gt;
 &lt;head&gt;
  &lt;title&gt;A document with a short head&lt;/title&gt;
 &lt;/head&gt;
 &lt;body&gt;
 ...</pre>

   <p>Here is an example of a longer one:</p>

   <pre>&lt;!DOCTYPE HTML&gt;
&lt;HTML&gt;
 &lt;HEAD&gt;
  &lt;META CHARSET="UTF-8"&gt;
  &lt;BASE HREF="http://www.example.com/"&gt;
  &lt;TITLE&gt;An application with a long head&lt;/TITLE&gt;
  &lt;LINK REL="STYLESHEET" HREF="default.css"&gt;
  &lt;LINK REL="STYLESHEET ALTERNATE" HREF="big.css" TITLE="Big Text"&gt;
  &lt;SCRIPT SRC="support.js"&gt;&lt;/SCRIPT&gt;
  &lt;META NAME="APPLICATION-NAME" CONTENT="Long headed application"&gt;
 &lt;/HEAD&gt;
 &lt;BODY&gt;
 ...</pre>

  </div><p class="note">The <code><a href="#the-title-element">title</a></code> element is a required child
  in most situations, but when a higher-level protocol provides title
  information, e.g. in the Subject line of an e-mail when HTML is used
  as an e-mail authoring format, the <code><a href="#the-title-element">title</a></code> element can be
  omitted.</p><h4 id="the-title-element"><span class="secno">4.2.2 </span>The <dfn><code>title</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
   <dd><a href="content-models.html#metadata-content">Metadata content</a>.</dd>
   <dt>Contexts in which this element can be used:</dt>
   <dd>In a <code><a href="#the-head-element">head</a></code> element containing no other <code><a href="#the-title-element">title</a></code> elements.</dd>
   <dt>Content model:</dt>
   <dd><a href="content-models.html#text-content" title="text content">Text</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="htmltitleelement">HTMLTitleElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> {
           attribute DOMString <a href="#dom-title-text" title="dom-title-text">text</a>;
};</pre>
   </dd>
  </dl><p>The <code><a href="#the-title-element">title</a></code> element <a href="rendering.html#represents">represents</a> the
  document's title or name. Authors should use titles that identify
  their documents even when they are used out of context, for example
  in a user's history or bookmarks, or in search results. The
  document's title is often different from its first heading, since the
  first heading does not have to stand alone when taken out of
  context.</p><p>There must be no more than one <code><a href="#the-title-element">title</a></code> element per
  document.</p><dl class="domintro"><dt><var title="">title</var> . <code title="dom-title-text"><a href="#dom-title-text">text</a></code> [ = <var title="">value</var> ]</dt>

   <dd>

    <p>Returns the contents of the element, ignoring child nodes that
    aren't <a href="infrastructure.html#text-node" title="text node">text nodes</a>.</p>

    <p>Can be set, to replace the element's children with the given
    value.</p>

   </dd>

  </dl><div class="impl">

  <p>The IDL attribute <dfn id="dom-title-text" title="dom-title-text"><code>text</code></dfn> must return a
  concatenation of the contents of all the <a href="infrastructure.html#text-node" title="text
  node">text nodes</a> that are direct children of the
  <code><a href="#the-title-element">title</a></code> element (ignoring any other nodes such as
  comments or elements), in tree order. On setting, it must act the
  same way as the <code><a href="infrastructure.html#textcontent">textContent</a></code> IDL attribute.</p>

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

   <p>Here are some examples of appropriate titles, contrasted with
   the top-level headings that might be used on those same pages.</p>

   <pre>  &lt;title&gt;Introduction to The Mating Rituals of Bees&lt;/title&gt;
    ...
  &lt;h1&gt;Introduction&lt;/h1&gt;
  &lt;p&gt;This companion guide to the highly successful
  &lt;cite&gt;Introduction to Medieval Bee-Keeping&lt;/cite&gt; book is...</pre>

   <p>The next page might be a part of the same site. Note how the
   title describes the subject matter unambiguously, while the first
   heading assumes the reader knows what the context is and therefore
   won't wonder if the dances are Salsa or Waltz:</p>

   <pre>  &lt;title&gt;Dances used during bee mating rituals&lt;/title&gt;
    ...
  &lt;h1&gt;The Dances&lt;/h1&gt;</pre>

  </div><p>The string to use as the document's title is given by the <code title="dom-document-title"><a href="dom.html#document.title">document.title</a></code> IDL attribute.</p><div class="impl">

  <p>User agents should use the document's title when referring to the
  document in their user interface. When the contents of a
  <code><a href="#the-title-element">title</a></code> element are used in this way, <a href="elements.html#the-directionality">the
  directionality</a> of that <code><a href="#the-title-element">title</a></code> element should be
  used to set the directionality of the document's title in the user
  interface.</p>

  </div><h4 id="the-base-element"><span class="secno">4.2.3 </span>The <dfn><code>base</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
   <dd><a href="content-models.html#metadata-content">Metadata content</a>.</dd>
   <dt>Contexts in which this element can be used:</dt>
   <dd>In a <code><a href="#the-head-element">head</a></code> element containing no other <code><a href="#the-base-element">base</a></code> elements.</dd>
   <dt>Content model:</dt>
   <dd>Empty.</dd>
   <dt>Content attributes:</dt>
   <dd><a href="elements.html#global-attributes">Global attributes</a></dd>
   <dd><code title="attr-base-href"><a href="#attr-base-href">href</a></code></dd>
   <dd><code title="attr-base-target"><a href="#attr-base-target">target</a></code></dd>
   <dt>DOM interface:</dt>
   <dd>
<pre class="idl">interface <dfn id="htmlbaseelement">HTMLBaseElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> {
           attribute DOMString <a href="#dom-base-href" title="dom-base-href">href</a>;
           attribute DOMString <a href="#dom-base-target" title="dom-base-target">target</a>;
};</pre>
   </dd>
  </dl><p>The <code><a href="#the-base-element">base</a></code> element allows authors to specify the
  <a href="urls.html#document-base-url">document base URL</a> for the purposes of <a href="urls.html#resolve-a-url" title="resolve a url">resolving relative URLs</a>, and the name
  of the default <a href="browsers.html#browsing-context">browsing context</a> for the purposes of
  <a href="links.html#following-hyperlinks">following hyperlinks</a>. The element does not <a href="rendering.html#represents" title="represents">represent</a> any content beyond this
  information.</p><p>There must be no more than one <code><a href="#the-base-element">base</a></code> element per
  document.</p><p>A <code><a href="#the-base-element">base</a></code> element must have either an <code title="attr-base-href"><a href="#attr-base-href">href</a></code> attribute, a <code title="attr-base-target"><a href="#attr-base-target">target</a></code> attribute, or both.</p><p>The <dfn id="attr-base-href" title="attr-base-href"><code>href</code></dfn> content
  attribute, if specified, must contain a <a href="urls.html#valid-url-potentially-surrounded-by-spaces">valid URL potentially
  surrounded by spaces</a>.</p><p>A <code><a href="#the-base-element">base</a></code> element, if it has an <code title="attr-base-href"><a href="#attr-base-href">href</a></code> attribute, must come before any
  other elements in the tree that have attributes defined as taking
  <a href="urls.html#url" title="URL">URLs</a>, except the <code><a href="#the-html-element">html</a></code> element
  (its <code title="attr-html-manifest"><a href="#attr-html-manifest">manifest</a></code> attribute
  isn't affected by <code><a href="#the-base-element">base</a></code> elements).</p><div class="impl">

  <p class="note">If there are multiple <code><a href="#the-base-element">base</a></code> elements
  with <code title="attr-base-href"><a href="#attr-base-href">href</a></code> attributes, all but the
  first are ignored.</p>

  </div><p>The <dfn id="attr-base-target" title="attr-base-target"><code>target</code></dfn>
  attribute, if specified, must contain a <a href="browsers.html#valid-browsing-context-name-or-keyword">valid browsing context
  name or keyword</a>, which specifies which <a href="browsers.html#browsing-context">browsing
  context</a> is to be used as the default when <a href="links.html#hyperlink" title="hyperlink">hyperlinks</a> and <a href="forms.html#the-form-element" title="form">forms</a> in the <code><a href="infrastructure.html#document">Document</a></code> cause <a href="history.html#navigate" title="navigate">navigation</a>.</p><p>A <code><a href="#the-base-element">base</a></code> element, if it has a <code title="attr-base-target"><a href="#attr-base-target">target</a></code> attribute, must come before
  any elements in the tree that represent <a href="links.html#hyperlink" title="hyperlink">hyperlinks</a>.</p><div class="impl">

  <p class="note">If there are multiple <code><a href="#the-base-element">base</a></code> elements
  with <code title="attr-base-target"><a href="#attr-base-target">target</a></code> attributes, all but
  the first are ignored.</p>

  <p>The <dfn id="dom-base-href" title="dom-base-href"><code>href</code></dfn> IDL
  attribute, on getting, must return the page's <a href="urls.html#document-base-url">document base
  URL</a>, and on setting, it must set the <code title="attr-base-href"><a href="#attr-base-href">href</a></code> content attribute to the given
  new value.</p>

  <p>The <dfn id="dom-base-target" title="dom-base-target"><code>target</code></dfn> IDL
  attribute must <a href="common-dom-interfaces.html#reflect">reflect</a> the content attribute of the
  same name.</p>

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

   <p>In this example, a <code><a href="#the-base-element">base</a></code> element is used to set the
   <a href="urls.html#document-base-url">document base URL</a>:</p>

   <pre>&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;This is an example for the &amp;lt;base&amp;gt; element&lt;/title&gt;
        &lt;base href="http://www.example.com/news/index.html"&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;p&gt;Visit the &lt;a href="archives.html"&gt;archives&lt;/a&gt;.&lt;/p&gt;
    &lt;/body&gt;
&lt;/html&gt;</pre>

   <p>The link in the above example would be a link to "<code title="">http://www.example.com/news/archives.html</code>".</p>

  </div><h4 id="the-link-element"><span class="secno">4.2.4 </span>The <dfn><code>link</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
   <dd><a href="content-models.html#metadata-content">Metadata content</a>.</dd>
   <dt>Contexts in which this element can be used:</dt>
   <dd>Where <a href="content-models.html#metadata-content">metadata content</a> is expected.</dd>
   <dd>In a <code><a href="scripting-1.html#the-noscript-element">noscript</a></code> element that is a child of a <code><a href="#the-head-element">head</a></code> element.</dd>
   <dt>Content model:</dt>
   <dd>Empty.</dd>
   <dt>Content attributes:</dt>
   <dd><a href="elements.html#global-attributes">Global attributes</a></dd>
   <dd><code title="attr-link-href"><a href="#attr-link-href">href</a></code></dd>
   <dd><code title="attr-link-rel"><a href="#attr-link-rel">rel</a></code></dd>
   <dd><code title="attr-link-media"><a href="#attr-link-media">media</a></code></dd>
   <dd><code title="attr-link-hreflang"><a href="#attr-link-hreflang">hreflang</a></code></dd>
   <dd><code title="attr-link-type"><a href="#attr-link-type">type</a></code></dd>
   <dd><code title="attr-link-sizes"><a href="links.html#attr-link-sizes">sizes</a></code></dd>
   <dd>Also, the <code title="attr-link-title"><a href="#attr-link-title">title</a></code> attribute has special semantics on this element.</dd>
   <dt>DOM interface:</dt>
   <dd>
<pre class="idl">interface <dfn id="htmllinkelement">HTMLLinkElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> {
           attribute boolean <a href="#dom-link-disabled" title="dom-link-disabled">disabled</a>;
           attribute DOMString <a href="#dom-link-href" title="dom-link-href">href</a>;
           attribute DOMString <a href="#dom-link-rel" title="dom-link-rel">rel</a>;
  readonly attribute <a href="common-dom-interfaces.html#domtokenlist">DOMTokenList</a> <a href="#dom-link-rellist" title="dom-link-relList">relList</a>;
           attribute DOMString <a href="#dom-link-media" title="dom-link-media">media</a>;
           attribute DOMString <a href="#dom-link-hreflang" title="dom-link-hreflang">hreflang</a>;
           attribute DOMString <a href="#dom-link-type" title="dom-link-type">type</a>;
  [PutForwards=<a href="common-dom-interfaces.html#dom-domsettabletokenlist-value" title="dom-DOMSettableTokenList-value">value</a>] readonly attribute <a href="common-dom-interfaces.html#domsettabletokenlist">DOMSettableTokenList</a> <a href="#dom-link-sizes" title="dom-link-sizes">sizes</a>;
};
<a href="#htmllinkelement">HTMLLinkElement</a> implements <span>LinkStyle</span>;</pre>
   </dd>
  </dl><p>The <code><a href="#the-link-element">link</a></code> element allows authors to link their
  document to other resources.</p><p>The destination of the link(s) is given by the <dfn id="attr-link-href" title="attr-link-href"><code>href</code></dfn> attribute, which must
  be present and must contain a <a href="urls.html#valid-non-empty-url-potentially-surrounded-by-spaces">valid non-empty URL potentially
  surrounded by spaces</a>. <span class="impl">If the <code title="attr-link-href"><a href="#attr-link-href">href</a></code> attribute is absent, then the
  element does not define a link.</span></p><p>A <code><a href="#the-link-element">link</a></code> element must have <code title="attr-link-rel"><a href="#attr-link-rel">rel</a></code> attribute.</p><p>The types of link indicated (the relationships) are given by the
  value of the <dfn id="attr-link-rel" title="attr-link-rel"><code>rel</code></dfn>
  attribute, which, if present, must have a value that is a <a href="common-microsyntaxes.html#set-of-space-separated-tokens">set
  of space-separated tokens</a>. The <a href="links.html#linkTypes">allowed
  keywords and their meanings</a> are defined in a later
  section. <span class="impl">If the <code title="attr-link-rel"><a href="#attr-link-rel">rel</a></code> attribute is absent, has no
  keywords, or if none of the keywords used are allowed according to
  the definitions in this specification, then the element does not
  create any links.</span></p><p>Two categories of links can be created using the
  <code><a href="#the-link-element">link</a></code> element: <a href="links.html#external-resource-link" title="external resource
  link">Links to external resources</a> and <a href="links.html#hyperlink" title="hyperlink">hyperlinks</a>. The <a href="links.html#linkTypes">link
  types section</a> defines whether a particular link type is an
  external resource or a hyperlink. One <code><a href="#the-link-element">link</a></code> element can
  create multiple links (of which some might be external resource
  links and some might be hyperlinks); exactly which and how many
  links are created depends on the keywords given in the <code title="attr-link-rel"><a href="#attr-link-rel">rel</a></code> attribute. User agents must process
  the links on a per-link basis, not a per-element basis.</p><p class="note">Each link created for a <code><a href="#the-link-element">link</a></code> element is
  handled separately. For instance, if there are two <code><a href="#the-link-element">link</a></code>
  elements with <code title="">rel="stylesheet"</code>, they each
  count as a separate external resource, and each is affected by its
  own attributes independently. Similarly, if a single
  <code><a href="#the-link-element">link</a></code> element has a <code title="attr-link-rel"><a href="#attr-link-rel">rel</a></code> attribute with the value <code title="">next stylesheet</code>, it creates both a
  <a href="links.html#hyperlink">hyperlink</a> (for the <code title="rel-next"><a href="links.html#link-type-next">next</a></code>
  keyword) and an <a href="links.html#external-resource-link">external resource link</a> (for the <code title="rel-stylesheet"><a href="links.html#link-type-stylesheet">stylesheet</a></code> keyword), and they are
  affected by other attributes (such as <code title="attr-link-media"><a href="#attr-link-media">media</a></code> or <code title="attr-link-title"><a href="#attr-link-title">title</a></code>) differently.</p><p>The exact behavior for links to external resources depends on the
  exact relationship, as defined for the relevant link type. Some of
  the attributes control whether or not the external resource is to be
  applied (as defined below).</p><div class="impl">

  <p>For external resources that are represented in the
  DOM (for example, style sheets), the DOM representation must be made
  available even if the resource is not applied. To <dfn id="concept-link-obtain" title="concept-link-obtain">obtain the resource</dfn>, the user
  agent must run the following steps:</p>

  <ol><li><p>If the <code title="attr-link-href"><a href="#attr-link-href">href</a></code> attribute's
   value is the empty string, then abort these steps.</p></li>

   <li><p><a href="urls.html#resolve-a-url" title="resolve a url">Resolve</a> the
   <a href="urls.html#url">URL</a> given by the <code title="attr-link-href"><a href="#attr-link-href">href</a></code> attribute, relative to the
   element.</p></li>

   <li><p>If the previous step fails, then abort these steps.</p></li>

   <li><p><a href="fetching-resources.html#fetch">Fetch</a> the resulting <a href="urls.html#absolute-url">absolute
   URL</a>.</p></li>

  </ol><p>User agents may opt to only try to obtain such resources when
  they are needed, instead of pro-actively <a href="fetching-resources.html#fetch" title="fetch">fetching</a> all the external resources that are
  not applied.</p>

  <p>The semantics of the protocol used (e.g. HTTP) must be followed
  when fetching external resources. (For example, redirects will be
  followed and 404 responses will cause the external resource to not
  be applied.)</p>


  <p>Once the attempts to obtain the resource and its <a href="infrastructure.html#critical-subresources">critical
  subresources</a> are complete, the user agent must, if the loads
  were successful, <a href="webappapis.html#queue-a-task">queue a task</a> to <a href="webappapis.html#fire-a-simple-event">fire a simple
  event</a> named <code title="event-load">load</code> at the
  <code><a href="#the-link-element">link</a></code> element, or, if the resource or one of its
  <a href="infrastructure.html#critical-subresources">critical subresources</a> failed to completely load for any
  reason (e.g. DNS error, HTTP 404 response, a connection being
  prematurely closed, unsupported Content-Type), <a href="webappapis.html#queue-a-task">queue a
  task</a> to <a href="webappapis.html#fire-a-simple-event">fire a simple event</a> named <code title="event-error">error</code> at the <code><a href="#the-link-element">link</a></code>
  element. Non-network errors in processing the resource or its
  subresources (e.g. CSS parse errors, PNG decoding errors) are not
  failures for the purposes of this paragraph.</p>

  <p>The <a href="webappapis.html#task-source">task source</a> for these <a href="webappapis.html#concept-task" title="concept-task">tasks</a> is the <a href="webappapis.html#dom-manipulation-task-source">DOM manipulation task
  source</a>.</p>

  <p>The element must <a href="the-end.html#delay-the-load-event">delay the load event</a> of the
  element's document until all the attempts to obtain the resource and
  its <a href="infrastructure.html#critical-subresources">critical subresources</a> are complete. (Resources that
  the user agent has not yet attempted to obtain, e.g. because it is
  waiting for the resource to be needed, do not <a href="the-end.html#delay-the-load-event">delay the load
  event</a>.)</p>

  <hr><p id="linkui">Interactive user agents may provide users with a
  means to <a href="links.html#following-hyperlinks" title="following hyperlinks">follow the
  hyperlinks</a> created using the <code><a href="#the-link-element">link</a></code> element,
  somewhere within their user interface. The exact interface is not
  defined by this specification, but it could include the following
  information (obtained from the element's attributes, again as
  defined below), in some form or another (possibly simplified), for
  each hyperlink created with each <code><a href="#the-link-element">link</a></code> element in the
  document:</p>

  <ul><li>The relationship between this document and the resource (given
   by the <code title="attr-link-rel"><a href="#attr-link-rel">rel</a></code> attribute)</li>

   <li>The title of the resource (given by the <code title="attr-link-title"><a href="#attr-link-title">title</a></code> attribute).</li>

   <li>The address of the resource (given by the <code title="attr-link-href"><a href="#attr-link-href">href</a></code> attribute).</li>

   <li>The language of the resource (given by the <code title="attr-link-hreflang"><a href="#attr-link-hreflang">hreflang</a></code> attribute).</li>

   <li>The optimum media for the resource (given by the <code title="attr-link-media"><a href="#attr-link-media">media</a></code> attribute).</li>

  </ul><p>User agents could also include other information, such as the
  type of the resource (as given by the <code title="attr-link-type"><a href="#attr-link-type">type</a></code> attribute).</p>

  </div><p class="note">Hyperlinks created with the <code><a href="#the-link-element">link</a></code>
  element and its <code title="attr-link-rel"><a href="#attr-link-rel">rel</a></code> attribute
  apply to the whole page. This contrasts with the <code title="attr-hyperlink-rel"><a href="links.html#attr-hyperlink-rel">rel</a></code> attribute of <code><a href="text-level-semantics.html#the-a-element">a</a></code>
  and <code><a href="the-map-element.html#the-area-element">area</a></code> elements, which indicates the type of a link
  whose context is given by the link's location within the
  document.</p><p>The <dfn id="attr-link-media" title="attr-link-media"><code>media</code></dfn>
  attribute says which media the resource applies to. The value must
  be a <a href="common-microsyntaxes.html#valid-media-query">valid media query</a>.</p><div class="impl">

  <p>If the link is a <a href="links.html#hyperlink">hyperlink</a> then the <code title="attr-link-media"><a href="#attr-link-media">media</a></code> attribute is purely advisory,
  and describes for which media the document in question was
  designed.</p>

  <p>However, if the link is an <a href="links.html#external-resource-link">external resource link</a>,
  then the <code title="attr-link-media"><a href="#attr-link-media">media</a></code> attribute is
  prescriptive. The user agent must apply the external resource when
  the <code title="attr-link-media"><a href="#attr-link-media">media</a></code> attribute's value
  <a href="common-microsyntaxes.html#matches-the-environment">matches the environment</a> and the other relevant
  conditions apply, and must not apply it otherwise.</p>
  <p class="note">The external resource might have further
  restrictions defined within that limit its applicability. For
  example, a CSS style sheet might have some <code title="">@media</code> blocks. This specification does not override
  such further restrictions or requirements.</p>
  </div><p id="default-media">The default, if the <code title="attr-link-media"><a href="#attr-link-media">media</a></code> attribute is omitted, is "<code title="">all</code>", meaning that by default links apply to all
  media.</p><p>The <dfn id="attr-link-hreflang" title="attr-link-hreflang"><code>hreflang</code></dfn>
  attribute on the <code><a href="#the-link-element">link</a></code> element has the same semantics as
  the <a href="links.html#attr-hyperlink-hreflang" title="attr-hyperlink-hreflang"><code>hreflang</code>
  attribute on <code>a</code> and <code>area</code>
  elements</a>.</p><p>The <dfn id="attr-link-type" title="attr-link-type"><code>type</code></dfn> attribute
  gives the <a href="infrastructure.html#mime-type">MIME type</a> of the linked resource. It is
  purely advisory.  The value must be a <a href="infrastructure.html#valid-mime-type">valid MIME
  type</a>.</p><p>For <a href="links.html#external-resource-link" title="external resource link">external resource
  links</a>, the <code title="attr-link-type"><a href="#attr-link-type">type</a></code> attribute
  is used as a hint to user agents so that they can avoid fetching
  resources they do not support. <span class="impl">If the attribute
  is present, then the user agent must assume that the resource is of
  the given type (even if that is not a <a href="infrastructure.html#valid-mime-type">valid MIME type</a>,
  e.g. the empty string). If the attribute is omitted, but the
  external resource link type has a default type defined, then the
  user agent must assume that the resource is of that type. If the UA
  does not support the given <a href="infrastructure.html#mime-type">MIME type</a> for the given link
  relationship, then the UA should not <a href="#concept-link-obtain" title="concept-link-obtain">obtain</a> the resource; if the UA
  does support the given <a href="infrastructure.html#mime-type">MIME type</a> for the given link
  relationship, then the UA should <a href="#concept-link-obtain" title="concept-link-obtain">obtain</a> the resource at the
  appropriate time as specified for the <a href="links.html#external-resource-link">external resource
  link</a>'s particular type. If the attribute is omitted, and the
  external resource link type does not have a default type defined,
  but the user agent would <a href="#concept-link-obtain" title="concept-link-obtain">obtain</a> the resource if the type
  was known and supported, then the user agent should <a href="#concept-link-obtain" title="concept-link-obtain">obtain</a> the resource under the
  assumption that it will be supported.</span></p><div class="impl">

  <p>User agents must not consider the <code title="attr-link-type"><a href="#attr-link-type">type</a></code> attribute authoritative &#8212;
  upon fetching the resource, user agents must not use the <code title="attr-link-type"><a href="#attr-link-type">type</a></code> attribute to determine its actual
  type. Only the actual type (as defined in the next paragraph) is
  used to determine whether to <em>apply</em> the resource, not the
  aforementioned assumed type.</p>

  <p id="concept-link-type-sniffing">If the external resource link
  type defines rules for processing the resource's <a href="fetching-resources.html#content-type" title="Content-Type">Content-Type metadata</a>, then those rules
  apply. Otherwise, if the resource is expected to be an image, user
  agents may apply the <a href="fetching-resources.html#content-type-sniffing:-image" title="Content-Type sniffing:
  image">image sniffing rules</a>, with the <var title="">official
  type</var> being the type determined from the resource's <a href="fetching-resources.html#content-type" title="Content-Type">Content-Type metadata</a>, and use the
  resulting sniffed type of the resource as if it was the actual
  type. Otherwise, if neither of these conditions apply or if the user
  agent opts not to apply the image sniffing rules, then the user
  agent must use the resource's <a href="fetching-resources.html#content-type" title="Content-Type">Content-Type metadata</a> to determine the
  type of the resource. If there is no type metadata, but the external
  resource link type has a default type defined, then the user agent
  must assume that the resource is of that type.</p>

  <p class="note">The <code title="rel-stylesheet"><a href="links.html#link-type-stylesheet">stylesheet</a></code>
  link type defines rules for processing the resource's <a href="fetching-resources.html#content-type" title="Content-Type">Content-Type metadata</a>.</p>

  <p>Once the user agent has established the type of the resource, the
  user agent must apply the resource if it is of a supported type and
  the other relevant conditions apply, and must ignore the resource
  otherwise.</p>

  <div class="example">

   <p>If a document contains style sheet links labeled as follows:</p>

   <pre>&lt;link rel="stylesheet" href="A" type="text/plain"&gt;
&lt;link rel="stylesheet" href="B" type="text/css"&gt;
&lt;link rel="stylesheet" href="C"&gt;</pre>

   <p>...then a compliant UA that supported only CSS style sheets
   would fetch the B and C files, and skip the A file (since
   <code>text/plain</code> is not the <a href="infrastructure.html#mime-type">MIME type</a> for CSS style
   sheets).</p>

   <p>For files B and C, it would then check the actual types returned
   by the server. For those that are sent as <code>text/css</code>, it
   would apply the styles, but for those labeled as
   <code>text/plain</code>, or any other type, it would not.</p>

   <p>If one of the two files was returned without a
   <a href="fetching-resources.html#content-type">Content-Type</a> metadata, or with a syntactically
   incorrect type like <code title="">Content-Type:&#160;"null"</code>, then the default type
   for <code title="rel-stylesheet"><a href="links.html#link-type-stylesheet">stylesheet</a></code> links would kick
   in. Since that default type is <code title="">text/css</code>, the
   style sheet <em>would</em> nonetheless be applied.</p>

  </div>

  </div><p>The <dfn id="attr-link-title" title="attr-link-title"><code>title</code></dfn>
  attribute gives the title of the link. With one exception, it is
  purely advisory. The value is text. The exception is for style sheet
  links, where the <code title="attr-link-title"><a href="#attr-link-title">title</a></code>
  attribute defines <span>alternative style sheet sets</span>.</p><p class="note">The <code title="attr-link-title"><a href="#attr-link-title">title</a></code>
  attribute on <code><a href="#the-link-element">link</a></code> elements differs from the global
  <code title="attr-title"><a href="elements.html#the-title-attribute">title</a></code> attribute of most other
  elements in that a link without a title does not inherit the title
  of the parent element: it merely has no title.</p><p>The <code title="attr-link-sizes"><a href="links.html#attr-link-sizes">sizes</a></code> attribute is used
  with the <code title="rel-icon"><a href="links.html#rel-icon">icon</a></code> link type. The attribute
  must not be specified on <code><a href="#the-link-element">link</a></code> elements that do not have
  a <code title="attr-link-rel"><a href="#attr-link-rel">rel</a></code> attribute that specifies
  the <code title="rel-icon"><a href="links.html#rel-icon">icon</a></code> keyword.</p><div class="impl">

  <p>HTTP <code title="">Link:</code> headers, if supported, must be
  assumed to come before any links in the document, in the order that
  they were given in the HTTP entity header. (URLs in these headers
  are to be processed and resolved according to the rules given in the
  relevant specification; the rules of <em>this</em> specification
  don't apply.) <a href="references.html#refsHTTP">[HTTP]</a> <a href="references.html#refsWEBLINK">[WEBLINK]</a></p>
  <p>The IDL attributes <dfn id="dom-link-href" title="dom-link-href"><code>href</code></dfn>, <dfn id="dom-link-rel" title="dom-link-rel"><code>rel</code></dfn>, <dfn id="dom-link-media" title="dom-link-media"><code>media</code></dfn>, <dfn id="dom-link-hreflang" title="dom-link-hreflang"><code>hreflang</code></dfn>, and <dfn id="dom-link-type" title="dom-link-type"><code>type</code></dfn>, and <dfn id="dom-link-sizes" title="dom-link-sizes"><code>sizes</code></dfn> each 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-link-rellist" title="dom-link-rellist"><code>relList</code></dfn> <span class="impl">must</span> <a href="common-dom-interfaces.html#reflect" title="reflect">reflect</a> the <code title="attr-link-rel"><a href="#attr-link-rel">rel</a></code> content attribute.</p>

  </div><p>The IDL attribute <dfn id="dom-link-disabled" title="dom-link-disabled"><code>disabled</code></dfn> only applies
  to style sheet links. When the <code><a href="#the-link-element">link</a></code> element defines a
  style sheet link, then the <code title="dom-link-disabled"><a href="#dom-link-disabled">disabled</a></code> attribute behaves as
  defined <a href="#dom-linkstyle-disabled" title="dom-linkstyle-disabled">for the alternative
  style sheets DOM</a>. For all other <code><a href="#the-link-element">link</a></code> elements it
  always return false and does nothing on setting.</p><p>The <code>LinkStyle</code> interface is also implemented by
  this element; the <a href="#styling">styling processing model</a> defines
  how. <a href="references.html#refsCSSOM">[CSSOM]</a></p><div class="example">

   <p>Here, a set of <code><a href="#the-link-element">link</a></code> elements provide some style
   sheets:</p>

   <pre>&lt;!-- a persistent style sheet --&gt;
&lt;link rel="stylesheet" href="default.css"&gt;

&lt;!-- the preferred alternate style sheet --&gt;
&lt;link rel="stylesheet" href="green.css" title="Green styles"&gt;

&lt;!-- some alternate style sheets --&gt;
&lt;link rel="alternate stylesheet" href="contrast.css" title="High contrast"&gt;
&lt;link rel="alternate stylesheet" href="big.css" title="Big fonts"&gt;
&lt;link rel="alternate stylesheet" href="wide.css" title="Wide screen"&gt;</pre>

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

   <p>The following example shows how you can specify versions of the
   page that use alternative formats, are aimed at other languages,
   and that are intended for other media:</p>

   <pre>&lt;link rel=alternate href="/en/html" hreflang=en type=text/html title="English HTML"&gt;
&lt;link rel=alternate href="/fr/html" hreflang=fr type=text/html title="French HTML"&gt;
&lt;link rel=alternate href="/en/html/print" hreflang=en type=text/html media=print title="English HTML (for printing)"&gt;
&lt;link rel=alternate href="/fr/html/print" hreflang=fr type=text/html media=print title="French HTML (for printing)"&gt;
&lt;link rel=alternate href="/en/pdf" hreflang=en type=application/pdf title="English PDF"&gt;
&lt;link rel=alternate href="/fr/pdf" hreflang=fr type=application/pdf title="French PDF"&gt;</pre>

  </div><h4 id="the-meta-element"><span class="secno">4.2.5 </span>The <dfn id="meta"><code>meta</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
   <dd><a href="content-models.html#metadata-content">Metadata content</a>.</dd>
   <dt>Contexts in which this element can be used:</dt>
   <dd>If the <code title="attr-meta-charset"><a href="#attr-meta-charset">charset</a></code> attribute is present, or if the element's <code title="attr-meta-http-equiv"><a href="#attr-meta-http-equiv">http-equiv</a></code> attribute is in the <a href="#attr-meta-http-equiv-content-type" title="attr-meta-http-equiv-content-type">Encoding declaration state</a>: in a <code><a href="#the-head-element">head</a></code> element.</dd>
   <dd>If the <code title="attr-meta-http-equiv"><a href="#attr-meta-http-equiv">http-equiv</a></code> attribute is present but not in the <a href="#attr-meta-http-equiv-content-type" title="attr-meta-http-equiv-content-type">Encoding declaration state</a>: in a <code><a href="#the-head-element">head</a></code> element.</dd>
   <dd>If the <code title="attr-meta-http-equiv"><a href="#attr-meta-http-equiv">http-equiv</a></code> attribute is present but not in the <a href="#attr-meta-http-equiv-content-type" title="attr-meta-http-equiv-content-type">Encoding declaration state</a>: in a <code><a href="scripting-1.html#the-noscript-element">noscript</a></code> element that is a child of a <code><a href="#the-head-element">head</a></code> element.</dd>
   <dd>If the <code title="attr-meta-name"><a href="#attr-meta-name">name</a></code> attribute is present: where <a href="content-models.html#metadata-content">metadata 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>
   <dd><code title="attr-meta-name"><a href="#attr-meta-name">name</a></code></dd>
   <dd><code title="attr-meta-http-equiv"><a href="#attr-meta-http-equiv">http-equiv</a></code></dd>
   <dd><code title="attr-meta-content"><a href="#attr-meta-content">content</a></code></dd>
   <dd><code title="attr-meta-charset"><a href="#attr-meta-charset">charset</a></code></dd>
   <dt>DOM interface:</dt>
   <dd>
<pre class="idl">interface <dfn id="htmlmetaelement">HTMLMetaElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> {
           attribute DOMString <a href="#dom-meta-name" title="dom-meta-name">name</a>;
           attribute DOMString <a href="#dom-meta-httpequiv" title="dom-meta-httpEquiv">httpEquiv</a>;
           attribute DOMString <a href="#dom-meta-content" title="dom-meta-content">content</a>;
};</pre>
   </dd>
  </dl><p>The <code><a href="#the-meta-element">meta</a></code> element <a href="rendering.html#represents">represents</a> various
  kinds of metadata that cannot be expressed using the
  <code><a href="#the-title-element">title</a></code>, <code><a href="#the-base-element">base</a></code>, <code><a href="#the-link-element">link</a></code>,
  <code><a href="#the-style-element">style</a></code>, and <code><a href="scripting-1.html#the-script-element">script</a></code> elements.</p><p>The <code><a href="#the-meta-element">meta</a></code> element can represent document-level
  metadata with the <code title="attr-meta-name"><a href="#attr-meta-name">name</a></code>
  attribute, pragma directives with the <code title="attr-meta-http-equiv"><a href="#attr-meta-http-equiv">http-equiv</a></code> attribute, and the
  file's <a href="#character-encoding-declaration">character encoding declaration</a> when an HTML
  document is serialized to string form (e.g. for transmission over
  the network or for disk storage) with the <code title="attr-meta-charset"><a href="#attr-meta-charset">charset</a></code> attribute.</p><p>Exactly one of the <code title="attr-meta-name"><a href="#attr-meta-name">name</a></code>,
  <code title="attr-meta-http-equiv"><a href="#attr-meta-http-equiv">http-equiv</a></code>, and <code title="attr-meta-charset"><a href="#attr-meta-charset">charset</a></code> attributes must be
  specified.</p><p>If either <code title="attr-meta-name"><a href="#attr-meta-name">name</a></code> or <code title="attr-meta-http-equiv"><a href="#attr-meta-http-equiv">http-equiv</a></code> is specified, then
  the <code title="attr-meta-content"><a href="#attr-meta-content">content</a></code> attribute must
  also be specified. Otherwise, it must be omitted.</p><p>The <dfn id="attr-meta-charset" title="attr-meta-charset"><code>charset</code></dfn>
  attribute specifies the character encoding used by the
  document. This is a <a href="#character-encoding-declaration">character encoding declaration</a>. If
  the attribute is present in an <a href="dom.html#xml-documents" title="XML documents">XML
  document</a>, its value must be an <a href="infrastructure.html#ascii-case-insensitive">ASCII
  case-insensitive</a> match for the string "<code title="">UTF-8</code>" (and the document is therefore forced to use
  UTF-8 as its encoding).</p><p class="note">The <code title="attr-meta-charset"><a href="#attr-meta-charset">charset</a></code>
  attribute on the <code><a href="#the-meta-element">meta</a></code> element has no effect in XML
  documents, and is only allowed in order to facilitate migration to
  and from XHTML.</p><p>There must not be more than one <code><a href="#the-meta-element">meta</a></code> element with a
  <code title="attr-meta-charset"><a href="#attr-meta-charset">charset</a></code> attribute per
  document.</p><p>The <dfn id="attr-meta-content" title="attr-meta-content"><code>content</code></dfn>
  attribute gives the value of the document metadata or pragma
  directive when the element is used for those purposes. The allowed
  values depend on the exact context, as described in subsequent
  sections of this specification.</p><p>If a <code><a href="#the-meta-element">meta</a></code> element has a <dfn id="attr-meta-name" title="attr-meta-name"><code>name</code></dfn> attribute, it sets
  document metadata. Document metadata is expressed in terms of
  name/value pairs, the <code title="attr-meta-name"><a href="#attr-meta-name">name</a></code>
  attribute on the <code><a href="#the-meta-element">meta</a></code> element giving the name, and the
  <code title="attr-meta-content"><a href="#attr-meta-content">content</a></code> attribute on the same
  element giving the value. The name specifies what aspect of metadata
  is being set; valid names and the meaning of their values are
  described in the following sections. If a <code><a href="#the-meta-element">meta</a></code> element
  has no <code title="attr-meta-content"><a href="#attr-meta-content">content</a></code> attribute,
  then the value part of the metadata name/value pair is the empty
  string.</p><div class="impl">

  <p>The <dfn id="dom-meta-name" title="dom-meta-name"><code>name</code></dfn> and <dfn id="dom-meta-content" title="dom-meta-content"><code>content</code></dfn> IDL attributes
  must <a href="common-dom-interfaces.html#reflect">reflect</a> the respective content attributes of the
  same name. The IDL attribute <dfn id="dom-meta-httpequiv" title="dom-meta-httpEquiv"><code>httpEquiv</code></dfn> must
  <a href="common-dom-interfaces.html#reflect">reflect</a> the content attribute <code title="attr-meta-http-equiv"><a href="#attr-meta-http-equiv">http-equiv</a></code>.</p>

  </div><h5 id="standard-metadata-names"><span class="secno">4.2.5.1 </span>Standard metadata names</h5><p>This specification defines a few names for the <code title="attr-meta-name"><a href="#attr-meta-name">name</a></code> attribute of the
  <code><a href="#the-meta-element">meta</a></code> element.</p><p>Names are case-insensitive<span class="impl">, and must be compared
  in an <a href="infrastructure.html#ascii-case-insensitive">ASCII case-insensitive</a> manner</span>.</p><dl><dt><dfn id="meta-application-name" title="meta-application-name"><code>application-name</code></dfn></dt>

   <dd><p>The value must be a short free-form string giving the name
   of the Web application that the page represents. If the page is not
   a Web application, the <code title="meta-application-name"><a href="#meta-application-name">application-name</a></code> metadata name
   must not be used. There must not be more than one <code><a href="#the-meta-element">meta</a></code>
   element with its <code title="attr-meta-name"><a href="#attr-meta-name">name</a></code> attribute
   set to the value <code title="meta-application-name"><a href="#meta-application-name">application-name</a></code> per
   document. <span class="impl">User agents may use the application
   name in UI in preference to the page's <code><a href="#the-title-element">title</a></code>, since
   the title might include status messages and the like relevant to
   the status of the page at a particular moment in time instead of
   just being the name of the application.</span></p></dd>

   <dt><dfn id="meta-author" title="meta-author"><code>author</code></dfn></dt>

   <dd><p>The value must be a free-form string giving the name of one
   of the page's authors.</p></dd>

   <dt><dfn id="meta-description" title="meta-description"><code>description</code></dfn></dt>

   <dd><p>The value must be a free-form string that describes the
   page. The value must be appropriate for use in a directory of
   pages, e.g. in a search engine. There must not be more than one
   <code><a href="#the-meta-element">meta</a></code> element with its <code title="attr-meta-name"><a href="#attr-meta-name">name</a></code> attribute set to the value <code title="meta-description"><a href="#meta-description">description</a></code> per document.</p></dd>

   <dt><dfn id="meta-generator" title="meta-generator"><code>generator</code></dfn></dt>

   <dd>

    <p>The value must be a free-form string that identifies one of the
    software packages used to generate the document. This value must
    not be used on hand-authored pages.</p>

    <div class="example">

     <p>Here is what a tool called "Frontweaver" could include in its
     output, in the page's <code><a href="#the-head-element">head</a></code> element, to identify
     itself as the tool used to generate the page:</p>

     <pre>&lt;meta name=generator content="Frontweaver 8.2"&gt;</pre>

    </div>

   </dd>

   <dt><dfn id="meta-keywords" title="meta-keywords"><code>keywords</code></dfn></dt>

   <dd>

    <p>The value must be a <a href="common-microsyntaxes.html#set-of-comma-separated-tokens">set of comma-separated tokens</a>,
    each of which is a keyword relevant to the page.</p>

    <div class="example">

     <p>This page about typefaces on British motorways uses a
     <code><a href="#the-meta-element">meta</a></code> element to specify some keywords that users
     might use to look for the page:</p>

     <pre>&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
 &lt;head&gt;
  &lt;title&gt;Typefaces on UK motorways&lt;/title&gt;
  &lt;meta name="keywords" content="british,type face,font,fonts,highway,highways"&gt;
 &lt;/head&gt;
 &lt;body&gt;
  ...</pre>

    </div>

    <p class="note">Many search engines do not consider such keywords,
    because this feature has historically been used unreliably and
    even misleadingly as a way to spam search engine results in a way
    that is not helpful for users.</p>

    <div class="impl">

    <p>To obtain the list of keywords that the author has specified as
    applicable to the page, the user agent must run the following
    steps:</p>

    <ol><li><p>Let <var title="">keywords</var> be an empty
     list.</p></li>

     <li>

      <p>For each <code><a href="#the-meta-element">meta</a></code> element with a <code title="attr-meta-name"><a href="#attr-meta-name">name</a></code> attribute and a <code title="attr-meta-content"><a href="#attr-meta-content">content</a></code> attribute and whose
      <code title="attr-meta-name"><a href="#attr-meta-name">name</a></code> attribute's value is
      <code title="meta-keywords"><a href="#meta-keywords">keywords</a></code>, run the following
      substeps:</p>

      <ol><li><p><a href="common-microsyntaxes.html#split-a-string-on-commas" title="split a string on commas">Split the value
       of the element's <code title="attr-meta-content">content</code>
       attribute on commas</a>.</p></li>

       <li><p>Add the resulting tokens, if any, to <var title="">keywords</var>.</p></li>

      </ol></li>

     <li><p>Remove any duplicates from <var title="">keywords</var>.</p></li>

     <li><p>Return <var title="">keywords</var>. This is the list of
     keywords that the author has specified as applicable to the
     page.</p></li>

    </ol><p>User agents should not use this information when there is
    insufficient confidence in the reliability of the value.</p>

    <p class="example">For instance, it would be reasonable for a
    content management system to use the keyword information of pages
    within the system to populate the index of a site-specific search
    engine, but a large-scale content aggregator that used this
    information would likely find that certain users would try to game
    its ranking mechanism through the use of inappropriate
    keywords.</p>

    </div>

   </dd>

  </dl><h5 id="other-metadata-names"><span class="secno">4.2.5.2 </span>Other metadata names</h5><p><dfn id="concept-meta-extensions" title="concept-meta-extensions">Extensions to the predefined
  set of metadata names</dfn> may be registered in the <a href="http://wiki.whatwg.org/wiki/MetaExtensions">WHATWG Wiki
  MetaExtensions page</a>. <a href="references.html#refsWHATWGWIKI">[WHATWGWIKI]</a></p><p>Anyone is free to edit the WHATWG Wiki MetaExtensions page at any
  time to add a type. These new names must be specified with the
  following information:</p><dl><dt>Keyword</dt>

   <dd><p>The actual name being defined. The name should not be
   confusingly similar to any other defined name (e.g. differing only
   in case).</p></dd>


   <dt>Brief description</dt>

   <dd><p>A short non-normative description of what the metadata
   name's meaning is, including the format the value is required to be
   in.</p></dd>


   <dt>Specification</dt>

   <dd>A link to a more detailed description of the metadata name's
   semantics and requirements. It could be another page on the Wiki,
   or a link to an external page.</dd>


   <dt>Synonyms</dt>

   <dd><p>A list of other names that have exactly the same processing
   requirements. Authors should not use the names defined to be
   synonyms, they are only intended to allow user agents to support
   legacy content. Anyone may remove synonyms that are not used in
   practice; only names that need to be processed as synonyms for
   compatibility with legacy content are to be registered in this
   way.</p></dd>


   <dt>Status</dt>

   <dd>

    <p>One of the following:</p>

    <dl><dt>Proposed</dt>

     <dd>The name has not received wide peer review and
     approval. Someone has proposed it and is, or soon will be, using
     it.</dd>

     <dt>Ratified</dt>

     <dd>The name has received wide peer review and approval. It has a
     specification that unambiguously defines how to handle pages that
     use the name, including when they use it in incorrect ways.</dd>

     <dt>Discontinued</dt>

     <dd>The metadata name has received wide peer review and it has
     been found wanting. Existing pages are using this metadata name,
     but new pages should avoid it. The "brief description" and
     "specification" entries will give details of what authors should
     use instead, if anything.</dd>

    </dl><p>If a metadata name is found to be redundant with existing
    values, it should be removed and listed as a synonym for the
    existing value.</p>

    <p>If a metadata name is registered in the "proposed" state for a
    period of a month or more without being used or specified, then it
    may be removed from the registry.</p>

    <p>If a metadata name is added with the "proposed" status and
    found to be redundant with existing values, it should be removed
    and listed as a synonym for the existing value. If a metadata name
    is added with the "proposed" status and found to be harmful, then
    it should be changed to "discontinued" status.</p>

    <p>Anyone can change the status at any time, but should only do so
    in accordance with the definitions above.</p>

   </dd>

  </dl><div class="impl">

  <p>Conformance checkers must use the information given on the WHATWG
  Wiki MetaExtensions page to establish if a value is allowed or not:
  values defined in this specification or marked as "proposed" or
  "ratified" must be accepted, whereas values marked as "discontinued"
  or not listed in either this specification or on the aforementioned
  page must be rejected as invalid. Conformance checkers may cache
  this information (e.g. for performance reasons or to avoid the use
  of unreliable network connectivity).</p>

  <p>When an author uses a new metadata name not defined by either
  this specification or the Wiki page, conformance checkers should
  offer to add the value to the Wiki, with the details described
  above, with the "proposed" status.</p>

  </div><p>Metadata names whose values are to be <a href="urls.html#url" title="URL">URLs</a> must not be proposed or accepted. Links must
  be represented using the <code><a href="#the-link-element">link</a></code> element, not the
  <code><a href="#the-meta-element">meta</a></code> element.</p><h5 id="pragma-directives"><span class="secno">4.2.5.3 </span>Pragma directives</h5><p>When the <dfn id="attr-meta-http-equiv" title="attr-meta-http-equiv"><code>http-equiv</code></dfn> attribute
  is specified on a <code><a href="#the-meta-element">meta</a></code> element, the element is a pragma
  directive.</p><p>The <code title="attr-meta-http-equiv"><a href="#attr-meta-http-equiv">http-equiv</a></code>
  attribute is an <a href="common-microsyntaxes.html#enumerated-attribute">enumerated attribute</a>. The following
  table lists the keywords defined for this attribute. The states
  given in the first cell of the rows with keywords give the states to
  which those keywords map. <span class="impl">Some of the keywords
  are non-conforming, as noted in the last column.</span></p><table id="table-http-equiv"><thead><tr><th>State
     </th><th>Keyword
     </th><th>Notes
   </th></tr></thead><tbody><tr class="impl"><td><a href="#attr-meta-http-equiv-content-language" title="attr-meta-http-equiv-content-language">Content Language</a>
     </td><td><code title="">content-language</code>
     </td><td>Non-conforming
    </td></tr><tr><td><a href="#attr-meta-http-equiv-content-type" title="attr-meta-http-equiv-content-type">Encoding declaration</a>
     </td><td><code title="">content-type</code>
     </td><td>
    </td></tr><tr><td><a href="#attr-meta-http-equiv-default-style" title="attr-meta-http-equiv-default-style">Default style</a>
     </td><td><code title="">default-style</code>
     </td><td>
    </td></tr><tr><td><a href="#attr-meta-http-equiv-refresh" title="attr-meta-http-equiv-refresh">Refresh</a>
     </td><td><code title="">refresh</code>
     </td><td>
    </td></tr><tr class="impl"><td><a href="#attr-meta-http-equiv-set-cookie" title="attr-meta-http-equiv-set-cookie">Cookie setter</a>
     </td><td><code title="">set-cookie</code>
     </td><td>Non-conforming
  </td></tr></tbody></table><div class="impl">

  <p>When a <code><a href="#the-meta-element">meta</a></code> element is <a href="infrastructure.html#insert-an-element-into-a-document" title="insert an
  element into a document">inserted into the document</a>, if its
  <code title="attr-meta-http-equiv"><a href="#attr-meta-http-equiv">http-equiv</a></code> attribute is
  present and represents one of the above states, then the user agent
  must run the algorithm appropriate for that state, as described in
  the following list:</p>

  </div><dl><dt class="impl"><dfn id="attr-meta-http-equiv-content-language" title="attr-meta-http-equiv-content-language">Content language state</dfn> (<code title="">http-equiv="content-language"</code>)

   </dt><dd class="impl">

    <p class="note">This feature is non-conforming. Authors are
    encouraged to use the <code title="attr-lang"><a href="elements.html#attr-lang">lang</a></code>
    attribute instead.</p>

    <p>This pragma sets the <dfn id="pragma-set-default-language">pragma-set default
    language</dfn>. Until the pragma is successfully processed, there
    is no <a href="#pragma-set-default-language">pragma-set default language</a>.</p>

    <ol><li><p>If another <code><a href="#the-meta-element">meta</a></code> element with an <code title="attr-meta-http-equiv"><a href="#attr-meta-http-equiv">http-equiv</a></code> attribute in the
     <a href="#attr-meta-http-equiv-content-language" title="attr-meta-http-equiv-content-language">Content
     Language state</a> has already been successfully processed
     (i.e. when it was inserted the user agent processed it and
     reached the last step of this list of steps), then abort these
     steps.</p></li>

     <li><p>If the <code><a href="#the-meta-element">meta</a></code> element has no <code title="attr-meta-content"><a href="#attr-meta-content">content</a></code> attribute, or if that
     attribute's value is the empty string, then abort these
     steps.</p></li>

     <li><p>If the element's <code title="attr-meta-content"><a href="#attr-meta-content">content</a></code> attribute contains a
     U+002C COMMA character (,) then abort these steps.</p></li>
     <li><p>Let <var title="">input</var> be the value of the
     element's <code title="attr-meta-content"><a href="#attr-meta-content">content</a></code>
     attribute.</p></li>

     <li><p>Let <var title="">position</var> point at the first
     character of <var title="">input</var>.</p></li>

     <li><p><a href="common-microsyntaxes.html#skip-whitespace">Skip whitespace</a>.</p></li>

     <li><p><a href="common-microsyntaxes.html#collect-a-sequence-of-characters" title="collect a sequence of characters">Collect a
     sequence of characters</a> that are not <a href="common-microsyntaxes.html#space-character" title="space character">space characters</a>.</p></li>

     <li><p>Let the <a href="#pragma-set-default-language">pragma-set default language</a> be the
     string that resulted from the previous step.</p></li>

    </ol><p class="note">This pragma is not exactly equivalent to the HTTP
    <code>Content-Language</code> header. <a href="references.html#refsHTTP">[HTTP]</a></p>

   </dd>

   <dt><dfn id="attr-meta-http-equiv-content-type" title="attr-meta-http-equiv-content-type">Encoding declaration state</dfn> (<code title="">http-equiv="content-type"</code>)

   </dt><dd>

    <p>The <a href="#attr-meta-http-equiv-content-type" title="attr-meta-http-equiv-content-type">Encoding
    declaration state</a> is just an alternative form of setting
    the <code title="meta-charset">charset</code> attribute: it is a
    <a href="#character-encoding-declaration">character encoding declaration</a>. <span class="impl">This state's user agent requirements are all handled
    by the parsing section of the specification.</span></p>

    <p>For <code><a href="#the-meta-element">meta</a></code> elements with an <code title="attr-meta-http-equiv"><a href="#attr-meta-http-equiv">http-equiv</a></code> attribute in the
    <a href="#attr-meta-http-equiv-content-type" title="attr-meta-http-equiv-content-type">Encoding
    declaration state</a>, the <code title="attr-meta-content"><a href="#attr-meta-content">content</a></code> attribute must have a
    value that is an <a href="infrastructure.html#ascii-case-insensitive">ASCII case-insensitive</a> match for a
    string that consists of: the literal string "<code title="">text/html;</code>", optionally followed by any number of
    <a href="common-microsyntaxes.html#space-character" title="space character">space characters</a>, followed by
    the literal string "<code title="">charset=</code>", followed by
    the character encoding name of the <a href="#character-encoding-declaration">character encoding
    declaration</a>.</p>

    <p>A document must not contain both a <code><a href="#the-meta-element">meta</a></code> element
    with an <code title="attr-meta-http-equiv"><a href="#attr-meta-http-equiv">http-equiv</a></code>
    attribute in the <a href="#attr-meta-http-equiv-content-type" title="attr-meta-http-equiv-content-type">Encoding declaration
    state</a> and a <code><a href="#the-meta-element">meta</a></code> element with the <code title="attr-meta-charset"><a href="#attr-meta-charset">charset</a></code> attribute present.</p>

    <p>The <a href="#attr-meta-http-equiv-content-type" title="attr-meta-http-equiv-content-type">Encoding
    declaration state</a> may be used in <a href="dom.html#html-documents">HTML
    documents</a>, but elements with an <code title="attr-meta-http-equiv"><a href="#attr-meta-http-equiv">http-equiv</a></code> attribute in that
    state must not be used in <a href="dom.html#xml-documents">XML documents</a>.</p>

   </dd>

   <dt><dfn id="attr-meta-http-equiv-default-style" title="attr-meta-http-equiv-default-style">Default style state</dfn> (<code title="">http-equiv="default-style"</code>)

   </dt><dd>

    <p>This pragma sets the name of the default <span title="alternative style sheet sets">alternative style sheet
    set</span>.</p>

    <div class="impl">

    <ol><li><p>If the <code><a href="#the-meta-element">meta</a></code> element has no <code title="attr-meta-content"><a href="#attr-meta-content">content</a></code> attribute, or if that
     attribute's value is the empty string, then abort these
     steps.</p></li>

     <li><p>Set the <span>preferred style sheet set</span> to the
     value of the element's <code title="attr-meta-content"><a href="#attr-meta-content">content</a></code> attribute. <a href="references.html#refsCSSOM">[CSSOM]</a></p></li>

    </ol></div>

   </dd>

   <dt><dfn id="attr-meta-http-equiv-refresh" title="attr-meta-http-equiv-refresh">Refresh state</dfn> (<code title="">http-equiv="refresh"</code>)

   </dt><dd>

    <p>This pragma acts as timed redirect.</p>

    <div class="impl">

    <ol><li><p>If another <code><a href="#the-meta-element">meta</a></code> element with an <code title="attr-meta-http-equiv"><a href="#attr-meta-http-equiv">http-equiv</a></code> attribute in the
     <a href="#attr-meta-http-equiv-refresh" title="attr-meta-http-equiv-refresh">Refresh state</a>
     has already been successfully processed (i.e. when it was
     inserted the user agent processed it and reached the last step of
     this list of steps), then abort these steps.</p></li>

     <li><p>If the <code><a href="#the-meta-element">meta</a></code> element has no <code title="attr-meta-content"><a href="#attr-meta-content">content</a></code> attribute, or if that
     attribute's value is the empty string, then abort these
     steps.</p></li>

     <li><p>Let <var title="">input</var> be the value of the
     element's <code title="attr-meta-content"><a href="#attr-meta-content">content</a></code>
     attribute.</p></li>

     <li><p>Let <var title="">position</var> point at the first
     character of <var title="">input</var>.</p></li>

     <li><p><a href="common-microsyntaxes.html#skip-whitespace">Skip whitespace</a>.</p></li>

     <li><p><a href="common-microsyntaxes.html#collect-a-sequence-of-characters" title="collect a sequence of characters">Collect a
     sequence of characters</a> in the range U+0030 DIGIT ZERO (0)
     to U+0039 DIGIT NINE (9), and parse the resulting string using
     the <a href="common-microsyntaxes.html#rules-for-parsing-non-negative-integers">rules for parsing non-negative integers</a>. If the
     sequence of characters collected is the empty string, then no
     number will have been parsed; abort these steps. Otherwise, let
     <var title="">time</var> be the parsed number.</p></li>

     <li><p><a href="common-microsyntaxes.html#collect-a-sequence-of-characters" title="collect a sequence of characters">Collect a
     sequence of characters</a> in the range U+0030 DIGIT ZERO (0) to
     U+0039 DIGIT NINE (9) and U+002E FULL STOP (.). Ignore any collected
     characters.</p></li>

     <li><p><a href="common-microsyntaxes.html#skip-whitespace">Skip whitespace</a>.</p></li>

     <li><p>Let <var title="">url</var> be the address of the current
     page.</p></li>

     <li><p>If the character in <var title="">input</var> pointed to
     by <var title="">position</var> is a U+003B SEMICOLON ("<code title="">;</code>"), then advance <var title="">position</var> to
     the next character. Otherwise, jump to the last step.</p></li>

     <li><p><a href="common-microsyntaxes.html#skip-whitespace">Skip whitespace</a>.</p></li>

     <li><p>If the character in <var title="">input</var> pointed to
     by <var title="">position</var> is a U+0055 LATIN CAPITAL LETTER
     U character (U) or a U+0075 LATIN SMALL LETTER U character (u),
     then advance <var title="">position</var> to the next
     character. Otherwise, jump to the last step.</p></li>

     <li><p>If the character in <var title="">input</var> pointed to
     by <var title="">position</var> is a U+0052 LATIN CAPITAL LETTER
     R character (R) or a U+0072 LATIN SMALL LETTER R character (r),
     then advance <var title="">position</var> to the next
     character. Otherwise, jump to the last step.</p></li>

     <li><p>If the character in <var title="">input</var> pointed to
     by <var title="">position</var> is s U+004C LATIN CAPITAL LETTER
     L character (L) or a U+006C LATIN SMALL LETTER L character (l),
     then advance <var title="">position</var> to the next
     character. Otherwise, jump to the last step.</p></li>

     <li><p><a href="common-microsyntaxes.html#skip-whitespace">Skip whitespace</a>.</p></li>

     <li><p>If the character in <var title="">input</var> pointed to
     by <var title="">position</var> is a U+003D EQUALS SIGN ("<code title="">=</code>"), then advance <var title="">position</var> to
     the next character. Otherwise, jump to the last step.</p></li>

     <li><p><a href="common-microsyntaxes.html#skip-whitespace">Skip whitespace</a>.</p></li>

     <li><p>If the character in <var title="">input</var> pointed to
     by <var title="">position</var> is either a U+0027 APOSTROPHE
     character (') or U+0022 QUOTATION MARK character ("), then let
     <var title="">quote</var> be that character, and advance <var title="">position</var> to the next character. Otherwise, let
     <var title="">quote</var> be the empty string.</p></li>

     <li><p>Let <var title="">url</var> be equal to the substring of
     <var title="">input</var> from the character at <var title="">position</var> to the end of the string.</p></li>

     <li><p>If <var title="">quote</var> is not the empty string, and
     there is a character in <var title="">url</var> equal to <var title="">quote</var>, then truncate <var title="">url</var> at
     that character, so that it and all subsequent characters are
     removed.</p>

     </li><li><p>Strip any trailing <a href="common-microsyntaxes.html#space-character" title="space character">space
     characters</a> from the end of <var title="">url</var>.</p></li>

     <li><p>Strip any U+0009 CHARACTER TABULATION (tab), U+000A LINE
     FEED (LF), and U+000D CARRIAGE RETURN (CR) characters from <var title="">url</var>.</p></li>

     <li><p><a href="urls.html#resolve-a-url" title="resolve a url">Resolve</a> the <var title="">url</var> value to an <a href="urls.html#absolute-url">absolute URL</a>,
     relative to the <code><a href="#the-meta-element">meta</a></code> element. If this fails, abort
     these steps.</p></li>

     <li>

      <p>Perform one or more of the following steps:</p>

      <ul><li>

        <p>After the refresh has come due (as defined below), if the
        user has not canceled the redirect and if the
        <code><a href="#the-meta-element">meta</a></code> element's <code><a href="infrastructure.html#document">Document</a></code>'s
        <a href="browsers.html#browsing-context">browsing context</a> did not have the <a href="the-iframe-element.html#sandboxed-automatic-features-browsing-context-flag">sandboxed
        automatic features browsing context flag</a> set when the
        <code><a href="infrastructure.html#document">Document</a></code> was created, <a href="history.html#navigate" title="navigate">navigate</a> the
        <code><a href="infrastructure.html#document">Document</a></code>'s <a href="browsers.html#browsing-context">browsing context</a> to <var title="">url</var>, with <a href="history.html#replacement-enabled">replacement enabled</a>, and
        with the <code><a href="infrastructure.html#document">Document</a></code>'s <a href="browsers.html#browsing-context">browsing context</a>
        as the <a href="history.html#source-browsing-context">source browsing context</a>.</p>

        <p>For the purposes of the previous paragraph, a refresh is
        said to have come due as soon as the <em>later</em> of the
        following two conditions occurs:</p>

        <ul><li>At least <var title="">time</var> seconds have elapsed
         since the document has <a href="the-end.html#completely-loaded">completely loaded</a>,
         adjusted to take into account user or user agent
         preferences.</li>


         <li>At least <var title="">time</var> seconds have elapsed
         since the <code><a href="#the-meta-element">meta</a></code> element was <a href="infrastructure.html#insert-an-element-into-a-document" title="insert
         an element into a document">inserted into the
         <code>Document</code></a>, adjusted to take into account
         user or user agent preferences.</li>


        </ul></li>

       <li><p>Provide the user with an interface that, when selected,
       <a href="history.html#navigate" title="navigate">navigates</a> a <a href="browsers.html#browsing-context">browsing context</a> to <var title="">url</var>, with the document's browsing context as the
       <a href="history.html#source-browsing-context">source browsing context</a>.</p></li>

       <li><p>Do nothing.</p></li>

      </ul><p>In addition, the user agent may, as with anything, inform the
      user of any and all aspects of its operation, including the
      state of any timers, the destinations of any timed redirects,
      and so forth.</p>

     </li>

    </ol></div>

    <p>For <code><a href="#the-meta-element">meta</a></code> elements with an <code title="attr-meta-http-equiv"><a href="#attr-meta-http-equiv">http-equiv</a></code> attribute in the
    <a href="#attr-meta-http-equiv-refresh" title="attr-meta-http-equiv-refresh">Refresh state</a>,
    the <code title="attr-meta-content"><a href="#attr-meta-content">content</a></code> attribute must
    have a value consisting either of:</p>

    <ul><li>just a <a href="common-microsyntaxes.html#valid-non-negative-integer">valid non-negative integer</a>, or</li>

     <li>a <a href="common-microsyntaxes.html#valid-non-negative-integer">valid non-negative integer</a>, followed by a
     U+003B SEMICOLON character (;), followed by one or more <a href="common-microsyntaxes.html#space-character" title="space character">space characters</a>, followed by a
     substring that is an <a href="infrastructure.html#ascii-case-insensitive">ASCII case-insensitive</a> match
     for the string "<code title="">URL</code>", followed by a U+003D
     EQUALS SIGN character (=), followed by a <a href="urls.html#valid-url">valid URL</a>
     that does not start with a literal U+0027 APOSTROPHE (') or
     U+0022 QUOTATION MARK (") character.</li>

    </ul><p>In the former case, the integer represents a number of seconds
    before the page is to be reloaded; in the latter case the integer
    represents a number of seconds before the page is to be replaced
    by the page at the given <a href="urls.html#url">URL</a>.</p>

    <div class="example">

     <p>A news organization's front page could include the following
     markup in the page's <code><a href="#the-head-element">head</a></code> element, to ensure that
     the page automatically reloads from the server every five
     minutes:</p>

     <pre>&lt;meta http-equiv="Refresh" content="300"&gt;</pre>

    </div>

    <div class="example">

     <p>A sequence of pages could be used as an automated slide show
     by making each page refresh to the next page in the sequence,
     using markup such as the following:</p>

     <pre>&lt;meta http-equiv="Refresh" content="20; URL=page4.html"&gt;</pre>

    </div>

   </dd>

   <dt class="impl"><dfn id="attr-meta-http-equiv-set-cookie" title="attr-meta-http-equiv-set-cookie">Cookie setter</dfn> (<code title="">http-equiv="set-cookie"</code>)

   </dt><dd class="impl">

    <p>This pragma sets an HTTP cookie. <a href="references.html#refsCOOKIES">[COOKIES]</a></p>

    <p>It is non-conforming. Real HTTP headers should be used instead.</p>

    <ol><li><p>If the <code><a href="#the-meta-element">meta</a></code> element has no <code title="attr-meta-content"><a href="#attr-meta-content">content</a></code> attribute, or if that
     attribute's value is the empty string, then abort these
     steps.</p></li>

     <li><p><a href="webappapis.html#obtain-the-storage-mutex">Obtain the storage mutex</a>.</p></li>

     <li><p>Act as if <span title="receives a
     set-cookie-string">receiving a set-cookie-string</span> for
     <a href="dom.html#the-document-s-address">the document's address</a> via a "non-HTTP" API,
     consisting of the value of the element's <code title="attr-meta-content"><a href="#attr-meta-content">content</a></code> attribute encoded as
     UTF-8. <a href="references.html#refsCOOKIES">[COOKIES]</a> <a href="references.html#refsRFC3629">[RFC3629]</a></p></li>

    </ol></dd>

  </dl><p>There must not be more than one <code><a href="#the-meta-element">meta</a></code> element with
  any particular state in the document at a time.</p><h5 id="other-pragma-directives"><span class="secno">4.2.5.4 </span>Other pragma directives</h5><p><dfn id="concept-http-equiv-extensions" title="concept-http-equiv-extensions">Extensions to the
  predefined set of pragma directives</dfn> may, under certain
  conditions, be registered in the <a href="http://wiki.whatwg.org/wiki/PragmaExtensions">WHATWG Wiki
  PragmaExtensions page</a>. <a href="references.html#refsWHATWGWIKI">[WHATWGWIKI]</a></p><p>Such extensions must use a name that is identical to an HTTP
  header registered in the Permanent Message Header Field Registry,
  and must have behavior identical to that described for the HTTP
  header. <a href="references.html#refsIANAPERMHEADERS">[IANAPERMHEADERS]</a></p><p>Pragma directives corresponding to headers describing metadata,
  or not requiring specific user agent processing, must not be
  registered; instead, use <a href="#concept-meta-extensions" title="concept-meta-extensions">metadata names</a>. Pragma
  directives corresponding to headers that affect the HTTP processing
  model (e.g. caching) must not be registered, as they would result in
  HTTP-level behavior being different for user agents that implement
  HTML than for user agents that do not.</p><p>Anyone is free to edit the WHATWG Wiki PragmaExtensions page at
  any time to add a pragma directive satisfying these conditions. Such
  registrations must specify the following information:</p><dl><dt>Keyword</dt>

   <dd><p>The actual name being defined. The name must match a
   previously-registered HTTP name with the same
   requirements.</p></dd>


   <dt>Brief description</dt>

   <dd><p>A short non-normative description of the purpose of the
   pragma directive.</p></dd>


   <dt>Specification</dt>

   <dd>A link to the specification defining the corresponding HTTP
   header.</dd>

  </dl><div class="impl">

  <p>Conformance checkers must use the information given on the WHATWG
  Wiki PragmaExtensions page to establish if a value is allowed or
  not: values defined in this specification or listed on the
  aforementioned page must be accepted, whereas values not listed in
  either this specification or on the aforementioned page must be
  rejected as invalid. Conformance checkers may cache this information
  (e.g. for performance reasons or to avoid the use of unreliable
  network connectivity).</p>

  </div><h5 id="charset"><span class="secno">4.2.5.5 </span>Specifying the document's character encoding</h5><p>A <dfn id="character-encoding-declaration">character encoding declaration</dfn> is a mechanism by
  which the character encoding used to store or transmit a document is
  specified.</p><p>The following restrictions apply to character encoding
  declarations:</p><ul><li>The character encoding name given must be the name of the
   character encoding used to serialize the file.</li>

   <li>The value must be a valid character encoding name, and must be
   an <a href="infrastructure.html#ascii-case-insensitive">ASCII case-insensitive</a> match for the
   <a href="infrastructure.html#preferred-mime-name">preferred MIME name</a> for that encoding. <a href="references.html#refsIANACHARSET">[IANACHARSET]</a></li>

   <li>The character encoding declaration must be serialized without
   the use of <a href="syntax.html#syntax-charref" title="syntax-charref">character references</a>
   or character escapes of any kind.</li>

   <li id="charset1024"><span id="charset512" title="">The element
   containing the character encoding declaration must be serialized
   completely within the first 1024 bytes of the document.</span></li>


  </ul><p>In addition, due to a number of restrictions on <code><a href="#the-meta-element">meta</a></code>
  elements, there can only be one <code><a href="#the-meta-element">meta</a></code>-based character
  encoding declaration per document.</p><p>If an <a href="dom.html#html-documents" title="HTML documents">HTML document</a> does not
  start with a BOM, and if its encoding is not explicitly given by
  <a href="fetching-resources.html#content-type" title="Content-Type">Content-Type metadata</a>, and the
  document is not <a href="the-iframe-element.html#an-iframe-srcdoc-document">an <code>iframe</code> <code title="attr-iframe-srcdoc">srcdoc</code> document</a>, then the
  character encoding used must be an <a href="infrastructure.html#ascii-compatible-character-encoding">ASCII-compatible character
  encoding</a>, and, in addition, if that encoding isn't US-ASCII
  itself, then the encoding must be specified using a
  <code><a href="#the-meta-element">meta</a></code> element with a <code title="attr-meta-charset"><a href="#attr-meta-charset">charset</a></code> attribute or a
  <code><a href="#the-meta-element">meta</a></code> element with an <code title="attr-meta-http-equiv"><a href="#attr-meta-http-equiv">http-equiv</a></code> attribute in the
  <a href="#attr-meta-http-equiv-content-type" title="attr-meta-http-equiv-content-type">Encoding declaration
  state</a>.</p><p>If the document is <a href="the-iframe-element.html#an-iframe-srcdoc-document">an <code>iframe</code> <code title="attr-iframe-srcdoc">srcdoc</code> document</a>, the
  document must not have a <a href="#character-encoding-declaration">character encoding
  declaration</a>. (In this case, the source is already decoded,
  since it is part of the document that contained the
  <code><a href="the-iframe-element.html#the-iframe-element">iframe</a></code>.)</p><p>If an <a href="dom.html#html-documents" title="HTML documents">HTML document</a> contains
  a <code><a href="#the-meta-element">meta</a></code> element with a <code title="attr-meta-charset"><a href="#attr-meta-charset">charset</a></code> attribute or a
  <code><a href="#the-meta-element">meta</a></code> element with an <code title="attr-meta-http-equiv"><a href="#attr-meta-http-equiv">http-equiv</a></code> attribute in the
  <a href="#attr-meta-http-equiv-content-type" title="attr-meta-http-equiv-content-type">Encoding declaration
  state</a>, then the character encoding used must be an
  <a href="infrastructure.html#ascii-compatible-character-encoding">ASCII-compatible character encoding</a>.</p><p>Authors are encouraged to use UTF-8. Conformance checkers may
  advise authors against using legacy encodings. <a href="references.html#refsRFC3629">[RFC3629]</a></p><div class="impl">

  <p>Authoring tools should default to using UTF-8 for newly-created
  documents. <a href="references.html#refsRFC3629">[RFC3629]</a></p>

  </div><p>Encodings in which a series of bytes in the range 0x20 to 0x7E
  can encode characters other than the corresponding characters in the
  range U+0020 to U+007E represent a potential security vulnerability:
  a user agent that does not support the encoding (or does not support
  the label used to declare the encoding, or does not use the same
  mechanism to detect the encoding of unlabelled content as another
  user agent) might end up interpreting technically benign plain text
  content as HTML tags and JavaScript. For example, this applies to
  encodings in which the bytes corresponding to "<code title="">&lt;script&gt;</code>" in ASCII can encode a different
  string. Authors should not use such encodings, which are known to
  include JIS_C6226-1983,
  JIS_X0212-1990, HZ-GB-2312, JOHAB  (Windows code
  page 1361), encodings based on ISO-2022, and encodings based on EBCDIC. Furthermore, authors must not
  use the CESU-8, UTF-7, BOCU-1 and SCSU encodings, which also fall
  into this category, because these encodings were never intended for
  use for Web content.
  <a href="references.html#refsRFC1345">[RFC1345]</a>
  <a href="references.html#refsRFC1842">[RFC1842]</a><!-- HZ-GB-2312 -->
  <a href="references.html#refsRFC1468">[RFC1468]</a><!-- ISO-2022-JP -->
  <a href="references.html#refsRFC2237">[RFC2237]</a><!-- ISO-2022-JP-1 -->
  <a href="references.html#refsRFC1554">[RFC1554]</a><!-- ISO-2022-JP-2 -->
  <a href="references.html#refsRFC1922">[RFC1922]</a>
  <a href="references.html#refsRFC1557">[RFC1557]</a><!-- ISO-2022-KR -->
  <a href="references.html#refsCESU8">[CESU8]</a>
  <a href="references.html#refsUTF7">[UTF7]</a>
  <a href="references.html#refsBOCU1">[BOCU1]</a>
  <a href="references.html#refsSCSU">[SCSU]</a>

  </p><p>Authors should not use UTF-32, as the encoding detection
  algorithms described in this specification intentionally do not
  distinguish it from UTF-16. <a href="references.html#refsUNICODE">[UNICODE]</a></p><p class="note">Using non-UTF-8 encodings can have unexpected
  results on form submission and URL encodings, which use the
  <a href="dom.html#document-s-character-encoding">document's character encoding</a> by default.</p><p>In XHTML, the XML declaration should be used for inline character
  encoding information, if necessary.</p><div class="example">

   <p>In HTML, to declare that the character encoding is UTF-8, the
   author could include the following markup near the top of the
   document (in the <code><a href="#the-head-element">head</a></code> element):</p>

   <pre>&lt;meta charset="utf-8"&gt;</pre>

   <p>In XML, the XML declaration would be used instead, at the very
   top of the markup:</p>

   <pre>&lt;?xml version="1.0" encoding="utf-8"?&gt;</pre>

  </div><h4 id="the-style-element"><span class="secno">4.2.6 </span>The <dfn><code>style</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
   <dd><a href="content-models.html#metadata-content">Metadata content</a>.</dd>
   <dd>If the <code title="attr-style-scoped"><a href="#attr-style-scoped">scoped</a></code> attribute is present: <a href="content-models.html#flow-content">flow content</a>.</dd>
   <dt>Contexts in which this element can be used:</dt>
   <dd>If the <code title="attr-style-scoped"><a href="#attr-style-scoped">scoped</a></code> attribute is absent: where <a href="content-models.html#metadata-content">metadata content</a> is expected.</dd>
   <dd>If the <code title="attr-style-scoped"><a href="#attr-style-scoped">scoped</a></code> attribute is absent: in a <code><a href="scripting-1.html#the-noscript-element">noscript</a></code> element that is a child of a <code><a href="#the-head-element">head</a></code> element.</dd>
   <dd>If the <code title="attr-style-scoped"><a href="#attr-style-scoped">scoped</a></code> attribute is present: where <a href="content-models.html#flow-content">flow content</a> is expected, but before any other <a href="content-models.html#flow-content">flow content</a> other than other <code><a href="#the-style-element">style</a></code> elements and <a href="content-models.html#inter-element-whitespace">inter-element whitespace</a>.</dd>
   <dt>Content model:</dt>
   <dd>Depends on the value of the <code title="attr-style-type"><a href="#attr-style-type">type</a></code> attribute, but must match requirements described in prose below.</dd>
   <dt>Content attributes:</dt>
   <dd><a href="elements.html#global-attributes">Global attributes</a></dd>
   <dd><code title="attr-style-media"><a href="#attr-style-media">media</a></code></dd>
   <dd><code title="attr-style-type"><a href="#attr-style-type">type</a></code></dd>
   <dd><code title="attr-style-scoped"><a href="#attr-style-scoped">scoped</a></code></dd>
   <dd>Also, the <code title="attr-style-title"><a href="#attr-style-title">title</a></code> attribute has special semantics on this element.</dd>
   <dt>DOM interface:</dt>
   <dd>
<pre class="idl">interface <dfn id="htmlstyleelement">HTMLStyleElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> {
           attribute boolean <a href="#dom-style-disabled" title="dom-style-disabled">disabled</a>;
           attribute DOMString <a href="#dom-style-media" title="dom-style-media">media</a>;
           attribute DOMString <a href="#dom-style-type" title="dom-style-type">type</a>;
           attribute boolean <a href="#dom-style-scoped" title="dom-style-scoped">scoped</a>;
};
<a href="#htmlstyleelement">HTMLStyleElement</a> implements <span>LinkStyle</span>;</pre>
   </dd>
  </dl><p>The <code><a href="#the-style-element">style</a></code> element allows authors to embed style
  information in their documents. The <code><a href="#the-style-element">style</a></code> element is
  one of several inputs to the <a href="#styling">styling processing
  model</a>. The element does not <a href="rendering.html#represents" title="represents">represent</a> content for the user.</p><p>The <dfn id="attr-style-type" title="attr-style-type"><code>type</code></dfn>
  attribute gives the styling language. If the attribute is present,
  its value must be a <a href="infrastructure.html#valid-mime-type">valid MIME type</a> that designates a
  styling language. The <code title="">charset</code> parameter must
  not be specified. The default value for the <code title="attr-style-type"><a href="#attr-style-type">type</a></code> attribute, which is used if the
  attribute is absent, is "<code title="">text/css</code>". <a href="references.html#refsRFC2318">[RFC2318]</a></p><div class="impl">


  <p>When examining types to determine if they support the language,
  user agents must not ignore unknown MIME parameters &#8212; types
  with unknown parameters must be assumed to be unsupported. The <code title="">charset</code> parameter must be treated as an unknown
  parameter for the purpose of comparing <a href="infrastructure.html#mime-type" title="MIME type">MIME
  types</a> here.</p>

  </div><p>The <dfn id="attr-style-media" title="attr-style-media"><code>media</code></dfn>
  attribute says which media the styles apply to. The value must be a
  <a href="common-microsyntaxes.html#valid-media-query">valid media query</a>.  <span class="impl">The user agent
  must apply the styles when the <code title="attr-style-media"><a href="#attr-style-media">media</a></code> attribute's value
  <a href="common-microsyntaxes.html#matches-the-environment">matches the environment</a> and the other relevant
  conditions apply, and must not apply them otherwise.</span></p><div class="impl">

  <p class="note">The styles might be further limited in scope,
  e.g. in CSS with the use of <code title="">@media</code>
  blocks. This specification does not override such further
  restrictions or requirements.</p>
  </div><p id="style-default-media">The default, if the <code title="attr-style-media"><a href="#attr-style-media">media</a></code> attribute is omitted, is
  "<code title="">all</code>", meaning that by default styles apply to
  all media.</p><p>The <dfn id="attr-style-scoped" title="attr-style-scoped"><code>scoped</code></dfn>
  attribute is a <a href="common-microsyntaxes.html#boolean-attribute">boolean attribute</a>. If set, it indicates
  that the styles are intended just for the subtree rooted at the
  <code><a href="#the-style-element">style</a></code> element's parent element, as opposed to the whole
  <code><a href="infrastructure.html#document">Document</a></code>.</p><div class="impl">

  <p>If the <code title="attr-style-scoped"><a href="#attr-style-scoped">scoped</a></code> attribute is
  present, then the user agent must apply the specified style
  information only to the <code><a href="#the-style-element">style</a></code> element's parent element
  (if any), and that element's child nodes. Otherwise, the specified
  styles must, if applied, be applied to the entire document.</p>

  <p>For scoped CSS resources, the effect of @-rules must be scoped to
  the scoped sheet and its subresources, even if the @-rule in
  question would ordinarily apply to all style sheets that affect the
  <code><a href="infrastructure.html#document">Document</a></code>. Any '@page' rules in scoped CSS resources
  must be ignored.</p>

  <p class="example">For example, an '@font-face' rule defined in a
  scoped style sheet would only define the font for the purposes of
  font rules in the scoped section; style sheets outside the scoped
  section using the same font name would not end up using that
  embedded font.</p>

  </div><p id="title-on-style">The <dfn id="attr-style-title" title="attr-style-title"><code>title</code></dfn> attribute on
  <code><a href="#the-style-element">style</a></code> elements defines <span>alternative style sheet
  sets</span>. If the <code><a href="#the-style-element">style</a></code> element has no <code title="attr-style-title"><a href="#attr-style-title">title</a></code> attribute, then it has no
  title; the <code title="attr-title"><a href="elements.html#the-title-attribute">title</a></code> attribute of
  ancestors does not apply to the <code><a href="#the-style-element">style</a></code> element. <a href="references.html#refsCSSOM">[CSSOM]</a></p><p class="note">The <code title="attr-style-title"><a href="#attr-style-title">title</a></code>
  attribute on <code><a href="#the-style-element">style</a></code> elements, like the <code title="attr-link-title"><a href="#attr-link-title">title</a></code> attribute on <code><a href="#the-link-element">link</a></code>
  elements, differs from the global <code title="attr-title"><a href="elements.html#the-title-attribute">title</a></code> attribute in that a
  <code><a href="#the-style-element">style</a></code> block without a title does not inherit the title
  of the parent element: it merely has no title.</p><p>The <code><a href="infrastructure.html#textcontent">textContent</a></code> of a <code><a href="#the-style-element">style</a></code> element must
  match the <code title="">style</code> production in the following
  ABNF, the character set for which is Unicode. <a href="references.html#refsABNF">[ABNF]</a></p><pre>style         = no-c-start *( c-start no-c-end c-end no-c-start )
no-c-start    = &lt;any string that doesn't contain a substring that matches c-start &gt;
c-start       = "&lt;!--"
no-c-end      = &lt;any string that doesn't contain a substring that matches c-end &gt;
c-end         = "--&gt;"</pre><div class="impl">

  <p>All descendant elements must be processed, according to their
  semantics, before the <code><a href="#the-style-element">style</a></code> element itself is
  evaluated. For styling languages that consist of pure text (as
  opposed to XML), user agents must evaluate <code><a href="#the-style-element">style</a></code>
  elements by passing the concatenation of the contents of all the
  <a href="infrastructure.html#text-node" title="text node">text nodes</a> that are direct children
  of the <code><a href="#the-style-element">style</a></code> element (not any other nodes such as
  comments or elements), in <a href="infrastructure.html#tree-order">tree order</a>, to the style
  system. For XML-based styling languages, user agents must pass all
  the child nodes of the <code><a href="#the-style-element">style</a></code> element to the style
  system.</p>

  <p>All <a href="urls.html#url" title="URL">URLs</a> found by the styling language's
  processor must be <a href="urls.html#resolve-a-url" title="resolve a url">resolved</a>,
  relative to the element (or as defined by the styling language),
  when the processor is invoked.</p>


  <p>Once the attempts to obtain the style sheet's <a href="infrastructure.html#critical-subresources">critical
  subresources</a>, if any, are complete, or, if the style sheet
  has no <a href="infrastructure.html#critical-subresources">critical subresources</a>, once the style sheet has
  been parsed and processed, the user agent must, if the loads were
  successful or there were none, <a href="webappapis.html#queue-a-task">queue a task</a> to
  <a href="webappapis.html#fire-a-simple-event">fire a simple event</a> named <code title="event-load">load</code> at the <code><a href="#the-style-element">style</a></code> element,
  or, if one of the style sheet's <a href="infrastructure.html#critical-subresources">critical subresources</a>
  failed to completely load for any reason (e.g. DNS error, HTTP 404
  response, a connection being prematurely closed, unsupported
  Content-Type), <a href="webappapis.html#queue-a-task">queue a task</a> to <a href="webappapis.html#fire-a-simple-event">fire a simple
  event</a> named <code title="event-error">error</code> at the
  <code><a href="#the-style-element">style</a></code> element. Non-network errors in processing the
  style sheet or its subresources (e.g. CSS parse errors, PNG decoding
  errors) are not failures for the purposes of this paragraph.</p>

  <p>The <a href="webappapis.html#task-source">task source</a> for these <a href="webappapis.html#concept-task" title="concept-task">tasks</a> is the <a href="webappapis.html#dom-manipulation-task-source">DOM manipulation task
  source</a>.</p>

  <p>The element must <a href="the-end.html#delay-the-load-event">delay the load event</a> of the
  element's document until all the attempts to obtain the style
  sheet's <a href="infrastructure.html#critical-subresources">critical subresources</a>, if any, are
  complete.</p>

  </div><p class="note">This specification does not specify a style system,
  but CSS is expected to be supported by most Web browsers. <a href="references.html#refsCSS">[CSS]</a></p><div class="impl">

  <p>The <dfn id="dom-style-media" title="dom-style-media"><code>media</code></dfn>, <dfn id="dom-style-type" title="dom-style-type"><code>type</code></dfn> and <dfn id="dom-style-scoped" title="dom-style-scoped"><code>scoped</code></dfn> IDL attributes
  must <a href="common-dom-interfaces.html#reflect">reflect</a> the respective content attributes of the
  same name.</p>

  </div><p>The <dfn id="dom-style-disabled" title="dom-style-disabled"><code>disabled</code></dfn>
  IDL attribute behaves as defined <a href="#dom-linkstyle-disabled" title="dom-linkstyle-disabled">for the alternative style sheets
  DOM</a>.</p><p>The <code>LinkStyle</code> interface is also implemented by
  this element; the <a href="#styling">styling processing model</a> defines
  how. <a href="references.html#refsCSSOM">[CSSOM]</a></p><div class="example">

   <p>The following document has its emphasis styled as bright red
   text rather than italics text, while leaving titles of works and
   Latin words in their default italics. It shows how using
   appropriate elements enables easier restyling of documents.</p>

   <pre>&lt;!DOCTYPE html&gt;
&lt;html lang="en-US"&gt;
 &lt;head&gt;
  &lt;title&gt;My favorite book&lt;/title&gt;
  &lt;style&gt;
   body { color: black; background: white; }
   em { font-style: normal; color: red; }
  &lt;/style&gt;
 &lt;/head&gt;
 &lt;body&gt;
  &lt;p&gt;My &lt;em&gt;favorite&lt;/em&gt; book of all time has &lt;em&gt;got&lt;/em&gt; to be
  &lt;cite&gt;A Cat's Life&lt;/cite&gt;. It is a book by P. Rahmel that talks
  about the &lt;i lang="la"&gt;Felis Catus&lt;/i&gt; in modern human society.&lt;/p&gt;
 &lt;/body&gt;
&lt;/html&gt;</pre>

  </div><h4 id="styling"><span class="secno">4.2.7 </span><dfn title="styling processing model">Styling</dfn></h4><p>The <code><a href="#the-link-element">link</a></code> and <code><a href="#the-style-element">style</a></code> elements can provide
  styling information for the user agent to use when rendering the
  document. The DOM Styling specification specifies what styling
  information is to be used by the user agent and how it is to be
  used. <a href="references.html#refsCSSOM">[CSSOM]</a></p><p>The <code><a href="#the-style-element">style</a></code> and <code><a href="#the-link-element">link</a></code> elements implement
  the <code>LinkStyle</code> interface. <a href="references.html#refsCSSOM">[CSSOM]</a></p><div class="impl">

  <p>For <code><a href="#the-style-element">style</a></code> elements, if the user agent does not
  support the specified styling language, then the <code title="dom-LinkStyle-sheet">sheet</code> attribute of the element's
  <code>LinkStyle</code> interface must return null. Similarly,
  <code><a href="#the-link-element">link</a></code> elements that do not represent <a href="links.html#link-type-stylesheet" title="rel-stylesheet">external resource links that contribute to
  the styling processing model</a> (i.e. that do not have a <code title="rel-stylesheet"><a href="links.html#link-type-stylesheet">stylesheet</a></code> keyword in their <code title="attr-link-rel"><a href="#attr-link-rel">rel</a></code> attribute), and <code><a href="#the-link-element">link</a></code>
  elements whose specified resource has not yet been fetched, or is
  not in a supported styling language, must have their
  <code>LinkStyle</code> interface's <code title="dom-LinkStyle-sheet">sheet</code> attribute return null.</p>

  <p>Otherwise, the <code>LinkStyle</code> interface's <code title="dom-LinkStyle-sheet">sheet</code> attribute must return a
  <code>StyleSheet</code> object with the following properties: <a href="references.html#refsCSSOM">[CSSOM]</a></p>

  <dl><dt>The style sheet type</dt>

   <dd><p>The style sheet type must be the same as the style's specified
   type. For <code><a href="#the-style-element">style</a></code> elements, this is the same as the
   <code title="attr-style-type"><a href="#attr-style-type">type</a></code> content attribute's
   value, or <code title="">text/css</code> if that is omitted. For
   <code><a href="#the-link-element">link</a></code> elements, this is the <a href="fetching-resources.html#content-type" title="Content-Type">Content-Type metadata of the specified
   resource</a>.</p></dd>

   <dt>The style sheet location</dt>

   <dd><p>For <code><a href="#the-link-element">link</a></code> elements, the location must be the
   result of <a href="urls.html#resolve-a-url" title="resolve a url">resolving</a> the
   <a href="urls.html#url">URL</a> given by the element's <code title="attr-link-href"><a href="#attr-link-href">href</a></code> content attribute, relative to
   the element, or the empty string if that fails. For
   <code><a href="#the-style-element">style</a></code> elements, there is no location.</p></dd>
   <dt>The style sheet media</dt>

   <dd><p>The media must be the same as the value of the element's
   <code title="">media</code> content attribute, or the empty string,
   if the attribute is omitted.</p></dd>

   <dt>The style sheet title</dt>

   <dd><p>The title must be the same as the value of the element's
   <code title="dom-title"><a href="elements.html#dom-title">title</a></code> content attribute, if the
   attribute is present and has a non-empty value. If the attribute is
   absent or its value is the empty string, then the style sheet does
   not have a title (it is the empty string). The title is used for
   defining <span>alternative style sheet sets</span>.</p></dd>

   <dt>The style sheet alternate flag</dt>

   <dd><p>For <code><a href="#the-link-element">link</a></code> elements, true if <a href="links.html#the-link-is-an-alternative-stylesheet">the link is an
   alternative stylesheet</a>. In all other cases, false.</p></dd>


  </dl><p>The same object must be returned each time.</p>

  <p>The <dfn id="dom-linkstyle-disabled" title="dom-LinkStyle-disabled"><code>disabled</code></dfn> IDL
  attribute on <code><a href="#the-link-element">link</a></code> and <code><a href="#the-style-element">style</a></code> elements must
  return false and do nothing on setting, if the <code title="dom-linkstyle-sheet">sheet</code> attribute of their
  <code>LinkStyle</code> interface is null. Otherwise, it must return
  the value of the <code>StyleSheet</code> interface's <code title="dom-stylesheet-disabled">disabled</code> attribute on
  getting, and forward the new value to that same attribute on
  setting.</p>


  <p id="alternate-style-sheets">The rules for handling alternative
  style sheets are defined in the CSS object model specification. <a href="references.html#refsCSSOM">[CSSOM]</a></p>

  <hr><p>Style sheets, whether added by a <code><a href="#the-link-element">link</a></code> element, a
  <code><a href="#the-style-element">style</a></code> element, an <code>&lt;?xml-stylesheet&gt;</code> PI,
  an HTTP <code title="http-link">Link:</code> header, or some other
  mechanism, have a <dfn id="style-sheet-ready">style sheet ready</dfn> flag, which is
  initially unset.</p>

  <p>When a style sheet is ready to be applied, its <a href="#style-sheet-ready">style sheet
  ready</a> flag must be set. If the style sheet referenced no
  other resources (e.g. it was an internal style sheet given by a
  <code><a href="#the-style-element">style</a></code> element with no <code title="">@import</code>
  rules), then the style rules must be synchronously made available to
  script; otherwise, the style rules must only be made available to
  script once the <a href="webappapis.html#event-loop">event loop</a> reaches its "update the
  rendering" step.</p>

  <p>A style sheet in the context of the <code><a href="infrastructure.html#document">Document</a></code> of an
  <a href="parsing.html#html-parser">HTML parser</a> or <a href="the-xhtml-syntax.html#xml-parser">XML parser</a> is said to be
  <dfn id="a-style-sheet-that-is-blocking-scripts">a style sheet that is blocking scripts</dfn> if the element was
  created by that <code><a href="infrastructure.html#document">Document</a></code>'s parser, and the element is
  either a <code><a href="#the-style-element">style</a></code> element or a <code><a href="#the-link-element">link</a></code> element
  that was an <a href="links.html#link-type-stylesheet" title="rel-stylesheet">external resource link that
  contributes to the styling processing model</a> when the element
  was created by the parser, and the element's style sheet was enabled
  when the element was created by the parser, and the element's
  <a href="#style-sheet-ready">style sheet ready</a> flag is not yet set, and, the last
  time the <a href="webappapis.html#event-loop">event loop</a> reached step 1, the element was
  <a href="infrastructure.html#in-a-document" title="in a document">in that <code>Document</code></a>,
  and the user agent hasn't given up on that particular style sheet
  yet. A user agent may give up on a style sheet at any time.</p>

  <p>A <code><a href="infrastructure.html#document">Document</a></code> <dfn id="has-a-style-sheet-that-is-blocking-scripts">has a style sheet that is blocking
  scripts</dfn> if there is either <a href="#a-style-sheet-that-is-blocking-scripts">a style sheet that is
  blocking scripts</a> in the context of that
  <code><a href="infrastructure.html#document">Document</a></code>, or if that <code><a href="infrastructure.html#document">Document</a></code> is in a
  <a href="browsers.html#browsing-context">browsing context</a> that has a <a href="browsers.html#parent-browsing-context">parent browsing
  context</a>, and the <a href="browsers.html#active-document">active document</a> of that
  <a href="browsers.html#parent-browsing-context">parent browsing context</a> itself <a href="#has-a-style-sheet-that-is-blocking-scripts">has a style sheet
  that is blocking scripts</a>.</p>

  <p>A <code><a href="infrastructure.html#document">Document</a></code> <dfn id="has-no-style-sheet-that-is-blocking-scripts">has no style sheet that is blocking
  scripts</dfn> if it does not <a href="#has-a-style-sheet-that-is-blocking-scripts" title="has a style sheet that is
  blocking scripts">have a style sheet that is blocking scripts</a>
  as defined in the previous paragraph.</p>

  </div></body></html>