semantics-document-metadata.include

<section>

<h3 id="document-metadata">Document metadata</h3>

<h4 id="the-head-element">The <dfn element><code>head</code></dfn> element</h4>

  <dl class="element">
    <dt><a>Categories</a>:</dt>
    <dd>None.</dd>
    <dt><a>Contexts in which this element can be used</a>:</dt>
    <dd>As the first element in an <{html}> element.</dd>
    <dt><a>Content model</a>:</dt>
    <dd>
      If the document is <a lt="iframe srcdoc document">an <code>iframe</code> <code>srcdoc</code> document</a> or if title
      information is available from a higher-level protocol: Zero or more elements of
      <a>metadata content</a>, of which no more than one is a <{title}> element and no more
      than one is a <{base}> element.
    </dd>
    <dd>
      Otherwise: One or more elements of <a>metadata content</a>, of which exactly one is a
      <{title}> element and no more than one is a <{base}> element.
    </dd>
    <dt><a>Tag omission in text/html</a>:</dt>
    <dd>
      A <{head}> element's <a>start tag</a> may be omitted if the element is empty, or if
      the first thing inside the <{head}> element is an element.
    </dd>
    <dd>
      A <{head}> element's <a>end tag</a> may be omitted if the <{head}> element
      is not immediately followed by a <a>space character</a> or a <a>comment</a>.
    </dd>
    <dt><a>Content attributes</a>:</dt>
    <dd><a>Global attributes</a></dd>
    <dt>Allowed <a href="#aria-role-attribute">ARIA role attribute</a> values:</dt>
    <dd>None</dd>
    <dt>Allowed <a href="#state-and-property-attributes">ARIA state and property attributes</a>:</dt>
    <dd><a>Global aria-* attributes</a></dd>
    <dt><a>DOM interface</a>:</dt>
    <dd>
      <pre class="idl" data-highlight="webidl">
        interface HTMLHeadElement : HTMLElement {};
      </pre>
    </dd>
  </dl>

  The <{head}> element <a>represents</a> a collection of metadata for the {{Document}}.

  <div class="example">
    The collection of metadata in a <{head}> element can be large or small. Here is an
    example of a very short one:

    <pre highlight="html">
      &lt;!doctype html>
      &lt;html lang="en">
        &lt;head>
          &lt;title>A document with a short head&lt;/title>
        &lt;/head>
        &lt;body>
          ...
    </pre>

    Here is an example of a longer one:

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

  <p class="note">
    The <{title}> 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 <{title}> element can be omitted.
  </p>

  <!-- W3C START - DO NOT OVERWRITE-->
  <p class="note">
    It is recommended to keep the usage of attributes and their values defined on the <{head}>
    element to a minimum to allow for proper detection of the <a>character encoding declaration</a>
    within the first 1024 bytes.
  </p>
  <!-- W3C END -->

<h4 id="the-title-element">The <dfn element><code>title</code></dfn> element</h4>

  <dl class="element">
    <dt><a>Categories</a>:</dt>
    <dd><a>Metadata content</a>.</dd>
    <dt><a>Contexts in which this element can be used</a>:</dt>
    <dd>In a <{head}> element containing no other <{title}> elements.</dd>
    <dt><a>Content model</a>:</dt>
    <dd><a>Text</a> that is not <a>inter-element whitespace</a>.</dd>
    <dt><a>Tag omission in text/html</a>:</dt>
    <dd>Neither tag is omissible.</dd>
    <dt><a>Content attributes</a>:</dt>
    <dd><a>Global attributes</a></dd>
    <dt>Allowed <a href="#aria-role-attribute">ARIA role attribute</a> values:</dt>
    <dd>None</dd>
    <dt>Allowed <a href="#state-and-property-attributes">ARIA state and property attributes</a>:</dt>
    <dd><a>Global aria-* attributes</a></dd>
    <dt><a>DOM interface</a>:</dt>
    <dd>
      <pre class="idl" data-highlight="webidl">
        interface HTMLTitleElement : HTMLElement {
          attribute DOMString text;
        };
      </pre>
    </dd>
  </dl>

  The <{title}> element <a>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.

  There must be no more than one <{title}> element per document.

  <p class="note">
    If it's reasonable for the {{Document}} to have no title, then the <code>title</code>
    element is probably not required. See the <{head}> element's content model for a
    description of when the element is required.
  </p>

  <dl class="domintro">
    <dt><var>title</var> . <code>text</code> [ = <var>value</var> ]</dt>
    <dd>
      Returns the <a>child text content</a> of the element.

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

  <div class="impl">
    The IDL attribute <dfn attribute for="HTMLTitleElement"><code>text</code></dfn> must return the
    <a>child text content</a> of the <{title}> element. On
    setting, it must act the same way as the {{Node/textContent}} IDL attribute.
  </div>

  <div class="example">
    Here are some examples of appropriate titles, contrasted with the top-level headings that
    might be used on those same pages.

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

    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:

    <pre highlight="html">
      &lt;title>Dances used during bee mating rituals&lt;/title>
      ...
      &lt;h2>The Dances&lt;/h2>
    </pre>
  </div>

  The string to use as the document's title is given by the <code>document.title</code> IDL
  attribute.

  <div class="impl">
    User agents should use the document's title when referring to the document in their user
    interface. When the contents of a <{title}> element are used in this way,
    <a>the directionality</a> of that <{title}> element should be used to set the
    directionality of the document's title in the user interface.
  </div>

<h4 id="the-base-element">The <dfn element><code>base</code></dfn> element</h4>

  <dl class="element">
    <dt><a>Categories</a>:</dt>
    <dd><a>Metadata content</a>.</dd>
    <dt><a>Contexts in which this element can be used</a>:</dt>
    <dd>In a <{head}> element containing no other <{base}> elements.</dd>
    <dt><a>Content model</a>:</dt>
    <dd><a>Nothing</a>.</dd>
    <dt><a>Tag omission in text/html</a>:</dt>
    <dd>No end tag.</dd>
    <dt><a>Content attributes</a>:</dt>
    <dd><a>Global attributes</a></dd>
    <dd><code>href</code> — <a>Document base URL</a></dd>
    <dd>
      <code>target</code> — Default <a>browsing context</a> for <a>hyperlink</a> <a>navigation</a>
      and [[#forms-form-submission]]
    </dd>
    <dt>Allowed <a href="#aria-role-attribute">ARIA role attribute</a> values:</dt>
    <dd>None</dd>
    <dt>Allowed <a href="#state-and-property-attributes">ARIA state and property attributes</a>:</dt>
    <dd><a>Global aria-* attributes</a>.</dd>
    <dt><a>DOM interface</a>:</dt>
    <dd>
      <pre class="idl" data-highlight="webidl">
        interface HTMLBaseElement : HTMLElement {
          attribute DOMString href;
          attribute DOMString target;
        };
      </pre>
    </dd>
  </dl>

  The <{base}> element allows authors to specify the <a>document base URL</a> for the
  purposes of [[#parsing-urls]], and the name of the default <a>browsing context</a>
  for the purposes of <a>following hyperlinks</a>. The element does not <a>represent</a> any content
  beyond this information.

  There must be no more than one <{base}> element per document.

  A <{base}> element must have either an <{base/href}> attribute, a <code>target</code>
  attribute, or both.

  The <dfn element-attr for="base"><code>href</code></dfn> content attribute, if specified, must
  contain a <a>valid URL potentially surrounded by spaces</a>.

  A <{base}> element, if it has an <{base/href}> attribute, must come before any other elements in
  the tree that have attributes defined as taking <a for="url">URLs</a>.

  <div class="impl">
    <p class="note">
      If there are multiple <{base}> elements with <{base/href}> attributes, all but
      the first are ignored.
    </p>
  </div>

  The <dfn element-attr for="base"><code>target</code></dfn> attribute, if specified, must contain a <a>valid browsing
  context name or keyword</a>, which specifies which <a>browsing context</a> is to be used as the
  default when <a>hyperlinks</a> and <a>forms</a> in the {{Document}} cause
  <a>navigation</a>.

  A <{base}> element, if it has a <code>target</code> attribute, must come before any
  elements in the tree that represent <a>hyperlinks</a>.

  <div class="impl">
    <p class="note">
      If there are multiple <{base}> elements with <code>target</code> attributes, all but
      the first are ignored.
    </p>

    A <{base}> element that is the first <{base}> element with an
    <{base/href}> content attribute <a>in a document tree</a> has a
    <dfn>frozen base URL</dfn>. The <a>frozen base URL</a> must be <a>immediately</a>
    <a lt="set the frozen base URL">set</a> for an element whenever any of the following situations
    occur:

    * The <{base}> element becomes the first <{base}> element in <a>tree order</a>
        with an <{base/href}> content attribute in its {{Document}}.
    * The <{base}> element is the first <{base}> element in <a>tree order</a> with
        an <{base/href}> content attribute in its {{Document}}, and its
        <{base/href}> content attribute is changed.

    To <dfn>set the frozen base URL</dfn>, for an element <var>element</var>:

    1. Let <var>document</var> be <var>element</var>'s <a>node document</a>.
    2. Let <var>urlRecord</var> be the result of <a>parsing</a> the value of
        <var>element</var>'s <{base/href}> content attribute with <var>document</var>'s
        <a>fallback base URL</a>, and <var>document</var>'s <a>character encoding</a>. (Thus the
        <{base}> element isn't affected by itself.)
    3. Set <var>elements</var>'s <a>frozen base URL</a> to <var>document</var>'s
        <a>fallback base URL</a>, if <var>urlRecord</var> is failure or running
        <a>Is base allowed for Document?</a> on the <a>resulting URL record</a> and
        <var>document</var> returns "<code>Blocked</code>", and to <var>urlRecord</var> otherwise.

    The <dfn attribute for="HTMLBaseElement"><code>href</code></dfn> IDL attribute, on getting, must
    return the result of running the following algorithm:

    1. Let <var>document</var> be <var>element</var>'s <a>node document</a>.
    2. Let <var>url</var> be the value of the <{base/href}> attribute of the <{base}> element, if it
        has one, and the empty string otherwise.
    3. Let <var>urlRecord</var> be the result of <a>parsing</a> <var>url</var> with
        <var>document</var>'s <a>fallback base url</a>, and <var>document</var>'s
        <a>character encoding</a>. (Thus, the <{base}> element isn't affected by other <{base}>
        elements or itself).
    4. If <var>urlRecord</var> is failure, return <var>url</var>.
    5. Return the <a>serialization</a> of <var>urlRecord</var>.

    The {{HTMLBaseElement/href}} IDL attribute, on setting, must set the <{base/href}> content
    attribute to the given new value.

    The <dfn attribute for="HTMLBaseElement"><code>target</code></dfn> IDL attribute must
    <a>reflect</a> the content attribute of the same name.
  </div>

  <div class="example">
    In this example, a <{base}> element is used to set the <a>document base URL</a>:

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

    The link in the above example would be a link to
    "<code>https://www.example.com/news/archives.html</code>".
  </div>

<h4 id="the-link-element">The <dfn element><code>link</code></dfn> element</h4>

  <dl class="element">
    <dt><a>Categories</a>:</dt>
    <dd><a>Metadata content</a>.</dd>
    <dd>If the element is <a>allowed in the body</a>: <a>flow content</a>.</dd>
    <dd>If the element is <a>allowed in the body</a>: <a>phrasing content</a>.</dd>
    <dt><a>Contexts in which this element can be used</a>:</dt>
    <dd>Where <a>metadata content</a> is expected.</dd>
    <dd>In a <{noscript}> element that is a child of a <{head}> element.</dd>
    <dd>If the element is <a>allowed in the body</a>: where <a>phrasing content</a> is expected.</dd>
    <dt><a>Content model</a>:</dt>
    <dd><a>Nothing</a>.</dd>
    <dt><a>Tag omission in text/html</a>:</dt>
    <dd>No <a>end tag</a>.</dd>
    <dt><a>Content attributes</a>:</dt>
    <dd><a>Global attributes</a></dd>
    <dd><code>href</code> — Address of the <a>hyperlink</a></dd>
    <dd><code>crossorigin</code> — How the element handles crossorigin requests</dd>
    <dd><{link/rel}> — Relationship of this document (or subsection/topic) to the destination resource</dd>
    <dd><{link/rev}> — <a>Reverse link</a> relationship of the destination resource to this document (or subsection/topic)</dd>
    <dd><code>media</code> — Applicable media</dd>
	<dd><code>nonce</code> — Cryptographic nonce used in Content Security Policy checks [[CSP3]]</dd>
    <dd><code>hreflang</code> — Language of the linked resource</dd>
    <dd><code>type</code> — Hint for the type of the referenced resource</dd>
    <dd><code>sizes</code> — Sizes of the icons (for <{link/rel}>="<code>icon</code>")</dd>
    <dd>
      Also, the <{link/title}> attribute has special semantics on this element:  Title of the
      link; alternative style sheet set name.
    </dd>
    <dt>Allowed <a href="#aria-role-attribute">ARIA role attribute</a> values:</dt>
    <dd><a><code>link</code></a> (default - <a><em>do not set</em></a>).</dd>
    <dt>Allowed <a href="#state-and-property-attributes">ARIA state and property attributes</a>:</dt>
    <dd><a>Global aria-* attributes</a></dd>
    <dd>Any <code>aria-*</code> attributes <a href="#allowed-aria-roles-states-and-properties">applicable to the default or allowed roles</a>.</dd>
    <dd>For <code>role</code> value </dd>
    <dt><a>DOM interface</a>:</dt>
    <dd>
      <pre class="idl" data-highlight="webidl">
        interface HTMLLinkElement : HTMLElement {
          attribute DOMString href;
          attribute DOMString? crossOrigin;
          attribute DOMString rel;
          attribute DOMString rev;
          [SameObject, PutForwards=value]readonly attribute DOMTokenList relList;
          attribute DOMString media;
          attribute DOMString hreflang;
          attribute DOMString type;
          [SameObject, PutForwards=value] readonly attribute DOMTokenList sizes;
        };
        HTMLLinkElement implements LinkStyle;
      </pre>
    </dd>
  </dl>

  The <{link}> element allows authors to link their document to other resources.

  The destination of the link(s) is given by the <dfn element-attr for="link"><code>href</code></dfn> attribute, which must
  be present and must contain a <a>valid non-empty URL potentially surrounded by spaces</a>.
  <span class="impl">If the <{link/href}> attribute is absent, then the element does not define
  a link.</span>

  A <{link}> element must have a <{link/rel}> attribute.

  <p class="note">
    If the <{link/rel}> attribute is used, the element is restricted to the <code>head</code>
    element.
  </p>

  The types of link indicated (the relationships) are given by the value of the
  <dfn element-attr for="link"><code>rel</code></dfn> attribute, which, if present, must have a
  value that is a <a>set of space-separated tokens</a>. The <a>allowed keywords and their
  meanings</a> are defined in a later section. If the <{link/rel}> 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.

  If a <code>link</code> element has a <code>rel</code> attribute that contains only keywords that are
  <a>body-ok</a>, then the element is said to be <dfn>allowed in the body</dfn>. This means
  that the element can be used where <a>phrasing content</a> is expected.</p>

  Two categories of links can be created using the <{link}> element:
  <a>Links to external resources</a> and <a>hyperlinks</a>. The [[#sec-link-types]] section defines
  whether a particular link type is an external resource or a hyperlink. One <code>link</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
  <{link/rel}> attribute. User agents must process the links on a per-link
  basis, not a per-element basis.

  <p class="note">
    Each link created for a <{link}> element is handled separately. For instance, if there
    are two <{link}> elements with <code>rel="stylesheet"</code>, they each count as a
    separate external resource, and each is affected by its own attributes independently. Similarly,
    if a single <{link}> element has a <{link/rel}> attribute with the value
    <code>next stylesheet</code>, it creates both a <a>hyperlink</a> (for the <code>next</code>
    keyword) and an <a>external resource link</a> (for the <code>stylesheet</code> keyword), and
    they are affected by other attributes (such as <code>media</code> or <code>title</code>)
    differently.
  </p>

  <div class="example">
    For example, the following <{link}> element creates two hyperlinks (to the same page):

    <pre highlight="html">&lt;link rel="author license" href="/about"></pre>

    The two links created by this element are one whose semantic is that the target page has
    information about the current page's author, and one whose semantic is that the target page has
    information regarding the license under which the current page is provided.
  </div>

  <{link}> and <{a}> elements may also have a
  <dfn element-attr for="a,link,links"><code>rev</code></dfn> attribute, which is used to describe
  a <a>reverse link</a> relationship from the resource specified by the <{links/href}> to the
  current document. If present, the value of this attribute must be a <a>set of space-separated
  tokens</a>. Like the <{links/rel}> attribute, [[#sec-link-types]] describes the <a>allowed
  keywords and their meanings</a> for the <{links/rev}> attribute. Both the <{links/rel}> and
  <{links/rev}> attributes may be present on the same element.

  <dfn lt="reverse link|Reverse links">Reverse links</dfn> are a way to express the reverse
  directional relationship of a link. In contrast to the <{links/rel}> attribute, whose value
  conveys a forward directional relationship ("how is the link related to me"), the <{links/rev}>
  attribute allows for similiar relationships to be expressed in the reverse direction ("how am I
  related to this link"). These values can enable user agents to build a more comprehensive map of
  linked documents.

  <div class="example">Given two documents, each containing a chapter of a book, the links between
  them could be described with the <{link/rel}> and <{links/rev}> attributes as follows:

  Document with URL "chapter1.html"
  <pre highlight="html">&lt;link href="chapter2.html" rel="next" rev="prev"&gt;</pre>

  Document with URL "chapter2.html"
  <pre highlight="html">
&lt;link href="chapter1.html" rel="prev" rev="next"&gt;
&lt;link href="chapter3.html" rel="next" rev="prev"&gt;</pre>

  From chapter1.html, the link to chapter2.html is the "<code>next</code>" chapter in the series in
  the forward direction, and the "<code>previous</code>" chapter in the reverse diretion (from
  chapter2.html to chapter1.html).
  </div>

  <div class="example">The links in a table of contents document might be described using
  <{links/rel}> and <{links/rev}> as follows:
  <pre highlight="html">
  &lt;ol&gt;
    &lt;li&gt;&lt;a href="chapter1.html" rev="toc" rel="next"&gt;chapter 1&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="chapter2.html" rev="toc"&gt;&lt;/a&gt;chapter 2&lt;/li&gt;
    &lt;li&gt;&lt;a href="chapter3.html" rev="toc"&gt;&lt;/a&gt;chapter 3&lt;/li&gt;
  &lt;/ol&gt;
  </pre>

  From the table of contents, the "<code>next</code>" logical path is to the first chapter,
  expressed using <{links/rel}>. Each chapter link has a "<code>toc</code>" <{links/rev}> value
  which indicates that the current document is the table of contents document for every chapter.

  </div>
  
  <p>The <dfn element-attr for="link"><code>nonce</code></dfn> attribute represents a
  cryptographic nonce ("number used once") which can be used by <cite>Content Security Policy</cite>
  to determine whether or not an external resource specified by the link will be loaded and applied
  to the document. The value is text. [[CSP3]]</p>

  The <dfn element-attr for="link"><code>crossorigin</code></dfn> attribute is a
  <a>CORS settings attribute</a>. It is intended for use with external resource links.

  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).

  For external resources that are represented in the DOM (for example, style sheets), the DOM
  representation must be made available (modulo cross-origin restrictions) even if the resource is
  not applied. To <dfn lt="obtain|obtain the resource">obtain the resource</dfn>, the user agent
  must run the following steps:


  1. If the <{link/href}> attribute's value is the empty string, then abort these steps.
  2. <a>Parse</a> the <a for="url">URL</a> given by the <{link/href}> attribute, relative to the
      element's <a>node document</a>. If that fails, then abort these steps. Otherwise, let
      <var>url</var> be the <a>resulting URL record</a>.
  3. Let <var>corsAttributeState</var> be the current state of the element's <{link/crossorigin}>
      content attribute.
  4. Let <var>request</var> be the result of <a>creating a potential-CORS request</a> given
      <var>url</var> and <var>corsAttributeState</var>.
  5. Set <var>request</var>'s <a>client</a> to the <{link}> element's <a>node document</a>'s
      {{Window}} object's <a>environment settings object</a>.
  6. Set <var>request</var>'s <a>cryptographic nonce metadata</a> to the current state of the
      <{link}> element's <{link/nonce}> content attribute.
  7. <a>Fetch</a> <var>request</var>.

  User agents may opt to only try to obtain such resources when they are needed, instead of
  pro-actively fetching all the external resources that are not applied.

  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.)

  Once the attempts to obtain the resource and its <a>critical subresources</a> are complete, the
  user agent must, if the loads were successful, <a>queue a task</a> to <a>fire a simple event</a>
  named <code>load</code> at the <{link}> element, or, if the resource or one of its
  <a>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>queue a task</a>
  to <a>fire a simple event</a> named <code>error</code> at the <{link}> 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.

  The <a>task source</a> for these <a>tasks</a> is the <a>DOM manipulation task source</a>.

  The element must <a>delay the load event</a> of the element's <a>node document</a> until all the
  attempts to obtain the resource and its <a>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>delay the load event</a>.)

  <hr />

  Interactive user agents may provide users with a means to <a>follow the hyperlinks</a> created
  using the <{link}> 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 <{link}> element in the document:

  * The relationship between this document and the resource (given by the <{link/rel}>
      attribute)
  * The title of the resource (given by the <{link/title}> attribute).
  * The address of the resource (given by the <{link/href}> attribute).
  * The language of the resource (given by the <{link/hreflang}> attribute).
  * The optimum media for the resource (given by the <{link/media}> attribute).

  User agents could also include other information, such as the type of the resource (as given by
  the <code>type</code> attribute).

  <p class="note">
    Hyperlinks created with the <{link}> element and its <{link/rel}> attribute apply
    to the whole page. This contrasts with the <{links/rel}> attribute of <{a}> and
    <{area}> elements, which indicates the type of a link whose context is given by the
    link's location within the document.
  </p>

  The <dfn element-attr for="link"><code>media</code></dfn> attribute says which media the resource
  applies to. The value must be a <a>valid media query list</a>.

  <div class="impl">
    If the link is a <a>hyperlink</a> then the <{link/media}> attribute is purely advisory, and
    describes for which media the document in question was designed.

    However, if the link is an <a>external resource link</a>, then the <code>media</code> attribute
    is prescriptive. The user agent must apply the external resource when the <code>media</code>
    attribute's value <a>matches the environment</a> and the other relevant conditions apply, and
    must not apply it otherwise.

    <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>@media</code> blocks. This
      specification does not override such further restrictions or requirements.
    </p>
  </div>

  The default, if the <code>media</code> attribute is omitted, is "<code>all</code>", meaning that
  by default links apply to all media.

  The <dfn element-attr for="link"><code>hreflang</code></dfn> attribute on the <{link}> element has
  the same semantics as the {{HTMLLinkElement/hreflang}} attribute on the <{a}> element.

  The <dfn element-attr for="link"><code>type</code></dfn> attribute gives the <a>MIME type</a> of
  the linked resource. It is purely advisory. The value must be a <a>valid mime type</a>.

  For <a>external resource links</a>, the <{link/type}> attribute is used as a hint to user agents
  so that they can avoid fetching resources they do not support. 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>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 user agent does not support the given <a>MIME type</a> for the given link
  relationship, then the user agent should not <a>obtain</a> the resource; if the user agent does
  support the given <a>MIME type</a> for the given link relationship, then the user agent should
  <a>obtain</a> the resource at the appropriate time as specified for the
  <a>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>obtain</a>
  the resource if the type was known and supported, then the user agent should <a>obtain</a> the
  resource under the assumption that it will be supported.

  <div class="impl">
    User agents must not consider the <code>type</code> attribute authoritative &mdash; upon
    fetching the resource, user agents must not use the <code>type</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.

    <dfn lt="determining the type of the resource"></dfn>If the external resource link type defines
    rules for processing the resource's <a>Content-Type metadata</a>, then those rules apply.
    Otherwise, if the resource is expected to be an image, user agents may apply the
    <a>image sniffing rules</a>, with the <var>official type</var> being the type determined from
    the resource's <a>Content-Type metadata</a>, and use the resulting
    <a>computed type of the resource</a> 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>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 class="note">
      The <code>stylesheet</code> link type defines rules for processing the resource's
      <a>Content-Type metadata</a>.
    </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.

    <div class="example">
      If a document contains style sheet links labeled as follows:

      <pre highlight="html">
        &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>

     ...then a compliant user agent 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>MIME type</a> for CSS
     style sheets).

     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.

     If one of the two files was returned without a <a>Content-Type</a> metadata, or with a
     syntactically incorrect type like <code>Content-Type:&nbsp;"null"</code>, then the default type
     for <code>stylesheet</code> links would kick in. Since that default type is
     <code>text/css</code>, the style sheet <em>would</em> nonetheless be applied.
    </div>
  </div>

  The <dfn element-attr for="link"><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 <{link/title}> attribute defines <a>alternative style sheet sets</a>.

  <p class="note">
    The <{link/title}> attribute on <{link}> elements differs from the global <{global/title}>
    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>

  The <code>sizes</code> attribute is used with the <code>icon</code> link type. The attribute must
  not be specified on <{link}> elements that do not have a <{link/rel}> attribute that
  specifies the <code>icon</code> keyword.

  <div class="impl">
    The <a>activation behavior</a> of <code>link</code> elements that create <a>hyperlinks</a> is to
    run the following steps:

    1. If the <{link}> element's <a>node document</a> is not <a>fully active</a>, then
        abort these steps.
    2. <a>Follow the hyperlink</a> created by the<code>link</code> element.

    HTTP <code>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 message. These headers are to be
    processed according to the rules given in the relevant specifications. [[!HTTP]] [[!RFC5988]]

    <p class="note">
      Registration of relation types in HTTP Link: headers is distinct from <a>HTML link types</a>,
      and thus their semantics can be different from same-named HTML types.
    </p>

    The IDL attributes <dfn attribute for="HTMLLinkElement"><code>href</code></dfn>,
    <dfn attribute for="HTMLLinkElement"><code>rel</code></dfn>,
    <dfn attribute for="HTMLLinkElement"><code>rev</code></dfn>,
    <dfn attribute for="HTMLLinkElement"><code>media</code></dfn>,
    <dfn attribute for="HTMLLinkElement"><code>nonce</code></dfn>,
    <dfn attribute for="HTMLLinkElement"><code>hreflang</code></dfn>,
    <dfn attribute for="HTMLLinkElement"><code>type</code></dfn>, and
    <dfn attribute for="HTMLLinkElement"><code>sizes</code></dfn> each must <a>reflect</a> the
    respective content attributes of the same name.

    The <dfn attribute for="HTMLLinkElement"><code>crossOrigin</code></dfn> IDL attribute must
    <a>reflect</a> the <{link/crossorigin}> content attribute.

    The IDL attribute <dfn attribute for="HTMLLinkElement"><code>relList</code></dfn> must
    <a>reflect</a> the <{link/rel}> content attribute.

    <code>relList</code>'s {{DOMTokenList}}'s <a>supported tokens</a> are the keywords
    defined in <a>HTML link types</a> which are allowed on <{link}> elements and supported
    by the user agent.

    <{link/rel}>'s <a>supported tokens</a> are the keywords defined in <a>HTML link types</a> which
    are allowed on <{link}> elements, impact the processing model, and are supported by the user
    agent. The possible supported tokens are <code>alternate</code>,
    <a><code>dns-prefetch</code></a>, <code>icon</code>, <a><code>preconnect</code></a>,
    <a><code>prefetch</code></a>, <a><code>prerender</code></a>, <code>search</code>,
    <code>stylesheet</code> and <code>next</code>. <{link/rel}>'s <a>supported tokens</a> must only
    include the tokens from this list that the user agent implements the processing model for.

    Other specifications may add <a>HTML link types</a> as defined in <a>Other link types</a>, with
    the following additional requirements:

    * Such specifications may require that their link types be included in <{link/rel}>'s supported
        tokens.
    * Such specifications may specify that their link types are <a>body-ok</a>.
  </div>

  The {{LinkStyle}} interface is also implemented by this element. [[!CSSOM]]

  <div class="example">
    Here, a set of <{link}> elements provide some style sheets:

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

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

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

  <div class="example">
    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:

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

<h4 id="the-meta-element">The <dfn element><code>meta</code></dfn> element</h4>

  <dl class="element">
    <dt><a>Categories</a>:</dt>
    <dd><a>Metadata content</a>.</dd>
    <dt><a>Contexts in which this element can be used</a>:</dt>
    <dd>
      If the <code>charset</code> attribute is present, or if the element's <code>http-equiv</code>
      attribute is in the <a state for="http-equiv">encoding declaration state</a>: in a <{head}> element.
    </dd>
    <dd>
      If the <code>http-equiv</code> attribute is present but not in the
      <a state for="http-equiv">encoding declaration state</a>: in a <{head}> element.
    </dd>
    <dd>
      If the <code>http-equiv</code> attribute is present but not in the
      <a state for="http-equiv">encoding declaration state</a>: in a <{noscript}> element that is a child of a
      <{head}> element.
    </dd>
    <dd>
      If the <code>name</code> attribute is present: where <a>metadata content</a> is expected.
    </dd>
    <dt><a>Content model</a>:</dt>
    <dd><a>Nothing</a>.</dd>
    <dt><a>Tag omission in text/html</a>:</dt>
    <dd>No <a>end tag</a>.</dd>
    <dt><a>Content attributes</a>:</dt>
    <dd><a>Global attributes</a></dd>
    <dd><code>name</code> — Metadata name</dd>
    <dd><code>http-equiv</code> — Pragma directive</dd>
    <dd><code>content</code> — Value of the element</dd>
    <dd><code>charset</code> — <a>Character encoding declaration</a></dd>
    <dt>Allowed <a href="#aria-role-attribute">ARIA role attribute</a> values:</dt>
    <dd>None</dd>
    <dt>Allowed <a href="#state-and-property-attributes">ARIA state and property attributes</a>:</dt>
    <dd><a>Global aria-* attributes</a></dd>
    <dt><a>DOM interface</a>:</dt>
    <dd>
      <pre class="idl" data-highlight="webidl">
        interface HTMLMetaElement : HTMLElement {
          attribute DOMString name;
          attribute DOMString httpEquiv;
          attribute DOMString content;
        };
      </pre>
    </dd>
  </dl>

  The <{meta}> element <a>represents</a> various kinds of metadata that cannot be
  expressed using the <{title}>, <{base}>, <{link}>, <{style}>,
  and <{script}> elements.

  The <{meta}> element can represent document-level metadata with the <code>name</code>
  attribute, pragma directives with the <dfn element-attr for="meta"><code>http-equiv</code></dfn> attribute, and the file's
  <a>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>charset</code> attribute.

  Exactly one of the <code>name</code>, <code>http-equiv</code>, and <code>charset</code>
  attributes must be specified.

  If either <code>name</code> or <code>http-equiv</code> is
  specified, then the <code>content</code> attribute must also be
  specified. Otherwise, it must be omitted.

  The <dfn element-attr for="meta"><code>charset</code></dfn> attribute specifies the character
  encoding used by the document. This is a <a>character encoding declaration</a>. If the
  attribute is present in an <a>XML document</a>, its value must be an
  <a>ASCII case-insensitive</a> match for the string "<code>utf-8</code>" (and the
  document is therefore forced to use <a>UTF-8</a> as its encoding).

  <p class="note">The <code>charset</code> attribute on the
  <{meta}> element has no effect in XML documents, and is only allowed in order to
  facilitate migration to and from XHTML.</p>

  There must not be more than one <{meta}> element with a <code>charset</code> attribute
  per document.

  The <dfn element-attr for="meta"><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.
  
  <div class="warning">
  
  <p><a href="https://www.w3.org/TR/css-device-adapt-1/#viewport-meta"><code>&lt;meta name="viewport" content="..."></code></a>
  allows authors to define specific viewport characteristics (such as the layout viewport's width and zoom factor)
  for their documents. Among these is the ability to prevent or restrict users from being able to zoom, using
  <code>content</code> values such as <code>user-scalable=no</code> or <code>maximum-scale=1.0</code>. Authors should not suppress
  or limit the ability of users to resize a document, as this causes accessibility and usability issues.</p>
  
  <div class="example">
  The following examples illustrate code that should be avoided:
  <pre highlight="html">
  
   &lt;!-- DO NOT DO THIS -->
  
   &lt;meta name="viewport" content="<mark>user-scalable=no</mark>">

   &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, <mark>maximum-scale=1.0</mark>">
  </pre>
  </div>
  
  <p>There may be specific use cases where preventing users from zooming may be appropriate, such as map applications – 
  where custom zoom functionality is handled via scripting.
  However, in general this practice should be avoided, and HTML conformance checking tools should display a warning if
  they encounter these values.</p>

  <p>Note that most user agents now allow users to always zoom, regardless of any
  <code>&lt;meta name="viewport" content="..."></code> restrictions – either by default, or as a setting/option (which may however not be immediately apparent to users).</p>
  </div>

  If a <{meta}> element has a <dfn element-attr for="meta"><code>name</code></dfn>
  attribute, it sets document metadata. Document metadata is expressed in terms of name-value pairs,
  the <code>name</code> attribute on the <{meta}> element giving the
  name, and the <code>content</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 <{meta}> element has no
  <code>content</code> attribute, then the value part of the metadata name-value pair is the empty
  string.

  The <dfn attribute for="HTMLMetaElement"><code>name</code></dfn> and <dfn attribute for="HTMLMetaElement"><code>content</code></dfn> IDL attributes must
  <a>reflect</a> the respective content attributes of the same name. The IDL attribute
  <dfn attribute for="HTMLMetaElement"><code>httpEquiv</code></dfn> must <a>reflect</a> the content attribute
  <{meta/http-equiv}>.

<h5 id="standard-metadata-names">Standard metadata names</h5>

  This specification defines a few names for the <code>name</code> attribute of the
  <{meta}> element.

  Names are case-insensitive<span class="impl">, and must be compared in an
  <a>ASCII case-insensitive</a> manner</span>.

  : <dfn><code>application-name</code></dfn>
  :: 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>application-name</code> metadata
      name must not be used. Translations of the Web application's name may be given, using the
      <{global/lang}> attribute to specify the language of each name.

      There must not be more than one <{meta}> element with a given <a>language</a> and
      with its <code>name</code> attribute set to the value <code>application-name</code> per
      document.

      <div class="impl">
        User agents may use the application name in UI in preference to the page's
        <{title}>, 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.

        To find the application name to use given an ordered list of languages (e.g., British
        English, American English, and English), user agents must run the following steps:

        1. Let <var>languages</var> be the list of languages.
        2. Let <var>default language</var> be the <a>language</a> of the {{Document}}'s
            <a>document element</a>, if any, and if that language is not unknown.
        3. If there is a <var>default language</var>, and if it is not the same language as any of
            the languages in <var>languages</var>, append it to <var>languages</var>.
        4. Let <var>winning language</var> be the first language in <var>languages</var> for which
            there is a <{meta}> element in the {{Document}} that has its
            <code>name</code> attribute set to the value <code>application-name</code> and whose
            <a>language</a> is the language in question.

            If none of the languages have such a <{meta}> element, then abort these steps;
            there's no given application name.
        5. Return the value of the <code>content</code> attribute of the first <code>meta</code>
            element in the {{Document}} in <a>tree order</a> that has its <code>name</code>
            attribute set to the value <code>application-name</code> and whose <a>language</a> is
            <var>winning language</var>.

        <p class="note">
          This algorithm would be used by a browser when it needs a name for the page, for instance,
          to label a bookmark. The languages it would provide to the algorithm would be the user's
          preferred languages.
        </p>
      </div>

  : <dfn><code>author</code></dfn>
  :: The value must be a free-form string giving the name of one of the page's authors.

  : <dfn><code>description</code></dfn>
  :: 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
      <{meta}> element with its <code>name</code> attribute set to the value
      <code>description</code> per document.

  : <dfn><code>generator</code></dfn>
  :: 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 pages whose markup is not generated by
      software, e.g., pages whose markup was written by a user in a text editor.

      <div class="example">
        Here is what a tool called "Frontweaver" could include in its output, in the page's
        <{head}> element, to identify itself as the tool used to generate the page:

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

  : <dfn><code>keywords</code></dfn>
  :: The value must be a <a>set of comma-separated tokens</a>, each of which is a keyword relevant
      to the page.

      <div class="example">
        This page about typefaces on British motorways uses a <{meta}> element to specify
        some keywords that users might use to look for the page:

        <pre highlight="html">
          &lt;!DOCTYPE HTML&gt;
          &lt;html lang="en-GB"&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">
        To obtain the list of keywords that the author has specified as applicable to the page, the
        user agent must run the following steps:

        1. Let <var>keywords</var> be an empty list.
        2. For each <{meta}> element with a <code>name</code> attribute and a
            <code>content</code> attribute and whose <code>name</code> attribute's value is
            <code>keywords</code>, run the following substeps:
            1. <a lt="split a string on commas">Split the value of the element's <code>content</code> attribute on commas</a>.
            2. Add the resulting tokens, if any, to <var>keywords</var>.
        3. Remove any duplicates from <var>keywords</var>.
        4. Return <var>keywords</var>. This is the list of keywords that the author has specified as
            applicable to the page.

        User agents should not use this information when there is insufficient confidence in the
        reliability of the value.

        <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>

<h5 id="other-metadata-names">Other metadata names</h5>

  <dfn lt="register the names|register the name|metadata names">Extensions to the predefined set of metadata names</dfn> may be registered in the
  <a href="https://wiki.whatwg.org/wiki/MetaExtensions">WHATWG Wiki MetaExtensions page</a>. [[!WHATWGWIKI]]

  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:

  : Keyword
  :: The actual name being defined. The name should not be confusingly similar to any other defined
      name (e.g., differing only in case).

  : Brief description
  :: A short non-normative description of what the metadata name's meaning is, including the format
      the value is required to be in.

  : Specification
  :: 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.

  : Synonyms
  :: 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.

  : Status
  :: One of the following:
      : Proposed
      :: The name has not received wide peer review and approval. Someone has proposed it and is, or
          soon will be, using it.

      : Ratified
      :: 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.

      : Discontinued
      :: 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.

      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.

      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.

      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.

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

  <div class="impl">
    Conformance checkers may 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 reported as invalid.
    Conformance checkers may cache this information (e.g., for performance reasons or to avoid the
    use of unreliable network connectivity).

    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.
  </div>

  Metadata names whose values are to be <a for="url">URLs</a> must not be proposed or accepted. Links must be
  represented using the <{link}> element, not the <{meta}> element.

<h5 id="pragma-directives">Pragma directives</h5>

  When the <dfn><code>http-equiv</code></dfn> attribute is specified on a <{meta}> element,
  the element is a pragma directive.

  The <code>http-equiv</code> attribute is an <a>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>

  <table id="table-http-equiv">
    <thead>
      <tr>
        <th>State</th>
        <th>Keyword</th>
        <th>Notes</th>
      </tr>
    </thead>
    <tbody>
      <tr class="impl">
        <td><a state for="http-equiv" lt="content-language">Content Language</a></td>
        <td><code>content-language</code></td>
        <td>Non-conforming</td>
      </tr>
      <tr>
        <td><a state for="http-equiv" lt="content-type">Encoding declaration</a></td>
        <td><code>content-type</code></td>
        <td></td>
      </tr>
      <tr>
        <td><a state for="http-equiv" lt="default-style">Default style</a></td>
        <td><code>default-style</code></td>
        <td></td>
      </tr>
      <tr>
        <td><a state for="http-equiv" lt="refresh">Refresh</a></td>
        <td><code>refresh</code></td>
        <td></td>
      </tr>
      <tr class="impl">
        <td><a state for="http-equiv" lt="set-cookie">Cookie setter</a></td>
        <td><code>set-cookie</code></td>
        <td>Non-conforming</td>
      </tr>
    </tbody>
  </table>

  <div class="impl">
    When a <{meta}> element is <a for="document">inserted into the document</a>, if its
    <code>http-equiv</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:
  </div>

  <div class="impl">
    : <dfn state for="http-equiv" lt="content-language">Content language state</dfn> (<code>http-equiv="content-language"</code>)
    ::
        <p class="note">
          This feature is non-conforming. Authors are encouraged to use the <{global/lang}>
          attribute instead.
        </p>

        This pragma sets the <dfn>pragma-set default language</dfn>. Until such a pragma is
        successfully processed, there is no <a>pragma-set default language</a>.

        1. If the <{meta}> element has no <code>content</code> attribute, then abort these
            steps.
        2. If the element's <code>content</code> attribute contains a U+002C COMMA character (,)
            then abort these steps.
        3. Let <var>input</var> be the value of the element's <code>content</code> attribute.
        4. Let <var>position</var> point at the first character of <var>input</var>.
        5. <a>Skip whitespace</a>.
        6. <a>Collect a sequence of characters</a> that are not <a>space characters</a>.
        7. Let <var>candidate</var> be the string that resulted from the previous step.
        8. If <var>candidate</var> is the empty string, abort these steps.
        9. Set the <a>pragma-set default language</a> to <var>candidate</var>.
            <p class="note">
              If the value consists of multiple space-separated tokens, tokens after the first are
              ignored.
            </p>

        <p class="note">
          This pragma is not the same as the HTTP <code>Content-Language</code> header of the same name.
          HTTP <code>Content-Language</code> values with more than one language tag will be rejected as invalid by this pragma.
          [[!HTTP]]
        </p>
  </div>

  : <dfn state for="http-equiv" lt="content-type|encoding declaration state">Encoding declaration state</dfn> (<code>http-equiv="content-type"</code>)
  :: The <a state for="http-equiv" lt="content-type">encoding declaration state</a> is just an alternative form of setting the
      <code>charset</code> attribute: it is a <a>character encoding declaration</a>.
      <span class="impl">This state's user agent requirements are all handled by the parsing section
      of the specification.</span>

      For <{meta}> elements with an <code>http-equiv</code> attribute in the <a state for="http-equiv">encoding declaration state</a>, the <code>content</code> attribute must have a value that is an
      <a>ASCII case-insensitive</a> match for a string that consists of: the literal string
      "<code>text/html;</code>", optionally followed by any number of <a>space characters</a>,
      followed by the literal string "<code>charset=</code>", followed by one of the <a lt="character encoding">labels</a>
      of the <a>character encoding</a> of the <a>character encoding declaration</a>.

      A document must not contain both a <{meta}> element with an <code>http-equiv</code>
      attribute in the <a state for="http-equiv">encoding declaration state</a> and a <{meta}> element with the
      <code>charset</code> attribute present.

      The <a state for="http-equiv" lt="content-type">encoding declaration state</a> may be used in <a>HTML documents</a> and in
      <a>XML Documents</a>. If the <a state for="http-equiv" lt="content-type">encoding declaration state</a> is used in
      <a>XML Documents</a>, the name of the <a>character encoding</a> must be an
      <a>ASCII case-insensitive</a> match for the string "<code>UTF-8</code>" (and  the document is
      therefore forced to use UTF-8 as its encoding).

      <p class="note">
        The <a state for="http-equiv" lt="content-type">encoding declaration state</a> has no effect in XML documents, and is only allowed in
        order to facilitate migration to and from XHTML.
      </p>

  : <dfn state for="http-equiv" lt="default-style">Default style state</dfn> (<code>http-equiv="default-style"</code>)
  :: This pragma sets the name of the default <a>alternative style sheet set</a>.
      <div class="impl">
        1. If the <{meta}> element has no <code>content</code> attribute, or if that
            attribute's value is the empty string, then abort these steps.
        2. Set the <a>preferred style sheet set</a> to the value of the element's
            <code>content</code> attribute. [[!CSSOM]]
      </div>

  : <dfn state for="http-equiv" lt="refresh">Refresh state</dfn> (<code>http-equiv="refresh"</code>)
  :: This pragma acts as timed redirect.
        1. If another <{meta}> element with an <code>http-equiv</code> attribute in the
            <a state for="http-equiv" lt="refresh">Refresh state</a> has already been successfully processed (i.e., when it was inserted
            the user agent processed it and reached the step labeled <i>end</i>), then abort
            these steps.
        2. If the <{meta}> element has no <code>content</code> attribute, or if that
            attribute's value is the empty string, then abort these steps.
        3. Let <var>input</var> be the value of the element's <code>content</code> attribute.
        4. Let <var>position</var> point at the first character of <var>input</var>.
        5. <a>Skip whitespace</a>.
        6. <a>Collect a sequence of characters</a> that are <a>ASCII digits</a>, and parse the
            resulting string using the <a>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>time</var> be the parsed number.
        7. <a>Collect a sequence of characters</a> that are <a>ASCII digits</a> and U+002E FULL STOP
            characters (.). Ignore any collected characters.
        8. Let <var>url</var> be the <{meta}> element's <a>node document</a>'s
            <a for="url">URL</a>.
        9. If <var>position</var> is past the end of <var>input</var>, jump to the step labeled
            <i>end</i>.
        10. If the character in <var>input</var> pointed to by <var>position</var> is not a U+003B
            SEMICOLON character (;), a U+002C COMMA character (,), or a <a>space character</a>, then
            abort these steps.
        11. <a>Skip whitespace</a>.
        12. If the character in <var>input</var> pointed to by <var>position</var> is a U+003B
            SEMICOLON character (;), a U+002C COMMA character (,), then advance <var>position</var>
            to the next character.
        13. <a>Skip whitespace</a>.
        14. If <var>position</var> is past the end of <var>input</var>, jump to the step labeled
            <i>end</i>.
        15. Let <var>url</var> be equal to the substring of <var>input</var> from the character at
            <var>position</var> to the end of the string.
        16. If the character in <var>input</var> pointed to by <var>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>position</var> to the next character. Otherwise, jump to the step labeled
            <i>skip quotes</i>.
        17. If the character in <var>input</var> pointed to by <var>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>position</var> to the next character. Otherwise, jump to the step labeled
            <var>Parse</var>.
        18. If the character in <var>input</var> pointed to by <var>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>position</var> to the next character. Otherwise, jump to the step labeled
            <var>Parse</var>.
        19. <a>Skip whitespace</a>.
        20. If the character in <var>input</var> pointed to by <var>position</var> is a U+003D
            EQUALS SIGN (=), then advance <var>position</var> to the next character. Otherwise, jump
            to the step step labeled <var>Parse</var>.
        21. <a>Skip whitespace</a>.
        22. <i>Skip quotes</i>: If the character in <var>input</var> pointed to by
            <var>position</var> is either a U+0027 APOSTROPHE character (') or U+0022 QUOTATION MARK
            character ("), then let <var>quote</var> be that character, and advance
            <var>position</var> to the next character. Otherwise, let <var>quote</var> be the empty
            string.
        23. Let <var>url</var> be equal to the substring of <var>input</var> from the character at
            <var>position</var> to the end of the string.
        24. If <var>quote</var> is not the empty string, and there is a character in <var>url</var>
            equal to <var>quote</var>, then truncate <var>url</var> at that character, so that it
            and all subsequent characters are removed.
        25. <var>Parse</var>: <a>Parse</a> <var>url</var> relative to the <{meta}> element's
            <a>node document</a>. If that fails, abort these steps. Otherwise, let
            <var>urlRecord</var> be the <a>resulting URL record</a>.
        26. <i>End</i>: Perform one or more of the following steps:
            * After the refresh has come due (as defined below), if the user has not canceled the
                redirect and if the <{meta}> element's <a>node document</a>'s
                <a>active sandboxing flag set</a> does not have the
                <a>sandboxed automatic features browsing context flag</a> set, <a>navigate</a> the
                {{Document}}'s <a>browsing context</a> to <var>urlRecord</var>, with
                <a>replacement enabled</a>, and with the {{Document}}'s <a>browsing context</a> as
                the <a>source browsing context</a>.

                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:
                * At least <var>time</var> seconds have elapsed since the document has
                    <a>completely loaded</a>, adjusted to take into account user or user agent
                    preferences.
                * At least <var>time</var> seconds have elapsed since the <{meta}> element
                    was <a for="document">inserted into the document</a>, adjusted to take into account
                    user or user agent preferences.
            * Provide the user with an interface that, when selected, <a>navigates</a> a
                <a>browsing context</a> to <var>urlRecord</var>, with the {{Document}}'s
                <a>browsing context</a> as the <a>source browsing context</a>.
            * Do nothing.

            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.

      For <{meta}> elements with an <code>http-equiv</code> attribute in the
      <a state for="http-equiv" lt="refresh">Refresh state</a>, the <code>content</code> attribute must have a value consisting either
      of:

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

      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 for="url">URL</a>.

      <div class="example">
        A news organization's front page could include the following markup in the page's
        <{head}> element, to ensure that the page automatically reloads from the server
        every five minutes:

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

      <div class="example">
        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:

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

    : <dfn state for="http-equiv" lt="set-cookie">Cookie setter</dfn> (<code>http-equiv="set-cookie"</code>)
    :: This pragma sets an HTTP cookie. [[!COOKIES]]

        It is non-conforming. Real HTTP headers should be used instead.

        1. If the <{meta}> element has no <code>content</code> attribute, or if that
            attribute's value is the empty string, then abort these steps.
        2. Act as if <a>receiving a set-cookie-string</a> for the document's <a for="Document">URL</a> via a
            "non-HTTP" API, consisting of the value of the element's <code>content</code> attribute
            <a>encoded as UTF-8</a>. [[!COOKIES]] [[!ENCODING]]

    : <dfn state for="http-equiv">Content security policy state</dfn> (<code>http-equiv="content-security-policy"</code>)
    :: This pragma <a lt="enforced">enforces</a> a <a>Content Security Policy</a> on a {{Document}}.
        [[CSP3]]

        1. If the <{meta}> element is not a child of a <{head}> element, abort these steps.
        2. If the <{meta}> element has no <{meta/content}> attribute, or if that attribute's value
            is the empty string, then abort these steps.
        3. Let <var>policy</var> be the result of executing Content Security Policy's
            <a>parse a serialized Content Security Policy</a> algorithm on the <{meta}> element's
            <{meta/content}> attribute's value.
        4. Remove all occurrences of the <a><code>report-uri</code></a>,
            <a><code>frame-ancestors</code></a>, and <a><code>sandbox</code></a> <a>directives</a>
            from <var>policy</var>.
        5. <a>Enforce the policy</a> <var>policy</var>.

        For <{meta}> elements with an <{meta/http-equiv}> attribute in the
        <a state for="http-equiv">Content security policy state</a>, the <{meta/content}> attribute
        must have a value consisting of a <a>valid Content Security Policy</a>, but must not contain
        any <a><code>report-uri</code></a>, <a><code>frame-ancestors</code></a>, or
        <a><code>sandbox</code></a> <a>directives</a>. The <a>Content Security Policy</a> given in
        the <{meta/content}> attribute will be <a>enforced</a> upon the current document. [[CSP3]]

        <div class="example">
        A page might choose to mitigate the risk of cross-site scripting attacks by preventing the
        execution of inline JavaScript, as well as blocking all plugin content, using a policy such
        as the following:
          <pre highlight="html">
            &lt;meta http-equiv="Content-Security-Policy" content="script-src 'self'; object-src 'none'">
          </pre>
        </div>

  There must not be more than one <{meta}> element with any particular state in the
  document at a time.

<h5 id="other-pragma-directives">Other pragma directives</h5>

  <dfn>Extensions to the predefined set of pragma directives</dfn> may, under certain conditions, be
  registered in the <a>WHATWG Wiki PragmaExtensions page</a>. [[!WHATWGWIKI]]

  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. [[!IANAPERMHEADERS]]

  Pragma directives corresponding to headers describing metadata, or not requiring specific user
  agent processing, must not be registered; instead, use <a>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.

  Anyone is free to edit the <a>WHATWG Wiki PragmaExtensions page</a> at any time to add a pragma directive
  satisfying these conditions. Such registrations must specify the following information:

  : Keyword
  :: The actual name being defined. The name must match a previously-registered HTTP name with the
      same requirements.

  : Brief description
  :: A short non-normative description of the purpose of the pragma directive.

  : Specification
  :: A link to the specification defining the corresponding HTTP header.

  <div class="impl">
    Conformance checkers must use the information given on the <a>WHATWG Wiki PragmaExtensions page</a> 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).
  </div>

<h5 id="specifying-the-documents-character-encoding">Specifying the document's character encoding</h5>

  A <dfn>character encoding declaration</dfn> is a mechanism by which the <a>character encoding</a>
  used to store or transmit a document is specified.

  The following restrictions apply to <a>character encoding declarations</a>:

  * The character encoding name given must be an <a>ASCII case-insensitive</a> match for one of the
      <a lt="character encoding">labels</a> of the <a>character encoding</a> used to serialize the file. [[!ENCODING]]
  * The character encoding declaration must be serialized without the use of
      <a>character references</a> or character escapes of any kind.
  * The element containing the character encoding declaration must be serialized completely
      within <dfn>the first 1024 bytes</dfn> of the document.

  In addition, due to a number of restrictions on <{meta}> elements, there can only be one
  <code>meta</code>-based character encoding declaration per document.

  If an <a>HTML document</a> does not start with a BOM, and its <a>encoding</a> is not explicitly
  given by <a>Content-Type metadata</a>, and the document is not <a lt="iframe srcdoc document">an <code>iframe</code>
  <code>srcdoc</code> document</a>, then the character encoding used must be an
  <a>ASCII-compatible encoding</a>, and the encoding must be specified using a <code>meta</code>
  element with a <code>charset</code> attribute or a <{meta}> element with an
  <code>http-equiv</code> attribute in the <a state for="http-equiv" lt="content-type">encoding declaration state</a>.

  <p class="note">
    A character encoding declaration is required (either in the <a>Content-Type metadata</a> or
    explicitly in the file) even if the encoding is US-ASCII, because a character encoding is needed
    to process non-ASCII characters entered by the user in forms, in URLs generated by scripts, and
    so forth.
  </p>

  If the document is <a lt="iframe srcdoc document">an <code>iframe</code> <code>srcdoc</code> document</a>, the document must
  not have a <a>character encoding declaration</a>. (In this case, the source is already decoded,
  since it is part of the document that contained the <{iframe}>.)

  If an <a>HTML document</a> contains a <{meta}> element with a <code>charset</code>
  attribute or a <{meta}> element with an <code>http-equiv</code> attribute in the
  <a state for="http-equiv" lt="content-type">encoding declaration state</a>, then the character encoding used must be an
  <a>ASCII-compatible encoding</a>.

  Authors should use <a>UTF-8</a>. Conformance checkers may advise authors against using legacy encodings.
  [[!ENCODING]]

  Authoring tools should default to using <a>UTF-8</a> for newly-created documents. [[!ENCODING]]

  Authors must not use encodings that are not defined in the WHATWG Encoding standard. Additionally,
  authors should not use <a>ISO-2022-JP</a>.  [[!ENCODING]]

  <p class="note">
    Some encodings that are not defined in the WHATWG Encoding standard use bytes in the range 0x20
    to 0x7E, inclusive, to encode characters other than the corresponding characters in the range
    U+0020 to U+007E, inclusive, and represent a potential security vulnerability: A user agent
    might end up interpreting supposedly benign plain text content as HTML tags and JavaScript.
  </p>

  <p class="note">
    Using non-UTF-8 encodings can have unexpected results on form submission and URL encodings,
    which use the <a>document's character encoding</a> by default.
  </p>

  In XHTML, the XML declaration should be used for inline character encoding information, if
  necessary.

  <div class="example">
    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 <{head}> element):

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

    In XML, the XML declaration would be used instead, at the very top of the markup:

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

<h4 id="the-style-element">The <dfn element><code>style</code></dfn> element</h4>

  <dl class="element">
    <dt><a>Categories</a>:</dt>
    <dd><a>Metadata content</a>.</dd>
    <dt><a>Contexts in which this element can be used</a>:</dt>
    <dd>
      Where <a>metadata content</a> is expected.
    </dd>
    <dd>
      In a <{noscript}> element that is a
      child of a <{head}> element.
    </dd>
    <dt><a>Content model</a>:</dt>
    <dd>
      Depends on the value of the <code>type</code> attribute, but must match requirements described
      in prose below.
    </dd>
    <dt><a>Tag omission in text/html</a>:</dt>
    <dd>Neither tag is omissible.</dd>
    <dt><a>Content attributes</a>:</dt>
    <dd><a>Global attributes</a></dd>
    <dd><code>media</code> — Applicable media</dd>
    <dd><{style/nonce}> - Cryptographic nonce used in <em>Content Security Policy</em> checks [[CSP3]]</dd>
    <dd><code>type</code> — Type of embedded resource</dd>
    <dd>
      Also, the <{style/title}> attribute has special semantics on this element: Alternative
      style sheet set name.
    </dd>
    <dt>Allowed <a href="#aria-role-attribute">ARIA role attribute</a> values:</dt>
    <dd>None</dd>
    <dt>Allowed <a href="#state-and-property-attributes">ARIA state and property attributes</a>:</dt>
    <dd><a>Global aria-* attributes</a></dd>
    <dt><a>DOM interface</a>:</dt>
    <dd>
      <pre class="idl" data-highlight="webidl">
        interface HTMLStyleElement : HTMLElement {
          attribute DOMString media;
          attribute DOMString nonce;
          attribute DOMString type;
        };
        HTMLStyleElement implements LinkStyle;
      </pre>
    </dd>
  </dl>

  The <{style}> element allows authors to embed style information in their documents. The
  <{style}> element is one of several inputs to the styling processing model. The element
  does not <a>represent</a> content for the user.

  The <dfn element-attr for="style"><code>type</code></dfn> attribute gives the styling language. If the attribute is
  present, its value must be a <a>valid mime type</a> that designates a styling language. The
  <code>charset</code> parameter must not be specified. The default value for the <code>type</code>
  attribute, which is used if the attribute is absent, is "<code>text/css</code>". [[!RFC2318]]

  <div class="impl">
    When examining types to determine if they support the language, user agents must not ignore
    unknown MIME parameters — types with unknown parameters must be assumed to be unsupported. The
    <code>charset</code> parameter must be treated as an unknown parameter for the purpose of
    comparing <a>MIME types</a> here.
  </div>

  The <dfn element-attr for="style"><code>media</code></dfn> attribute says which media the styles apply to. The value must
  be a <a>valid media query list</a>. <span class="impl">The user agent must apply the styles when
  the <code>media</code> attribute's value <a>matches the environment</a> and the other relevant
  conditions apply, and must not apply them otherwise.</span>

  <div class="impl">
    <p class="note">
      The styles might be further limited in scope, e.g., in CSS with the use of <code>@media</code>
      blocks. This specification does not override such further restrictions or requirements.
    </p>
  </div>

  The default, if the <code>media</code> attribute is omitted, is "<code>all</code>", meaning that
  by default styles apply to all media.

  <p class="note">
    A <{style}> element is restricted to
    appearing in the <{head}> of the document.
  </p>

  The <dfn element-attr for="style"><code>nonce</code></dfn> attribute represents a cryptographic
  nonce ("number used once") which can be used by <a>Content Security Policy</a> to determine
  whether or not the style specified by an element will be applied to the document. The value is
  text. [[CSP3]]

  The <dfn element-attr for="style"><code>title</code></dfn> attribute on <{style}> elements defines
  <a>alternative style sheet sets</a>. If the <{style}> element has no <code>title</code>
  attribute, then it has no title; the <code>title</code> attribute of ancestors does not apply to
  the <{style}> element. [[!CSSOM]]

  <p class="note">
    The <code>title</code> attribute on <{style}> elements, like the <code>title</code>
    attribute on <{link}> elements, differs from the global <code>title</code> attribute in
    that a <code>style</code> block without a title does not inherit the title of the parent
    element: it merely has no title.
  </p>

  The {{Node/textContent}} of a <{style}> element must match the <code>style</code>
  production in the following ABNF, the character set for which is Unicode. [[!ABNF]]

  <pre data-highlight="abnf">
    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>

  <hr />

  <div class="impl">
    The user agent must run the <dfn>update a <code>style</code> block</dfn> algorithm that
    applies for the style sheet language specified by the <{style}> element's <{style/type}>
    attribute, passing it the element's <dfn>style data</dfn>, whenever one of the following
    conditions occur:

    * the element is popped off the <a>stack of open elements</a> of an <a>HTML parser</a> or
        <a>XML parser</a>,
    * the element is not on the <a>stack of open elements</a> of an <a>HTML parser</a> or
        <a>XML parser</a>, and it is <a for="document">inserted into a document</a> or
        <a for="document">removed from a document</a>,
    * the element is not on the <a>stack of open elements</a> of an <a>HTML parser</a> or
        <a>XML parser</a>, and one of its child nodes is modified by a script,

    For styling languages that consist of pure text (as opposed to XML), a <code>style</code>
    element's <a>style data</a> is the <a>child text content</a> of the <{style}> element (not any
    other nodes such as comments or elements), in <a>tree order</a>. For XML-based styling
    languages, the <a>style data</a> consists of all the child nodes of the <{style}> element.

    The <a>update a <code>style</code> block</a> algorithm for CSS (<code>text/css</code>) is as
    follows:

    1. Let <var>element</var> be the <{style}> element.
    2. If <var>element</var> has an <a spec="cssom">associated CSS style sheet</a>,
        <a spec="cssom" lt="remove a CSS style sheet">remove the CSS style sheet</a> in question.
    3. If <var>element</var> is not <a>in a <code>Document</code></a>, then abort
        these steps.
    4. If the <a>Should element's inline behavior be blocked by Content Security Policy?</a>
        algorithm returns "<code>Blocked</code>" when executed upon the <{style}> element,
        "<code>style</code>", and the <{style}> element's <a>style data</a>, then abort these steps.
        [[CSP3]]
    5. <a spec="cssom">create a CSS style sheet</a> with the following properties:

        : <{style/type}>
        :: <code>text/css</code>
        : <a>owner node</a>
        :: <var>element</var>
        : <{style/media}>
        :: The <code>media</code> attribute of <var>element</var>.
            <p class="note">
              This is a reference to the (possibly absent at this time) attribute, rather than a
              copy of the attribute's current value. The CSSOM specification defines what happens
              when the attribute is dynamically set, changed, or removed.
            </p>
        : <{style/title}>
        :: The <{style/title}> attribute of <var>element</var>.
            <p class="note">Again, this is a <em>reference</em> to the attribute.</p>
        : <a>alternate flag</a>
        :: Unset.
        : <a>origin-clean flag</a>
        :: Set.
        : <a>parent CSS style sheet</a>
        : <a>owner CSS rule</a>
        :: null
        : <a>disabled flag</a>
        :: Left at its default value.
        : <a>CSS rules</a>
        :: Left uninitialized.

    This specification does not define any other styling language's
    <i>update a <code>style</code> block</i> algorithm.

    Once the attempts to obtain the style sheet's <a>critical subresources</a>, if any, are
    complete, or, if the style sheet has no <a>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>queue a task</a> to <a>fire a simple event</a> named <code>load</code> at the
    <{style}> element, or, if one of the style sheet's <a>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>queue a task</a> to <a>fire a simple event</a>
    named <code>error</code> at the <{style}> 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.

    The <a>task source</a> for these <a>tasks</a> is the <a>DOM manipulation task source</a>.

    The element must <a>delay the load event</a> of the element's <a>node document</a> until all the
    attempts to obtain the style sheet's <a>critical subresources</a>, if any, are complete.
  </div>

  <p class="note">
    This specification does not specify a style system, but CSS is expected to be supported by most
    Web browsers. [[!CSS-2015]]
  </p>

  <div class="impl">
    The <dfn attribute for="HTMLStyleElement"><code>media</code></dfn>,
    <dfn attribute for="HTMLStyleElement"><code>nonce</code></dfn>, and
    <dfn attribute for="HTMLStyleElement"><code>type</code></dfn>
    IDL attributes must <a>reflect</a> the respective content
    attributes of the same name.
  </div>

  The <code>LinkStyle</code> interface is also implemented by this element. [[!CSSOM]]

  <div class="example">
    The following document has its stress 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.

    <pre highlight="html">&lt;!DOCTYPE html&gt;
      &lt;html&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="interactions-of-styling-and-scripting">Interactions of styling and scripting</h4>

  Style sheets, whether added by a <{link}> element, a <{style}> element, an
  <code>&lt;?xml-stylesheet?&gt;</code> PI, an HTTP <code>Link</code> header, or some other
  mechanism, have a <dfn>style sheet ready</dfn> flag, which is initially unset.

  When a style sheet is ready to be applied, its <a>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
  <{style}> element with no <code>@import</code> rules), then the style rules must be
  <a>immediately</a> made available to script; otherwise, the style rules must only be made
  available to script once the <a>event loop</a> reaches its <i>update the rendering</i> step.

  A style sheet in the context of the {{Document}} of an <a>HTML parser</a> or <a>XML parser</a> is
  said to be <dfn>a style sheet that is blocking scripts</dfn> if the element was created by that
  {{Document}}'s parser, and the element is either a <{style}> element or a <{link}> element that
  was an <a href="#link-type-stylesheet">external resource link</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>style sheet ready</a> flag is not yet set, and, the last time the
  <a>event loop</a> reached step 1, the element was in that {{Document}}, 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 class="note">
    Giving up on a style sheet before the style sheet loads, if the style sheet eventually does
    still load, means that the script might end up operating with incorrect information. For
    example, if a style sheet sets the color of an element to green, but a script that inspects
    the resulting style is executed before the sheet is loaded, the script will find that the
    element is black (or whatever the default color is), and might thus make poor choices (e.g.,
    deciding to use black as the color elsewhere on the page, instead of green). Implementors have
    to balance the likelihood of a script using incorrect information with the performance impact
    of doing nothing while waiting for a slow network request to finish.
  </p>

  A {{Document}} <dfn lt="have a style sheet that is blocking scripts|has a style sheet that is blocking scripts">has a style sheet that is blocking scripts</dfn> if there is either
  <a>a style sheet that is blocking scripts</a> in the context of that {{Document}}, or
  if that {{Document}} is in a <a>browsing context</a> that has a
  <a>parent browsing context</a>, and the <a>active document</a> of that
  <a>parent browsing context</a> itself <a>has a style sheet that is blocking scripts</a>.

  A {{Document}} <dfn>has no style sheet that is blocking scripts</dfn> if it does not
  <a>have a style sheet that is blocking scripts</a> as defined in the previous paragraph.

</section>