From c97651a78f80d2eefe51b5f59bde5b97a35f4ee0 Mon Sep 17 00:00:00 2001
From: Domenic Denicola <d@domenic.me>
Date: Sun, 6 Aug 2023 06:34:23 -0400
Subject: [PATCH] Meta: change <ref> syntax

Follows https://github.com/whatwg/wattsi/pull/152.
---
 source | 1516 +++++++++++++++++++++++++++++---------------------------
 1 file changed, 773 insertions(+), 743 deletions(-)

diff --git a/source b/source
index 28118af9cf1..0fcbeed5034 100644
--- a/source
+++ b/source
@@ -797,7 +797,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
   a quick introduction to some common pitfalls in HTML application development.</p>
 
   <p>The security model of the web is based on the concept of "origins", and correspondingly many of
-  the potential attacks on the web involve cross-origin actions. <ref spec=ORIGIN></p>
+  the potential attacks on the web involve cross-origin actions. <ref>ORIGIN</ref></p>
 
   <dl>
    <dt>Not validating user input</dt>
@@ -1201,7 +1201,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
     <div class="example">
 
      <p>For example, the restriction on using UTF-7 exists purely to avoid authors falling prey to a
-     known cross-site-scripting attack using UTF-7. <ref spec=UTF7></p>
+     known cross-site-scripting attack using UTF-7. <ref>UTF7</ref></p>
 
     </div>
    </dd>
@@ -1473,7 +1473,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
   <p>The following documents might be of interest to readers of this specification.</p>
 
   <dl>
-   <dt><cite>Character Model for the World Wide Web 1.0: Fundamentals</cite> <ref spec=CHARMOD></dt>
+   <dt><cite>Character Model for the World Wide Web 1.0: Fundamentals</cite> <ref>CHARMOD</ref></dt>
 
    <dd><blockquote><p>This Architectural Specification provides authors of specifications, software
    developers, and content developers with a common reference for interoperable text manipulation on
@@ -1482,7 +1482,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
    'string', a reference processing model, choice and identification of character encodings,
    character escaping, and string indexing.</p></blockquote></dd>
 
-   <dt><cite>Unicode Security Considerations</cite> <ref spec=UTR36></dt>
+   <dt><cite>Unicode Security Considerations</cite> <ref>UTR36</ref></dt>
 
    <dd><blockquote><p>Because Unicode contains such a large number of characters and incorporates
    the varied writing systems of the world, incorrect usage can expose programs or systems to
@@ -1491,7 +1491,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
    system analysts, standards developers, and users should take into account, and provides specific
    recommendations to reduce the risk of problems.</p></blockquote></dd>
 
-   <dt><cite>Web Content Accessibility Guidelines (WCAG)</cite> <ref spec=WCAG></dt>
+   <dt><cite>Web Content Accessibility Guidelines (WCAG)</cite> <ref>WCAG</ref></dt>
 
    <dd><blockquote><p>Web Content Accessibility Guidelines (WCAG) covers a wide range of
    recommendations for making web content more accessible. Following these guidelines will make
@@ -1501,7 +1501,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
    guidelines will also often make your web content more usable to users in
    general.</p></blockquote></dd>
 
-   <dt w-nodev><cite>Authoring Tool Accessibility Guidelines (ATAG) 2.0</cite> <ref spec=ATAG></dt>
+   <dt w-nodev><cite>Authoring Tool Accessibility Guidelines (ATAG) 2.0</cite> <ref>ATAG</ref></dt>
 
    <dd w-nodev><blockquote><p>This specification provides guidelines for designing web content
    authoring tools that are more accessible for people with disabilities. An authoring tool that
@@ -1509,7 +1509,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
    to authors with disabilities as well as by enabling, supporting, and promoting the production of
    accessible web content by all authors.</p></blockquote></dd>
 
-   <dt w-nodev><cite>User Agent Accessibility Guidelines (UAAG) 2.0</cite> <ref spec=UAAG></dt>
+   <dt w-nodev><cite>User Agent Accessibility Guidelines (UAAG) 2.0</cite> <ref>UAAG</ref></dt>
 
    <dd w-nodev><blockquote><p>This document provides guidelines for designing user agents that
    lower barriers to web accessibility for people with disabilities. User agents include browsers
@@ -1524,7 +1524,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
 
   <h2 split-filename="infrastructure" id="infrastructure">Common infrastructure</h2>
 
-  <p>This specification depends on <cite>Infra</cite>. <ref spec=INFRA></p>
+  <p>This specification depends on <cite>Infra</cite>. <ref>INFRA</ref></p>
 
   <h3>Terminology</h3>
 
@@ -1550,7 +1550,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
   <p>In the context of the DOM structures, the terms <span data-x="HTML documents">HTML
   document</span> and <span data-x="XML documents">XML document</span> are used as defined in
   <cite>DOM</cite>, and refer specifically to two different modes that <code>Document</code> objects
-  can find themselves in. <ref spec=DOM> (Such uses are always hyperlinked to their
+  can find themselves in. <ref>DOM</ref> (Such uses are always hyperlinked to their
   definition.)</p>
 
   <p>In the context of byte streams, the term HTML document refers to resources labeled as
@@ -1712,7 +1712,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
 
   <p>What some specifications, in particular the HTTP specifications, refer to as a
   <i>representation</i> is referred to in this specification as a <dfn data-x="">resource</dfn>.
-  <ref spec=HTTP></p>
+  <ref>HTTP</ref></p>
 
   <p>A resource's <dfn>critical subresources</dfn> are those that the resource needs to have
   available to be correctly processed. Which resources are considered critical or not is defined by
@@ -1748,7 +1748,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
 
   <p>Attribute names are said to be <dfn>XML-compatible</dfn> if they match the <code
   data-x="xml-Name">Name</code> production defined in XML and they contain no U+003A COLON
-  characters (:). <ref spec=XML></p>
+  characters (:). <ref>XML</ref></p>
 
 
   <h4>DOM trees</h4>
@@ -1913,7 +1913,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
   is expected to be user-agent- and platform-specific. Some UAs might opt to support a plugin
   mechanism such as the Netscape Plugin API; others might use remote content converters or have
   built-in support for certain types. Indeed, this specification doesn't require user agents to
-  support plugins at all. <ref spec=NPAPI></p>
+  support plugins at all. <ref>NPAPI</ref></p>
 
   <div w-nodev>
 
@@ -1941,7 +1941,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
   <span>encoding</span> has an <dfn data-x-href="https://encoding.spec.whatwg.org/#name">encoding
   name</dfn> and one or more <dfn data-x="encoding label"
   data-x-href="https://encoding.spec.whatwg.org/#label">encoding labels</dfn>, referred to as the
-  encoding's <i>name</i> and <i>labels</i> in the Encoding standard. <ref spec=ENCODING></p>
+  encoding's <i>name</i> and <i>labels</i> in the Encoding standard. <ref>ENCODING</ref></p>
 
 
 
@@ -1992,8 +1992,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
     them.</p>
 
     <p>User agents that support scripting must also be conforming implementations of the IDL
-    fragments in this specification, as described in <cite>Web IDL</cite>. <ref
-    spec=WEBIDL></p>
+    fragments in this specification, as described in <cite>Web IDL</cite>. <ref>WEBIDL</ref></p>
 
     <p class="note">Unless explicitly stated, specifications that override the semantics of HTML
     elements do not override the requirements on DOM objects representing those elements. For
@@ -2067,7 +2066,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
     document conforms when parsed with a <span data-x="concept-document-bc">browsing context</span>
     in which scripts execute, and that the scripts never cause non-conforming states to occur other
     than transiently during script execution itself. (This is only a "SHOULD" and not a "MUST"
-    requirement because it has been proven to be impossible. <ref spec=COMPUTABLE>)</p>
+    requirement because it has been proven to be impossible. <ref>COMPUTABLE</ref>)</p>
 
     <p>The term "HTML validator" can be used to refer to a conformance checker that itself conforms
     to the applicable requirements of this specification.</p>
@@ -2196,7 +2195,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
    <dt>Infra</dt>
 
    <dd>
-    <p>The following terms are defined in <cite>Infra</cite>: <ref spec=INFRA></p>
+    <p>The following terms are defined in <cite>Infra</cite>: <ref>INFRA</ref></p>
 
     <ul class="brief">
      <li>The general iteration terms <dfn data-x-href="https://infra.spec.whatwg.org/#iteration-while">while</dfn>,
@@ -2310,14 +2309,13 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
 
    <dd>
     <p>The Unicode character set is used to represent textual data, and <cite>Encoding</cite>
-    defines requirements around <span data-x="encoding">character encodings</span>. <ref
-    spec=UNICODE></p>
+    defines requirements around <span data-x="encoding">character encodings</span>.
+    <ref>UNICODE</ref></p>
 
     <p class="note">This specification <a href="#encoding-terminology">introduces terminology</a>
     based on the terms defined in those specifications, as described earlier.</p>
 
-    <p>The following terms are used as defined in <cite>Encoding</cite>: <ref
-    spec=ENCODING></p>
+    <p>The following terms are used as defined in <cite>Encoding</cite>: <ref>ENCODING</ref></p>
 
     <ul class="brief">
      <li><dfn data-x-href="https://encoding.spec.whatwg.org/#concept-encoding-get">Getting an
@@ -2354,7 +2352,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
    <dd>
     <p>Implementations that support <span>the XML syntax</span> for HTML must support some version
     of XML, as well as its corresponding namespaces specification, because that syntax uses an XML
-    serialization with namespaces. <ref spec=XML> <ref spec=XMLNS></p>
+    serialization with namespaces. <ref>XML</ref> <ref>XMLNS</ref></p>
 
     <p>Data mining tools and other user agents that perform operations on content without running
     scripts, evaluating CSS or XPath expressions, or otherwise exposing the resulting DOM to
@@ -2370,29 +2368,29 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
     <p>The attribute with the name <dfn
     data-x-href="https://www.w3.org/TR/xml/#sec-white-space"><code
     data-x="attr-xml-space">space</code></dfn> in the <span>XML namespace</span> is defined by
-    <cite>Extensible Markup Language</cite> (<cite>XML</cite>). <ref spec=XML></p>
+    <cite>Extensible Markup Language</cite> (<cite>XML</cite>). <ref>XML</ref></p>
 
     <p>The <dfn data-x-href="https://www.w3.org/TR/xml/#NT-Name"><code
-    data-x="xml-Name">Name</code></dfn> production is defined in <cite>XML</cite>. <ref
-    spec=XML></p>
+    data-x="xml-Name">Name</code></dfn> production is defined in <cite>XML</cite>.
+    <ref>XML</ref></p>
 
     <p>This specification also references the <dfn
     data-x-href="https://www.w3.org/TR/xml-stylesheet/#the-xml-stylesheet-processing-instruction"><code>&lt;?xml-stylesheet?></code></dfn>
     processing instruction, defined in <cite>Associating Style Sheets with XML documents</cite>.
-    <ref spec=XMLSSPI></p>
+    <ref>XMLSSPI</ref></p>
 
     <p>This specification also non-normatively mentions the <dfn><code>XSLTProcessor</code></dfn>
     interface and its <dfn><code
     data-x="dom-XSLTProcessor-transformToFragment">transformToFragment()</code></dfn> and <dfn><code
-    data-x="dom-XSLTProcessor-transformToDocument">transformToDocument()</code></dfn> methods. <ref
-    spec=XSLTP></p>
+    data-x="dom-XSLTProcessor-transformToDocument">transformToDocument()</code></dfn> methods.
+    <ref>XSLTP</ref></p>
    </dd>
 
 
    <dt>URLs</dt>
 
    <dd>
-    <p>The following terms are defined in <cite>URL</cite>: <ref spec=URL></p>
+    <p>The following terms are defined in <cite>URL</cite>: <ref>URL</ref></p>
 
     <ul class="brief">
      <li><dfn data-x="concept-host" data-x-href="https://url.spec.whatwg.org/#concept-host">host</dfn></li>
@@ -2459,26 +2457,41 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
     <p>A number of schemes and protocols are referenced by this specification also:</p>
 
     <ul class="brief">
-     <li>The <dfn data-x="about protocol" data-x-href="https://www.rfc-editor.org/rfc/rfc6694#section-2"><code>about:</code></dfn> scheme <ref spec=ABOUT></li>
-     <li>The <dfn data-x="blob protocol" data-x-href="https://w3c.github.io/FileAPI/#DefinitionOfScheme"><code>blob:</code></dfn> scheme <ref spec=FILEAPI></li>
-     <li>The <dfn data-x="data protocol" data-x-href="https://www.rfc-editor.org/rfc/rfc2397#section-2"><code>data:</code></dfn> scheme <ref spec=RFC2397></li>
-     <li>The <dfn data-x="http protocol" data-x-href="https://httpwg.org/specs/rfc7230.html#http.uri"><code>http:</code></dfn> scheme <ref spec=HTTP></li>
-     <li>The <dfn data-x="https protocol" data-x-href="https://httpwg.org/specs/rfc7230.html#https.uri"><code>https:</code></dfn> scheme <ref spec=HTTP></li>
-     <li>The <dfn data-x="mailto protocol" data-x-href="https://www.rfc-editor.org/rfc/rfc6068#section-2"><code>mailto:</code></dfn> scheme <ref spec=MAILTO></li>
-     <li>The <dfn data-x="sms protocol" data-x-href="https://www.rfc-editor.org/rfc/rfc5724#section-2"><code>sms:</code></dfn> scheme <ref spec=SMS></li>
-     <li>The <dfn data-x="urn protocol" data-x-href="https://www.rfc-editor.org/rfc/rfc2141#section-2"><code>urn:</code></dfn> scheme <ref spec=URN></li>
+     <li>The <dfn data-x="about protocol"
+     data-x-href="https://www.rfc-editor.org/rfc/rfc6694#section-2"><code>about:</code></dfn> scheme
+     <ref>ABOUT</ref></li>
+     <li>The <dfn data-x="blob protocol"
+     data-x-href="https://w3c.github.io/FileAPI/#DefinitionOfScheme"><code>blob:</code></dfn> scheme
+     <ref>FILEAPI</ref></li>
+     <li>The <dfn data-x="data protocol"
+     data-x-href="https://www.rfc-editor.org/rfc/rfc2397#section-2"><code>data:</code></dfn> scheme
+     <ref>RFC2397</ref></li>
+     <li>The <dfn data-x="http protocol"
+     data-x-href="https://httpwg.org/specs/rfc7230.html#http.uri"><code>http:</code></dfn> scheme
+     <ref>HTTP</ref></li>
+     <li>The <dfn data-x="https protocol"
+     data-x-href="https://httpwg.org/specs/rfc7230.html#https.uri"><code>https:</code></dfn> scheme
+     <ref>HTTP</ref></li>
+     <li>The <dfn data-x="mailto protocol"
+     data-x-href="https://www.rfc-editor.org/rfc/rfc6068#section-2"><code>mailto:</code></dfn>
+     scheme <ref>MAILTO</ref></li>
+     <li>The <dfn data-x="sms protocol"
+     data-x-href="https://www.rfc-editor.org/rfc/rfc5724#section-2"><code>sms:</code></dfn> scheme
+     <ref>SMS</ref></li>
+     <li>The <dfn data-x="urn protocol"
+     data-x-href="https://www.rfc-editor.org/rfc/rfc2141#section-2"><code>urn:</code></dfn> scheme
+     <ref>URN</ref></li>
     </ul>
 
     <p><dfn data-x-href="https://www.w3.org/TR/media-frags/#media-fragment-syntax">Media fragment
-    syntax</dfn> is defined in <cite>Media Fragments URI</cite>. <ref
-    spec=MEDIAFRAG></p>
+    syntax</dfn> is defined in <cite>Media Fragments URI</cite>. <ref>MEDIAFRAG</ref></p>
    </dd>
 
 
    <dt>HTTP and related specifications</dt>
 
    <dd>
-    <p>The following terms are defined in the HTTP specifications: <ref spec=HTTP></p>
+    <p>The following terms are defined in the HTTP specifications: <ref>HTTP</ref></p>
 
     <ul class="brief">
      <li>`<dfn data-x="http-accept" data-x-href="https://httpwg.org/specs/rfc7231.html#header.accept"><code>Accept</code></dfn>` header</li>
@@ -2492,7 +2505,8 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
      <li>`<dfn data-x="http-referer" data-x-href="https://httpwg.org/specs/rfc7231.html#header.referer"><code>Referer</code></dfn>` header</li>
     </ul>
 
-    <p>The following terms are defined in <cite>HTTP State Management Mechanism</cite>: <ref spec=COOKIES></p>
+    <p>The following terms are defined in <cite>HTTP State Management Mechanism</cite>:
+    <ref>COOKIES</ref></p>
 
     <ul class="brief">
      <li><dfn data-x-href="https://httpwg.org/specs/rfc6265.html#sane-cookie-syntax">cookie-string</dfn></li>
@@ -2500,15 +2514,15 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
      <li>`<dfn data-x="http-cookie" data-x-href="https://httpwg.org/specs/rfc6265.html#cookie"><code>Cookie</code></dfn>` header</li>
     </ul>
 
-    <p>The following term is defined in <cite>Web Linking</cite>: <ref spec=WEBLINK></p>
+    <p>The following term is defined in <cite>Web Linking</cite>: <ref>WEBLINK</ref></p>
 
     <ul class="brief">
      <li>`<dfn data-x="http-link" data-x-href="https://httpwg.org/specs/rfc8288.html#header"><code>Link</code></dfn>` header</li>
      <li><dfn data-x="parsing a link field value" data-x-href="https://httpwg.org/specs/rfc8288.html#parse-fv">Parsing a `<code>Link</code>` field value</dfn></li>
     </ul>
 
-    <p>The following terms are defined in <cite>Structured Field Values for HTTP</cite>: <ref
-    spec=STRUCTURED-FIELDS></p>
+    <p>The following terms are defined in <cite>Structured Field Values for HTTP</cite>:
+    <ref>STRUCTURED-FIELDS</ref></p>
 
     <ul class="brief">
      <li><dfn data-x="http-structured-header" data-x-href="https://httpwg.org/specs/rfc8941.html">structured header</dfn></li>
@@ -2517,7 +2531,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
      <li><dfn data-x="http-structured-header-parameters" data-x-href="https://httpwg.org/specs/rfc8941.html#param">parameters</dfn></li>
     </ul>
 
-    <p>The following terms are defined in <cite>MIME Sniffing</cite>: <ref spec=MIMESNIFF></p>
+    <p>The following terms are defined in <cite>MIME Sniffing</cite>: <ref>MIMESNIFF</ref></p>
 
     <ul class="brief">
      <li><dfn data-x-href="https://mimesniff.spec.whatwg.org/#mime-type">MIME type</dfn></li>
@@ -2541,7 +2555,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
    <dt>Fetch</dt>
 
    <dd>
-    <p>The following terms are defined in <cite>Fetch</cite>: <ref spec=FETCH></p>
+    <p>The following terms are defined in <cite>Fetch</cite>: <ref>FETCH</ref></p>
 
     <ul class="brief">
      <li><dfn data-x="header-abnf" data-x-href="https://fetch.spec.whatwg.org/#abnf">ABNF</dfn></li>
@@ -2665,8 +2679,8 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
      </li>
     </ul>
 
-    <p>The following terms are defined in <cite>Referrer Policy</cite>: <ref
-    spec=REFERRERPOLICY></p>
+    <p>The following terms are defined in <cite>Referrer Policy</cite>:
+    <ref>REFERRERPOLICY</ref></p>
 
     <ul class="brief">
      <li><dfn data-x-href="https://w3c.github.io/webappsec-referrer-policy/#referrer-policy">referrer policy</dfn></li>
@@ -2679,13 +2693,13 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
      <li>The <dfn data-x-href="https://w3c.github.io/webappsec-referrer-policy/#default-referrer-policy">default referrer policy</dfn></li>
     </ul>
 
-    <p>The following terms are defined in <cite>Mixed Content</cite>: <ref spec=MIX></p>
+    <p>The following terms are defined in <cite>Mixed Content</cite>: <ref>MIX</ref></p>
 
     <ul class="brief">
      <li><dfn data-x-href="https://w3c.github.io/webappsec-mixed-content/#a-priori-authenticated-url"><i>a priori</i> authenticated URL</dfn></li>
     </ul>
 
-    <p>The following terms are defined in <cite>Subresource Integrity</cite>: <ref spec=SRI></p>
+    <p>The following terms are defined in <cite>Subresource Integrity</cite>: <ref>SRI</ref></p>
 
     <ul class="brief">
      <li><dfn data-x-href="https://w3c.github.io/webappsec-subresource-integrity/#parse-metadata">parse integrity metadata</dfn></li>
@@ -2696,7 +2710,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
    <dt>Paint Timing</dt>
 
    <dd>
-    <p>The following terms are defined in <cite>Paint Timing</cite>: <ref spec=PAINTTIMING></p>
+    <p>The following terms are defined in <cite>Paint Timing</cite>: <ref>PAINTTIMING</ref></p>
 
     <ul class="brief">
      <li><dfn data-x-href="https://w3c.github.io/paint-timing/#mark-paint-timing">mark paint timing</dfn></li>
@@ -2706,7 +2720,8 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
    <dt>Navigation Timing</dt>
 
    <dd>
-    <p>The following terms are defined in <cite>Navigation Timing</cite>: <ref spec=NAVIGATIONTIMING></p>
+    <p>The following terms are defined in <cite>Navigation Timing</cite>:
+    <ref>NAVIGATIONTIMING</ref></p>
 
     <ul class="brief">
      <li><dfn data-x-href="https://w3c.github.io/navigation-timing/#dfn-create-the-navigation-timing-entry">create the navigation timing entry</dfn></li>
@@ -2721,7 +2736,8 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
    <dt>Resource Timing</dt>
 
    <dd>
-    <p>The following terms are defined in <cite>Resource Timing</cite>: <ref spec=RESOURCETIMING></p>
+    <p>The following terms are defined in <cite>Resource Timing</cite>:
+    <ref>RESOURCETIMING</ref></p>
 
     <ul class="brief">
      <li><dfn data-x-href="https://w3c.github.io/resource-timing/#dfn-mark-resource-timing">Mark resource timing</dfn></li>
@@ -2730,7 +2746,8 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
    <dt>Performance Timeline</dt>
 
    <dd>
-    <p>The following terms are defined in <cite>Performance Timeline</cite>: <ref spec=PERFORMANCETIMELINE></p>
+    <p>The following terms are defined in <cite>Performance Timeline</cite>:
+    <ref>PERFORMANCETIMELINE</ref></p>
 
     <ul class="brief">
      <li><dfn data-x-href="https://w3c.github.io/performance-timeline/#dom-performanceentry"><code>PerformanceEntry</code></dfn> and its
@@ -2746,7 +2763,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
    <dt>Long Tasks</dt>
 
    <dd>
-    <p>The following terms are defined in <cite>Long Tasks</cite>: <ref spec=LONGTASKS></p>
+    <p>The following terms are defined in <cite>Long Tasks</cite>: <ref>LONGTASKS</ref></p>
 
     <ul class="brief">
      <li><dfn data-x-href="https://w3c.github.io/longtasks/#report-long-tasks">report long tasks</dfn></li>
@@ -2757,7 +2774,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
 
    <dd>
     <p>The IDL fragments in this specification must be interpreted as required for conforming IDL
-    fragments, as described in <cite>Web IDL</cite>. <ref spec=WEBIDL></p>
+    fragments, as described in <cite>Web IDL</cite>. <ref>WEBIDL</ref></p>
 
     <p>The following terms are defined in <cite>Web IDL</cite>:</p>
 
@@ -2882,7 +2899,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
 
    <dd>
     <p>Some parts of the language described by this specification only support JavaScript as the
-    underlying scripting language. <ref spec=JAVASCRIPT></p>
+    underlying scripting language. <ref>JAVASCRIPT</ref></p>
 
     <p class="note">The term "JavaScript" is used to refer to ECMA-262, rather than the official
     term ECMAScript, since the term JavaScript is more widely known.</p>
@@ -3032,11 +3049,11 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
     </ul>
 
     <p>Users agents that support JavaScript must also implement <cite>ECMAScript
-    Internationalization API</cite>. <ref spec=JSINTL></p>
+    Internationalization API</cite>. <ref>JSINTL</ref></p>
 
     <p>User agents that support JavaScript must also implement the <cite>Import Attributes</cite>
-    proposal. The following terms are defined there, and used in this specification: <ref
-    spec=JSIMPORTATTRIBUTES></p>
+    proposal. The following terms are defined there, and used in this specification:
+    <ref>JSIMPORTATTRIBUTES</ref></p>
 
     <ul class="brief">
      <li>The <dfn data-x-href="https://tc39.es/proposal-import-attributes/#sec-modulerequest-record">ModuleRequest Record</dfn> specification type</li>
@@ -3044,8 +3061,8 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
     </ul>
 
     <p>User agents that support JavaScript must also implement the <cite>JSON modules</cite>
-    proposal. The following terms are defined there, and used in this specification: <ref
-    spec=JSJSONMODULES></p>
+    proposal. The following terms are defined there, and used in this specification:
+    <ref>JSJSONMODULES</ref></p>
 
     <ul class="brief">
      <li>The <dfn data-x-href="https://tc39.es/proposal-json-modules/#sec-create-default-export-synthetic-module">CreateDefaultExportSyntheticModule</dfn> abstract operation</li>
@@ -3056,7 +3073,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
 
     <p>User agents that support JavaScript must also implement the <cite>Resizable ArrayBuffer and
     growable SharedArrayBuffer</cite> proposal. The following terms are defined there, and used in
-    this specification: <ref spec=JSRESIZABLEBUFFERS></p>
+    this specification: <ref>JSRESIZABLEBUFFERS</ref></p>
 
     <ul class="brief">
      <li>The <dfn data-x-href="https://tc39.es/proposal-resizablearraybuffer/#sec-isarraybufferviewoutofbounds">IsArrayBufferViewOutOfBounds</dfn> abstract operation</li>
@@ -3066,8 +3083,8 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
    <dt>WebAssembly</dt>
 
    <dd>
-    <p>The following term is defined in <cite>WebAssembly JavaScript Interface</cite>: <ref
-    spec=WASMJS></p>
+    <p>The following term is defined in <cite>WebAssembly JavaScript Interface</cite>:
+    <ref>WASMJS</ref></p>
 
     <ul class="brief">
      <li><dfn data-x-href="https://webassembly.github.io/spec/js-api/#module"><code>WebAssembly.Module</code></dfn></li>
@@ -3079,14 +3096,13 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
    <dd>
     <p>The Document Object Model (DOM) is a representation &mdash; a model &mdash; of a document and
     its content. The DOM is not just an API; the conformance criteria of HTML implementations are
-    defined, in this specification, in terms of operations on the DOM. <ref spec=DOM></p>
+    defined, in this specification, in terms of operations on the DOM. <ref>DOM</ref></p>
 
     <p>Implementations must support DOM and the events defined in UI Events, because this
     specification is defined in terms of the DOM, and some of the features are defined as extensions
-    to the DOM interfaces. <ref spec=DOM> <ref spec=UIEVENTS></p>
+    to the DOM interfaces. <ref>DOM</ref> <ref>UIEVENTS</ref></p>
 
-    <p>In particular, the following features are defined in <cite>DOM</cite>: <ref
-    spec=DOM></p>
+    <p>In particular, the following features are defined in <cite>DOM</cite>: <ref>DOM</ref></p>
 
     <ul class="brief">
      <li><dfn data-x-href="https://dom.spec.whatwg.org/#interface-attr"><code>Attr</code></dfn> interface</li>
@@ -3254,7 +3270,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
      <li>The <dfn data-x-href="https://dom.spec.whatwg.org/#concept-element-attributes-get-by-name">get an attribute by name</dfn> algorithm</li>
     </ul>
 
-    <p>The following features are defined in <cite>UI Events</cite>: <ref spec=UIEVENTS></p>
+    <p>The following features are defined in <cite>UI Events</cite>: <ref>UIEVENTS</ref></p>
 
     <ul class="brief">
      <li>The <dfn data-x-href="https://w3c.github.io/uievents/#mouseevent"><code>MouseEvent</code></dfn> interface</li>
@@ -3287,7 +3303,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
      <li><dfn data-x="event-keyup" data-x-href="https://w3c.github.io/uievents/#event-type-keyup"><code>keyup</code></dfn> event</li>
     </ul>
 
-    <p>The following features are defined in <cite>Touch Events</cite>: <ref spec=TOUCH></p>
+    <p>The following features are defined in <cite>Touch Events</cite>: <ref>TOUCH</ref></p>
 
     <ul class="brief">
      <li><dfn data-x-href="https://w3c.github.io/touch-events/#touch-interface"><code>Touch</code></dfn> interface</li>
@@ -3295,7 +3311,8 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
      <li><dfn data-x="event-touchend" data-x-href="https://w3c.github.io/touch-events/#event-touchend"><code>touchend</code></dfn> event</li>
     </ul>
 
-    <p>The following features are defined in <cite>Pointer Events</cite>: <ref spec=POINTEREVENTS></p>
+    <p>The following features are defined in <cite>Pointer Events</cite>:
+    <ref>POINTEREVENTS</ref></p>
 
     <ul class="brief">
      <li>The <dfn data-x-href="https://w3c.github.io/pointerevents/#pointerevent-interface"><code>PointerEvent</code></dfn> interface</li>
@@ -3306,7 +3323,8 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
      <li><dfn data-x="event-pointercancel" data-x-href="https://w3c.github.io/pointerevents/#the-pointercancel-event"><code>pointercancel</code></dfn> event</li>
     </ul>
 
-    <p>The following events are defined in <cite>Clipboard API and events</cite>: <ref spec=CLIPBOARD-APIS></p>
+    <p>The following events are defined in <cite>Clipboard API and events</cite>:
+    <ref>CLIPBOARD-APIS</ref></p>
 
     <ul class="brief">
      <li><dfn data-x="event-copy" data-x-href="https://w3c.github.io/clipboard-apis/#clipboard-event-copy"><code>copy</code></dfn> event</li>
@@ -3319,14 +3337,15 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
     data-x="">click</code>" or "if the event name is <code data-x="">keypress</code>". The terms
     "name" and "type" for events are synonymous.</p>
 
-    <p>The following features are defined in <cite>DOM Parsing and Serialization</cite>: <ref spec=DOMPARSING></p>
+    <p>The following features are defined in <cite>DOM Parsing and Serialization</cite>:
+    <ref>DOMPARSING</ref></p>
 
     <ul class="brief">
      <li><dfn data-x="dom-innerHTML" data-x-href="https://w3c.github.io/DOM-Parsing/#dom-element-innerhtml"><code>innerHTML</code></dfn></li>
      <li><dfn data-x="dom-outerHTML" data-x-href="https://w3c.github.io/DOM-Parsing/#dom-element-outerhtml"><code>outerHTML</code></dfn></li>
     </ul>
 
-    <p>The following features are defined in <cite>Selection API</cite>: <ref spec=SELECTION></p>
+    <p>The following features are defined in <cite>Selection API</cite>: <ref>SELECTION</ref></p>
 
     <ul class="brief">
      <li><dfn data-x="document-selection" data-x-href="https://w3c.github.io/selection-api/#dfn-selection">selection</dfn></li>
@@ -3334,11 +3353,11 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
     </ul>
 
     <p class="note">User agents are encouraged to implement the features described in
-    <cite>execCommand</cite>. <ref spec=EXECCOMMAND></p>
+    <cite>execCommand</cite>. <ref>EXECCOMMAND</ref></p>
 
     <p>The following parts of <cite>Fullscreen API</cite> are referenced from this
     specification, in part to define the rendering of <code>dialog</code> elements, and also to
-    define how the Fullscreen API interacts with HTML: <ref spec=FULLSCREEN></p>
+    define how the Fullscreen API interacts with HTML: <ref>FULLSCREEN</ref></p>
 
     <ul class="brief">
      <li><dfn data-x-href="https://fullscreen.spec.whatwg.org/#dom-element-requestfullscreen"><code data-x="dom-element-requestFullscreen">requestFullscreen()</code></dfn></li>
@@ -3355,7 +3374,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
     the <dfn data-x-href="https://w3c.github.io/hr-time/#dfn-coarsen-time">coarsen time</dfn>
     algorithm, and the <dfn
     data-x-href="https://w3c.github.io/hr-time/#dom-domhighrestimestamp"><code>DOMHighResTimeStamp</code></dfn>
-    typedef. <ref spec=HRT></p>
+    typedef. <ref>HRT</ref></p>
    </dd>
 
 
@@ -3363,8 +3382,8 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
    <dt>File API</dt>
 
    <dd>
-    <p>This specification uses the following features defined in <cite>File API</cite>: <ref
-    spec=FILEAPI></p>
+    <p>This specification uses the following features defined in <cite>File API</cite>:
+    <ref>FILEAPI</ref></p>
 
     <ul class="brief">
      <li>The <dfn data-x-href="https://w3c.github.io/FileAPI/#dfn-Blob"><code>Blob</code></dfn> interface and its
@@ -3388,16 +3407,16 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
 
    <dd><p>This specification uses <dfn
    data-x-href="https://w3c.github.io/IndexedDB/#cleanup-indexed-database-transactions">cleanup
-   Indexed Database transactions</dfn> defined by <cite>Indexed Database API</cite>. <ref
-   spec=INDEXEDDB></p>
+   Indexed Database transactions</dfn> defined by <cite>Indexed Database API</cite>.
+   <ref>INDEXEDDB</ref></p>
 
 
 
    <dt>Media Source Extensions</dt>
 
    <dd>
-    <p>The following terms are defined in <cite>Media Source Extensions</cite>: <ref
-    spec=MEDIASOURCE></p>
+    <p>The following terms are defined in <cite>Media Source Extensions</cite>:
+    <ref>MEDIASOURCE</ref></p>
 
     <ul class="brief">
      <li><dfn data-x-href="https://w3c.github.io/media-source/#idl-def-mediasource"><code>MediaSource</code></dfn> interface</li>
@@ -3408,8 +3427,8 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
    <dt>Media Capture and Streams</dt>
 
    <dd>
-    <p>The following terms are defined in <cite>Media Capture and Streams</cite>: <ref
-    spec=MEDIASTREAM></p>
+    <p>The following terms are defined in <cite>Media Capture and Streams</cite>:
+    <ref>MEDIASTREAM</ref></p>
 
     <ul class="brief">
      <li><dfn data-x-href="https://w3c.github.io/mediacapture-main/getusermedia.html#idl-def-mediastream"><code>MediaStream</code></dfn> interface</li>
@@ -3420,8 +3439,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
    <dt>Reporting</dt>
 
    <dd>
-    <p>The following terms are defined in <cite>Reporting</cite>: <ref
-    spec=REPORTING></p>
+    <p>The following terms are defined in <cite>Reporting</cite>: <ref>REPORTING</ref></p>
 
     <ul class="brief">
      <li><dfn data-x-href="https://w3c.github.io/reporting/#queue-report">Queue a report</dfn></li>
@@ -3434,8 +3452,8 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
    <dt>XMLHttpRequest</dt>
 
    <dd>
-    <p>The following features and terms are defined in <cite>XMLHttpRequest</cite>: <ref
-    spec=XHR></p>
+    <p>The following features and terms are defined in <cite>XMLHttpRequest</cite>:
+    <ref>XHR</ref></p>
 
     <ul class="brief">
      <li>The <dfn data-x-href="https://xhr.spec.whatwg.org/#xmlhttprequest"><code>XMLHttpRequest</code></dfn> interface, and its
@@ -3452,7 +3470,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
    <dt>Battery Status</dt>
 
    <dd>
-    <p>The following features are defined in <cite>Battery Status API</cite>: <ref spec=BATTERY></p>
+    <p>The following features are defined in <cite>Battery Status API</cite>: <ref>BATTERY</ref></p>
 
     <ul class="brief">
      <li><dfn data-x="dom-navigator-getBattery" data-x-href="https://w3c.github.io/battery/#widl-Navigator-getBattery-Promise-BatteryManager"><code>getBattery()</code></dfn> method</li>
@@ -3465,7 +3483,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
    <dd>
     <p>Implementations must support <cite>Media Queries</cite>. The <dfn
     data-x-href="https://drafts.csswg.org/mediaqueries/#typedef-media-condition">&lt;media-condition></dfn>
-    feature is defined therein. <ref spec=MQ></p>
+    feature is defined therein. <ref>MQ</ref></p>
    </dd>
 
 
@@ -3478,8 +3496,8 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
 
     <p>When this specification requires that something be <dfn data-x="parse something according to
     a CSS grammar" data-x-href="https://drafts.csswg.org/css-syntax/#parse-grammar">parsed according
-    to a particular CSS grammar</dfn>, the relevant algorithm in <cite>CSS Syntax</cite> must be followed,
-    including error handling rules. <ref spec=CSSSYNTAX></p>
+    to a particular CSS grammar</dfn>, the relevant algorithm in <cite>CSS Syntax</cite> must be
+    followed, including error handling rules. <ref>CSSSYNTAX</ref></p>
 
     <p class="example">For example, user agents are required to close all open constructs upon
     finding the end of a style sheet unexpectedly. Thus, when parsing the string "<code
@@ -3494,8 +3512,8 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
 
     <ol>
      <li><p>Let <var>color</var> be the result of <span data-x="parse something according to a CSS
-     grammar">parsing</span> <var>input</var> as a CSS <span>&lt;color></span>. <ref
-     spec=CSSCOLOR></p></li>
+     grammar">parsing</span> <var>input</var> as a CSS <span>&lt;color></span>.
+     <ref>CSSCOLOR</ref></p></li>
 
      <li><p>If <var>color</var> is failure, then return failure.</p></li>
 
@@ -3515,7 +3533,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
     </ol>
 
     <p>The following terms and features are defined in <cite>Cascading Style Sheets</cite>
-    (<cite>CSS</cite>): <ref spec=CSS></p>
+    (<cite>CSS</cite>): <ref>CSS</ref></p>
 
     <ul class="brief">
       <li><dfn data-x-href="https://drafts.csswg.org/css2/#viewport">viewport</dfn></li>
@@ -3547,10 +3565,11 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
 
     <p>The basic version of the <dfn
     data-x-href="https://drafts.csswg.org/css2/#display-prop">'display'</dfn> property
-    is defined in <cite>CSS</cite>, and the property is extended by other CSS
-    modules. <ref spec=CSS> <ref spec=CSSRUBY> <ref spec=CSSTABLE></p>
+    is defined in <cite>CSS</cite>, and the property is extended by other CSS modules.
+    <ref>CSS</ref> <ref>CSSRUBY</ref> <ref>CSSTABLE</ref></p>
 
-    <p>The following terms and features are defined in <cite>CSS Box Model</cite>: <ref spec=CSSBOX></p>
+    <p>The following terms and features are defined in <cite>CSS Box Model</cite>:
+    <ref>CSSBOX</ref></p>
 
     <ul>
       <li><dfn data-x-href="https://drafts.csswg.org/css-box/#content-area">content area</dfn></li>
@@ -3569,8 +3588,8 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
               <dfn data-x-href="https://drafts.csswg.org/css-box/#propdef-padding-right">'padding-right'</dfn> properties</li>
     </ul>
 
-    <p>The following features are defined in <cite>CSS Logical Properties</cite>: <ref
-    spec=CSSLOGICAL></p>
+    <p>The following features are defined in <cite>CSS Logical Properties</cite>:
+    <ref>CSSLOGICAL</ref></p>
 
     <ul class="brief">
       <li>The <dfn data-x-href="https://drafts.csswg.org/css-logical/#propdef-margin-block-start">'margin-block-start'</dfn>,
@@ -3604,8 +3623,8 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
       <li>The <dfn data-x-href="https://drafts.csswg.org/css-logical/#propdef-inset-block-end">'inset-block-end'</dfn> property</li>
     </ul>
 
-    <p>The following terms and features are defined in <cite>CSS Color</cite>: <ref
-    spec=CSSCOLOR></p>
+    <p>The following terms and features are defined in <cite>CSS Color</cite>:
+    <ref>CSSCOLOR</ref></p>
 
     <ul class="brief">
      <li><dfn data-x-href="https://drafts.csswg.org/css-color/#named-color">named color</dfn></li>
@@ -3619,7 +3638,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
      <li><dfn data-x-href="https://drafts.csswg.org/css-color/#valdef-color-profile-rendering-intent-relative-colorimetric">'relative-colorimetric'</dfn> rendering intent</li>
     </ul>
 
-    <p>The following terms are defined in <cite>CSS Images</cite>: <ref spec=CSSIMAGES></p>
+    <p>The following terms are defined in <cite>CSS Images</cite>: <ref>CSSIMAGES</ref></p>
 
     <ul class="brief">
      <li><dfn data-x-href="https://drafts.csswg.org/css-images/#default-object-size">default object size</dfn></li>
@@ -3634,11 +3653,11 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
 
     <p>The term <dfn data-x-href="https://drafts.csswg.org/css-images-4/#paint-source">paint
     source</dfn> is used as defined in <cite>CSS Images Level 4</cite>
-    to define the interaction of certain HTML elements with the CSS 'element()'
-    function. <ref spec=CSSIMAGES4></p>
+    to define the interaction of certain HTML elements with the CSS 'element()' function.
+    <ref>CSSIMAGES4</ref></p>
 
-    <p>The following features are defined in <cite>CSS Backgrounds and Borders</cite>: <ref
-    spec=CSSBG></p>
+    <p>The following features are defined in <cite>CSS Backgrounds and Borders</cite>:
+    <ref>CSSBG</ref></p>
 
     <ul class="brief">
       <li>The <dfn data-x-href="https://drafts.csswg.org/css-backgrounds/#propdef-background-color">'background-color'</dfn>,
@@ -3664,7 +3683,8 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
               properties</li>
     </ul>
 
-    <p><cite>CSS Backgrounds and Borders</cite> also defines the following border properties: <ref spec=CSSBG></p>
+    <p><cite>CSS Backgrounds and Borders</cite> also defines the following border properties:
+    <ref>CSSBG</ref></p>
 
     <table>
      <caption>Border properties
@@ -3695,7 +3715,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
        <td><dfn data-x-href="https://drafts.csswg.org/css-backgrounds/#propdef-border-right-color">'border-right-color'</dfn>
     </table>
 
-    <p>The following features are defined in <cite>CSS Box Alignment</cite>: <ref spec=CSSALIGN></p>
+    <p>The following features are defined in <cite>CSS Box Alignment</cite>: <ref>CSSALIGN</ref></p>
 
     <ul class="brief">
      <li>The <dfn data-x-href="https://drafts.csswg.org/css-align/#propdef-align-content">'align-content'</dfn> property</li>
@@ -3706,8 +3726,8 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
      <li>The <dfn data-x-href="https://drafts.csswg.org/css-align/#propdef-propdef-justify-items">'justify-items'</dfn> property</li>
     </ul>
 
-    <p>The following terms and features are defined in <cite>CSS Display</cite>: <ref
-    spec=CSSDISPLAY></p>
+    <p>The following terms and features are defined in <cite>CSS Display</cite>:
+    <ref>CSSDISPLAY</ref></p>
 
     <ul class="brief">
      <li><dfn data-x-href="https://drafts.csswg.org/css-display/#outer-display-type">outer display type</dfn></li>
@@ -3721,15 +3741,16 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
      <li><dfn data-x-href="https://drafts.csswg.org/css-display/#css-box">CSS box</dfn></li>
     </ul>
 
-    <p>The following features are defined in <cite>CSS Flexible Box Layout</cite>: <ref
-    spec=CSSFLEXBOX></p>
+    <p>The following features are defined in <cite>CSS Flexible Box Layout</cite>:
+    <ref>CSSFLEXBOX</ref></p>
 
     <ul class="brief">
       <li>The <dfn data-x-href="https://drafts.csswg.org/css-flexbox/#propdef-flex-direction">'flex-direction'</dfn> property</li>
       <li>The <dfn data-x-href="https://drafts.csswg.org/css-flexbox/#propdef-flex-wrap">'flex-wrap'</dfn> property</li>
     </ul>
 
-    <p>The following terms and features are defined in <cite>CSS Fonts</cite>: <ref spec=CSSFONTS></p>
+    <p>The following terms and features are defined in <cite>CSS Fonts</cite>:
+    <ref>CSSFONTS</ref></p>
 
     <ul class="brief">
       <li><dfn data-x-href="https://drafts.csswg.org/css-fonts/#first-available-font">first available font</dfn></li>
@@ -3756,7 +3777,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
       <li>The <dfn data-x-href="https://drafts.csswg.org/css-fonts/#valdef-font-stretch-ultra-expanded">'ultra-expanded'</dfn> value</li>
     </ul>
 
-    <p>The following features are defined in <cite>CSS Grid Layout</cite>: <ref spec=CSSGRID></p>
+    <p>The following features are defined in <cite>CSS Grid Layout</cite>: <ref>CSSGRID</ref></p>
 
     <ul class="brief">
       <li>The <dfn data-x-href="https://drafts.csswg.org/css-grid/#propdef-grid-auto-columns">'grid-auto-columns'</dfn> property</li>
@@ -3769,7 +3790,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
       <li>The <dfn data-x-href="https://drafts.csswg.org/css-grid/#propdef-grid-template-rows">'grid-template-rows'</dfn> property</li>
     </ul>
 
-    <p>The following terms are defined in <cite>CSS Inline Layout</cite>: <ref spec=CSSINLINE></p>
+    <p>The following terms are defined in <cite>CSS Inline Layout</cite>: <ref>CSSINLINE</ref></p>
 
     <ul class="brief">
      <li><dfn data-x-href="https://drafts.csswg.org/css-inline/#alphabetic-baseline">alphabetic baseline</dfn></li>
@@ -3779,14 +3800,16 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
      <li><dfn data-x-href="https://drafts.csswg.org/css-inline/#ideographic-under-baseline">ideographic-under baseline</dfn></li>
     </ul>
 
-    <p>The following terms and features are defined in <cite>CSS Box Sizing</cite>: <ref spec=CSSSIZING></p>
+    <p>The following terms and features are defined in <cite>CSS Box Sizing</cite>:
+    <ref>CSSSIZING</ref></p>
 
     <ul class="brief">
       <li><dfn data-x-href="https://drafts.csswg.org/css-sizing/#fit-content-inline-size">fit-content inline size</dfn></li>
       <li><dfn data-x-href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio">'aspect-ratio'</dfn> property</li>
     </ul>
 
-    <p>The following features are defined in <cite>CSS Lists and Counters</cite>. <ref spec=CSSLISTS></p>
+    <p>The following features are defined in <cite>CSS Lists and Counters</cite>.
+    <ref>CSSLISTS</ref></p>
 
     <ul class="brief">
      <li><dfn data-x-href="https://drafts.csswg.org/css-lists/#list-item" data-x="css-list-item">list item</dfn></li>
@@ -3795,7 +3818,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
      <li>The <dfn data-x-href="https://drafts.csswg.org/css-lists/#propdef-list-style-type">'list-style-type'</dfn> property</li>
     </ul>
 
-    <p>The following features are defined in <cite>CSS Overflow</cite>. <ref spec=CSSOVERFLOW></p>
+    <p>The following features are defined in <cite>CSS Overflow</cite>. <ref>CSSOVERFLOW</ref></p>
 
     <ul class="brief">
       <li>The <dfn data-x-href="https://drafts.csswg.org/css-overflow/#propdef-overflow">'overflow'</dfn> property and its <dfn data-x-href="https://drafts.csswg.org/css-overflow/#valdef-overflow-hidden">'hidden'</dfn> value</li>
@@ -3803,8 +3826,8 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
       <li>The term <dfn data-x-href="https://drafts.csswg.org/css-overflow/#scroll-container">scroll container</dfn>
     </ul>
 
-    <p>The following terms and features are defined in <cite>CSS Positioned Layout</cite>: <ref
-    spec=CSSPOSITION></p>
+    <p>The following terms and features are defined in <cite>CSS Positioned Layout</cite>:
+    <ref>CSSPOSITION</ref></p>
 
     <ul class="brief">
       <li><dfn data-x-href="https://drafts.csswg.org/css-position/#absolute-position">absolutely-positioned</dfn></li>
@@ -3818,8 +3841,8 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
       <li><dfn data-x-href="https://drafts.csswg.org/css-position-4/#process-top-layer-removals">process top layer removals</dfn></li>
     </ul>
 
-    <p>The following features are defined in <cite>CSS Multi-column Layout</cite>. <ref
-    spec=CSSMULTICOL></p>
+    <p>The following features are defined in <cite>CSS Multi-column Layout</cite>.
+    <ref>CSSMULTICOL</ref></p>
 
     <ul class="brief">
       <li>The <dfn data-x-href="https://drafts.csswg.org/css-multicol/#propdef-column-count">'column-count'</dfn> property</li>
@@ -3831,10 +3854,10 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
 
     <p>The <dfn
     data-x-href="https://drafts.csswg.org/css-ruby/#valdef-display-ruby-base">'ruby-base'</dfn>
-    value of the <span>'display'</span> property is defined in <cite>CSS Ruby Layout</cite>. <ref
-    spec=CSSRUBY></p>
+    value of the <span>'display'</span> property is defined in <cite>CSS Ruby Layout</cite>.
+    <ref>CSSRUBY</ref></p>
 
-    <p>The following features are defined in <cite>CSS Table</cite>: <ref spec=CSSTABLE></p>
+    <p>The following features are defined in <cite>CSS Table</cite>: <ref>CSSTABLE</ref></p>
 
     <ul class="brief">
       <li>The <dfn data-x-href="https://drafts.csswg.org/css-tables/#propdef-border-spacing">'border-spacing'</dfn> property</li>
@@ -3845,7 +3868,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
               <dfn data-x-href="https://drafts.csswg.org/css-tables/#table">'table'</dfn> values of the <span>'display'</span> property</li>
     </ul>
 
-    <p>The following features are defined in <cite>CSS Text</cite>: <ref spec=CSSTEXT></p>
+    <p>The following features are defined in <cite>CSS Text</cite>: <ref>CSSTEXT</ref></p>
 
     <ul class="brief">
       <li>The <dfn data-x-href="https://drafts.csswg.org/css-text/#text-transform-property">'text-transform'</dfn> property</li>
@@ -3855,7 +3878,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
       <li>The <dfn data-x-href="https://drafts.csswg.org/css-text/#propdef-word-spacing">'word-spacing'</dfn> property</li>
     </ul>
 
-    <p>The following features are defined in <cite>CSS Writing Modes</cite>: <ref spec=CSSWM></p>
+    <p>The following features are defined in <cite>CSS Writing Modes</cite>: <ref>CSSWM</ref></p>
 
     <ul class="brief">
       <li>The <dfn data-x-href="https://drafts.csswg.org/css-writing-modes/#direction">'direction'</dfn> property</li>
@@ -3873,8 +3896,8 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
               <dfn data-x-href="https://drafts.csswg.org/css-writing-modes/#line-right">line-right</dfn> concepts</li>
     </ul>
 
-    <p>The following features are defined in <cite>CSS Basic User Interface</cite>: <ref
-    spec=CSSUI></p>
+    <p>The following features are defined in <cite>CSS Basic User Interface</cite>:
+    <ref>CSSUI</ref></p>
 
     <ul class="brief">
       <li>The <dfn data-x-href="https://drafts.csswg.org/css-ui/#outline">'outline'</dfn> property</li>
@@ -3895,11 +3918,12 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
 
     <p>The algorithm to <dfn
     data-x-href="https://drafts.csswg.org/web-animations-1/#update-animations-and-send-events">update
-    animations and send events</dfn> is defined in <cite>Web Animations</cite>. <ref
-    spec=WEBANIMATIONS>.</p>
+    animations and send events</dfn> is defined in <cite>Web Animations</cite>.
+    <ref>WEBANIMATIONS</ref>.</p>
 
     <p>Implementations that support scripting must support the CSS Object Model. The following
-    features and terms are defined in the CSSOM specifications: <ref spec=CSSOM> <ref spec=CSSOMVIEW>
+    features and terms are defined in the CSSOM specifications: <ref>CSSOM</ref>
+    <ref>CSSOMVIEW</ref>
 
     <ul class="brief">
      <li><dfn data-x-href="https://drafts.csswg.org/cssom-view/#the-screen-interface"><code>Screen</code></dfn> interface</li>
@@ -3948,8 +3972,8 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
      <li><dfn data-x-href="https://drafts.csswg.org/cssom-view/#set-up-browsing-context-features">set up browsing context features</dfn></li>
     </ul>
 
-    <p>The following features and terms are defined in <cite>CSS Syntax</cite>: <ref
-    spec=CSSSYNTAX></p>
+    <p>The following features and terms are defined in <cite>CSS Syntax</cite>:
+    <ref>CSSSYNTAX</ref></p>
 
     <ul class="brief">
      <li><dfn data-x-href="https://drafts.csswg.org/css-syntax/#conform-classes">conformant style sheet</dfn></li>
@@ -3960,7 +3984,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
      <li><dfn data-x-href="https://drafts.csswg.org/css-syntax/#typedef-whitespace-token">&lt;whitespace-token></dfn></li>
     </ul>
 
-    <p>The following terms are defined in <cite>Selectors</cite>: <ref spec=SELECTORS></p>
+    <p>The following terms are defined in <cite>Selectors</cite>: <ref>SELECTORS</ref></p>
 
     <ul class="brief">
      <li><dfn data-x-href="https://drafts.csswg.org/selectors/#type-selector">type selector</dfn></li>
@@ -3973,8 +3997,8 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
      <li><dfn data-x-href="https://drafts.csswg.org/selectors/#pseudo-element">pseudo-element</dfn></li>
     </ul>
 
-    <p>The following features are defined in <cite>CSS Values and Units</cite>: <ref
-    spec=CSSVALUES></p>
+    <p>The following features are defined in <cite>CSS Values and Units</cite>:
+    <ref>CSSVALUES</ref></p>
 
     <ul class="brief">
      <li><dfn data-x-href="https://drafts.csswg.org/css-values/#lengths">&lt;length></dfn></li>
@@ -3988,8 +4012,8 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
      <li>The <dfn data-x-href="https://drafts.csswg.org/css-values/#math-function">math functions</dfn></li>
     </ul>
 
-    <p>The following features are defined in <cite>CSS View Transitions 1</cite>: <ref
-    spec=CSSVIEWTRANSITIONS></p>
+    <p>The following features are defined in <cite>CSS View Transitions 1</cite>:
+    <ref>CSSVIEWTRANSITIONS</ref></p>
 
     <ul class="brief">
      <li><dfn data-x-href="https://drafts.csswg.org/css-view-transitions/#perform-pending-transition-operations">perform pending transition operations</dfn></li>
@@ -3998,10 +4022,10 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
 
     <p>The term <dfn data-x="css-styling-attribute"
     data-x-href="https://drafts.csswg.org/css-style-attr/#style-attribute">style attribute</dfn> is
-    defined in <cite>CSS Style Attributes</cite>. <ref spec=CSSATTR></p>
+    defined in <cite>CSS Style Attributes</cite>. <ref>CSSATTR</ref></p>
 
-    <p>The following terms are defined in the <cite>CSS Cascading and Inheritance</cite>: <ref
-    spec=CSSCASCADE></p>
+    <p>The following terms are defined in the <cite>CSS Cascading and Inheritance</cite>:
+    <ref>CSSCASCADE</ref></p>
 
     <ul class="brief">
      <li><dfn data-x-href="https://drafts.csswg.org/css-cascade/#cascaded-value">cascaded value</dfn></li>
@@ -4021,10 +4045,10 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
     described in the CSS <cite>Fonts</cite> and <cite>Font Loading</cite> specifications, including
     in particular <dfn><code>FontFace</code></dfn> objects and the <dfn
     data-x-href="https://drafts.csswg.org/css-font-loading/#font-source">font source</dfn> concept.
-    <ref spec=CSSFONTS> <ref spec=CSSFONTLOAD></p>
+    <ref>CSSFONTS</ref> <ref>CSSFONTLOAD</ref></p>
 
-    <p>The following interfaces and terms are defined in <cite>Geometry Interfaces</cite>: <ref
-    spec=GEOMETRY></p>
+    <p>The following interfaces and terms are defined in <cite>Geometry Interfaces</cite>:
+    <ref>GEOMETRY</ref></p>
 
     <ul class="brief">
      <li><dfn data-x-href="https://drafts.fxtf.org/geometry/#dommatrix"><code>DOMMatrix</code></dfn> interface, and associated
@@ -4045,27 +4069,27 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
          <dfn data-x="DOMPointInit-y" data-xref="https://drafts.fxtf.org/geometry/#dom-dompointinit-y">y</dfn> members</li>
     </ul>
 
-    <p>The following terms are defined in the <cite>CSS Scoping</cite>: <ref spec=CSSSCOPING></p>
+    <p>The following terms are defined in the <cite>CSS Scoping</cite>: <ref>CSSSCOPING</ref></p>
 
     <ul class="brief">
      <li><dfn data-x-href="https://drafts.csswg.org/css-scoping/#flat-tree">flat tree</dfn></li>
     </ul>
 
-    <p>The following terms and features are defined in <cite>CSS Color Adjustment</cite>: <ref
-    spec=CSSCOLORADJUST></p>
+    <p>The following terms and features are defined in <cite>CSS Color Adjustment</cite>:
+    <ref>CSSCOLORADJUST</ref></p>
 
     <ul class="brief">
      <li><dfn data-x-href="https://drafts.csswg.org/css-color-adjust/#color-scheme-prop">'color-scheme'</dfn></li>
      <li><dfn data-x-href="https://drafts.csswg.org/css-color-adjust/#pages-supported-color-schemes">page's supported color-schemes</dfn></li>
     </ul>
 
-    <p>The following term is defined in <cite>CSS Pseudo-Elements</cite>: <ref spec=CSSPSEUDO></p>
+    <p>The following term is defined in <cite>CSS Pseudo-Elements</cite>: <ref>CSSPSEUDO</ref></p>
 
     <ul class="brief">
      <li><dfn data-x-href="https://drafts.csswg.org/css-pseudo/#file-selector-button-pseudo">'::file-selector-button'</dfn></li>
     </ul>
 
-    <p>The following terms are defined in <cite>CSS Containment</cite>: <ref spec=CSSCONTAIN></p>
+    <p>The following terms are defined in <cite>CSS Containment</cite>: <ref>CSSCONTAIN</ref></p>
 
     <ul class="brief">
      <li><dfn data-x-href="https://drafts.csswg.org/css-contain/#skips-its-contents">skips its contents</dfn></li>
@@ -4081,8 +4105,8 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
    <dt>Intersection Observer</dt>
 
    <dd>
-    <p>The following term is defined in <cite>Intersection Observer</cite>: <ref
-    spec=INTERSECTIONOBSERVER></p>
+    <p>The following term is defined in <cite>Intersection Observer</cite>:
+    <ref>INTERSECTIONOBSERVER</ref></p>
 
     <ul class="brief">
      <li><dfn data-x-href="https://w3c.github.io/IntersectionObserver/#run-the-update-intersection-observations-steps">run the update intersection observations steps</dfn></li>
@@ -4099,7 +4123,8 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
    <dt>Resize Observer</dt>
 
    <dd>
-    <p>The following terms are defined in <cite>Resize Observer</cite>: <ref spec=RESIZEOBSERVER></p>
+    <p>The following terms are defined in <cite>Resize Observer</cite>:
+    <ref>RESIZEOBSERVER</ref></p>
 
     <ul class="brief">
      <li><dfn data-x-href="https://w3c.github.io/csswg-drafts/resize-observer-1/#gather-active-observations-h">gather active resize observations at depth</dfn></li>
@@ -4114,7 +4139,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
    <dt>WebGL</dt>
 
    <dd>
-    <p>The following interfaces are defined in the WebGL specifications: <ref spec=WEBGL></p>
+    <p>The following interfaces are defined in the WebGL specifications: <ref>WEBGL</ref></p>
 
     <ul class="brief">
      <li><dfn data-x-href="https://www.khronos.org/registry/webgl/specs/latest/1.0/#WebGLRenderingContext"><code>WebGLRenderingContext</code></dfn> interface</li>
@@ -4128,7 +4153,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
    <dt>WebGPU</dt>
 
    <dd>
-    <p>The following interfaces are defined in <cite>WebGPU</cite>: <ref spec=WEBGPU></p>
+    <p>The following interfaces are defined in <cite>WebGPU</cite>: <ref>WEBGPU</ref></p>
 
     <ul class="brief">
      <li><dfn data-x-href="https://gpuweb.github.io/gpuweb/#canvas-context"><code>GPUCanvasContext</code></dfn> interface</li>
@@ -4141,7 +4166,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
 
    <dd>
     <p>Implementations may support WebVTT as a text track format for subtitles, captions, metadata,
-    etc., for media resources. <ref spec=WEBVTT></p>
+    etc., for media resources. <ref>WEBVTT</ref></p>
 
     <p>The following terms, used in this specification, are defined in <cite>WebVTT</cite>:</p>
 
@@ -4163,7 +4188,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
    <dd>
     <p>The <dfn element-attr><code data-x="attr-aria-role">role</code></dfn> attribute is defined in
     <cite>Accessible Rich Internet Applications</cite> (<cite>ARIA</cite>), as are the following
-    roles: <ref spec=ARIA></p>
+    roles: <ref>ARIA</ref></p>
 
     <ul class="brief">
      <li><dfn data-x-href="https://w3c.github.io/aria/#button"><code data-x="attr-aria-role-button">button</code></dfn></li>
@@ -4171,7 +4196,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
     </ul>
 
     <p>In addition, the following <dfn><code data-x="attr-aria-*">aria-*</code></dfn> content
-    attributes are defined in <cite>ARIA</cite>: <ref spec=ARIA></p>
+    attributes are defined in <cite>ARIA</cite>: <ref>ARIA</ref></p>
 
     <ul class="brief">
      <li><dfn data-x-href="https://w3c.github.io/aria/#aria-checked"><code data-x="attr-aria-checked">aria-checked</code></dfn></li>
@@ -4180,7 +4205,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
      <li><dfn data-x-href="https://w3c.github.io/aria/#aria-label"><code data-x="attr-aria-label">aria-label</code></dfn></li>
     </ul>
 
-    <p>Finally, the following terms are defined <cite>ARIA</cite>: <ref spec=ARIA></p>
+    <p>Finally, the following terms are defined <cite>ARIA</cite>: <ref>ARIA</ref></p>
 
     <ul class="brief">
      <li><dfn data-x-href="https://w3c.github.io/aria/#dfn-role">role</dfn></li>
@@ -4195,7 +4220,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
    <dt>Content Security Policy</dt>
 
    <dd>
-    <p>The following terms are defined in <cite>Content Security Policy</cite>: <ref spec=CSP></p>
+    <p>The following terms are defined in <cite>Content Security Policy</cite>: <ref>CSP</ref></p>
 
     <ul class="brief">
      <li><dfn data-x-href="https://w3c.github.io/webappsec-csp/#content-security-policy-object">Content Security Policy</dfn></li>
@@ -4226,7 +4251,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
    <dt>Service Workers</dt>
 
    <dd>
-    <p>The following terms are defined in <cite>Service Workers</cite>: <ref spec=SW></p>
+    <p>The following terms are defined in <cite>Service Workers</cite>: <ref>SW</ref></p>
 
     <ul class="brief">
      <li><dfn data-x="dfn-active-worker" data-x-href="https://w3c.github.io/ServiceWorker/#dfn-active-worker">active worker</dfn></li>
@@ -4245,8 +4270,8 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
    <dt>Secure Contexts</dt>
 
    <dd>
-    <p>The following algorithms are defined in <cite>Secure Contexts</cite>: <ref
-    spec="SECURE-CONTEXTS"></p>
+    <p>The following algorithms are defined in <cite>Secure Contexts</cite>:
+    <ref>SECURE-CONTEXTS</ref></p>
 
     <ul class="brief">
      <li><dfn data-x-href="https://w3c.github.io/webappsec-secure-contexts/#potentially-trustworthy-url">Is url potentially trustworthy?</dfn></li>
@@ -4256,8 +4281,8 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
    <dt>Permissions Policy</dt>
 
    <dd>
-    <p>The following terms are defined in <cite>Permissions Policy</cite>: <ref
-    spec=PERMISSIONSPOLICY></p>
+    <p>The following terms are defined in <cite>Permissions Policy</cite>:
+    <ref>PERMISSIONSPOLICY</ref></p>
 
     <ul class="brief">
      <li><dfn data-x="concept-permissions-policy" data-x-href="https://w3c.github.io/webappsec-feature-policy/#permissions-policy">permissions policy</dfn></li>
@@ -4277,7 +4302,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
 
    <dd>
     <p>The following feature is defined in <cite>Payment Request API</cite>:
-    <ref spec=PAYMENTREQUEST></p>
+    <ref>PAYMENTREQUEST</ref></p>
 
     <ul class="brief">
      <li><dfn data-x-href="https://w3c.github.io/payment-request/#dom-paymentrequest"><code>PaymentRequest</code></dfn> interface</li>
@@ -4290,7 +4315,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
    <dd>
     <p>While support for MathML as a whole is not required by this specification (though it is
     encouraged, at least for web browsers), certain features depend upon small parts of MathML being
-    implemented. <ref spec=MATHML></p>
+    implemented. <ref>MATHML</ref></p>
 
     <p>The following features are defined in <cite>Mathematical Markup Language</cite>
     (<cite>MathML</cite>):</p>
@@ -4318,8 +4343,8 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
     <p>User agents that implement SVG must implement the <cite>SVG 2</cite> specification, and not
     any earlier revisions.</p>
 
-    <p>The following features are defined in the <cite>SVG 2</cite> specification: <ref
-    spec=SVG></p>
+    <p>The following features are defined in the <cite>SVG 2</cite> specification:
+    <ref>SVG</ref></p>
 
     <ul class="brief">
      <li><dfn data-x-href="https://svgwg.org/svg2-draft/types.html#InterfaceSVGElement"><code>SVGElement</code></dfn> interface</li>
@@ -4342,8 +4367,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
    <dt>Filter Effects</dt>
 
    <dd>
-    <p>The following features are defined in <cite>Filter Effects</cite>:
-    <ref spec=FILTERS></p>
+    <p>The following features are defined in <cite>Filter Effects</cite>: <ref>FILTERS</ref></p>
 
     <ul class="brief">
      <li><dfn data-x-href="https://drafts.fxtf.org/filter-effects/#typedef-filter-value-list">&lt;filter-value-list&gt;</dfn></li>
@@ -4354,7 +4378,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
 
    <dd>
     <p>The following features are defined in <cite>Compositing and Blending</cite>:
-    <ref spec=COMPOSITE></p>
+    <ref>COMPOSITE</ref></p>
 
     <ul class="brief">
      <li><dfn data-x-href="https://drafts.fxtf.org/compositing/#ltblendmodegt">&lt;blend-mode&gt;</dfn></li>
@@ -4366,8 +4390,8 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
    <dt>Cooperative Scheduling of Background Tasks</dt>
 
    <dd>
-    <p>The following features are defined in <cite>Cooperative Scheduling of Background Tasks</cite>:
-    <ref spec=REQUESTIDLECALLBACK></p>
+    <p>The following features are defined in <cite>Cooperative Scheduling of Background
+    Tasks</cite>: <ref>REQUESTIDLECALLBACK</ref></p>
 
     <ul class="brief">
      <li><dfn data-x-href="https://w3c.github.io/requestidlecallback/#the-requestidlecallback-method"><code>requestIdleCallback()</code></dfn></li>
@@ -4377,7 +4401,8 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
 
    <dt>Screen Orientation</dt>
    <dd>
-    <p>The following terms are defined in <cite>Screen Orientation</cite>: <ref spec=SCREENORIENTATION></p>
+    <p>The following terms are defined in <cite>Screen Orientation</cite>:
+    <ref>SCREENORIENTATION</ref></p>
 
     <ul>
      <li><dfn data-x-href="https://w3c.github.io/screen-orientation/#dfn-screen-orientation-change-steps">screen orientation change steps</dfn></li>
@@ -4386,7 +4411,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
 
    <dt>Storage</dt>
    <dd>
-    <p>The following terms are defined in <cite>Storage</cite>: <ref spec=STORAGE></p>
+    <p>The following terms are defined in <cite>Storage</cite>: <ref>STORAGE</ref></p>
 
     <ul class="brief">
      <li><dfn data-x-href="https://storage.spec.whatwg.org/#obtain-a-local-storage-bottle-map">obtain a local storage bottle map</dfn></li>
@@ -4401,7 +4426,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
    <dt>Web App Manifest</dt>
 
    <dd>
-    <p>The following features are defined in <cite>Web App Manifest</cite>: <ref spec=MANIFEST></p>
+    <p>The following features are defined in <cite>Web App Manifest</cite>: <ref>MANIFEST</ref></p>
 
     <ul class="brief">
      <li><dfn data-x-href="https://w3c.github.io/manifest/#dfn-manifest">application manifest</dfn></li>
@@ -4413,7 +4438,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
    <dt>WebCodecs</dt>
 
    <dd>
-    <p>The following features are defined in <cite>WebCodecs</cite>: <ref spec=WEBCODECS></p>
+    <p>The following features are defined in <cite>WebCodecs</cite>: <ref>WEBCODECS</ref></p>
 
     <ul class="brief">
      <li><dfn data-x-href="https://w3c.github.io/webcodecs/#videoframe-interface"><code>VideoFrame</code></dfn> interface.</li>
@@ -4425,7 +4450,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
    <dt>WebDriver</dt>
 
    <dd>
-    <p>The following terms are defined in <cite>WebDriver</cite>: <ref spec=WEBDRIVER></p>
+    <p>The following terms are defined in <cite>WebDriver</cite>: <ref>WEBDRIVER</ref></p>
 
     <ul class="brief">
      <li><dfn data-x-href="https://w3c.github.io/webdriver/#dfn-extension-commands">extension command</dfn></li>
@@ -4443,7 +4468,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
    <dt>WebDriver BiDi</dt>
 
    <dd>
-    <p>The following terms are defined in <cite>WebDriver BiDi</cite>: <ref spec=WEBDRIVERBIDI></p>
+    <p>The following terms are defined in <cite>WebDriver BiDi</cite>: <ref>WEBDRIVERBIDI</ref></p>
 
     <ul class="brief">
      <li><dfn data-x-href="https://w3c.github.io/webdriver-bidi/#webdriver-bidi-navigation-status">WebDriver BiDi navigation status</dfn></li>
@@ -4468,7 +4493,8 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
    <dt>Web Cryptography API</dt>
 
    <dd>
-    <p>The following terms are defined in <cite>Web Cryptography API</cite>: <ref spec=WEBCRYPTO></p>
+    <p>The following terms are defined in <cite>Web Cryptography API</cite>:
+    <ref>WEBCRYPTO</ref></p>
 
     <ul class="brief">
      <li><dfn data-x-href="https://w3c.github.io/webcrypto/#dfn-generate-a-random-uuid">generating a random UUID</dfn></li>
@@ -4478,7 +4504,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
    <dt>WebSockets</dt>
 
    <dd>
-    <p>The following terms are defined in <cite>WebSockets</cite>: <ref spec=WEBSOCKETS></p>
+    <p>The following terms are defined in <cite>WebSockets</cite>: <ref>WEBSOCKETS</ref></p>
 
     <ul class="brief">
      <li><dfn data-x-href="https://websockets.spec.whatwg.org/#websocket"><code>WebSocket</code></dfn></li>
@@ -4489,7 +4515,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
    <dt>WebTransport</dt>
 
    <dd>
-    <p>The following terms are defined in <cite>WebTransport</cite>: <ref spec=WEBTRANSPORT></p>
+    <p>The following terms are defined in <cite>WebTransport</cite>: <ref>WEBTRANSPORT</ref></p>
 
     <ul class="brief">
      <li><dfn data-x-href="https://w3c.github.io/webtransport/#webtransport"><code>WebTransport</code></dfn></li>
@@ -4500,7 +4526,8 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
    <dt>Web Authentication: An API for accessing Public Key Credentials</dt>
 
    <dd>
-    <p>The following terms are defined in <cite>Web Authentication: An API for accessing Public Key Credentials</cite>: <ref spec=WEBAUTHN></p>
+    <p>The following terms are defined in <cite>Web Authentication: An API for accessing Public Key
+    Credentials</cite>: <ref>WEBAUTHN</ref></p>
 
     <ul class="brief">
      <li><dfn data-x-href="https://w3c.github.io/webauthn/#public-key-credential">public key credential</dfn></li>
@@ -4510,7 +4537,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
    <dt>Credential Management</dt>
 
    <dd>
-    <p>The following terms are defined in <cite>Credential Management</cite>: <ref spec=CREDMAN></p>
+    <p>The following terms are defined in <cite>Credential Management</cite>: <ref>CREDMAN</ref></p>
 
     <ul class="brief">
      <li><dfn data-x-href="https://w3c.github.io/webappsec-credential-management/#dom-credentialmediationrequirement-conditional">conditional mediation</dfn></li>
@@ -4522,7 +4549,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
    <dt>Console</dt>
 
    <dd>
-    <p>The following terms are defined in <cite>Console</cite>: <ref spec=CONSOLE></p>
+    <p>The following terms are defined in <cite>Console</cite>: <ref>CONSOLE</ref></p>
 
     <ul class="brief">
      <li><dfn data-x-href="https://console.spec.whatwg.org/#report-a-warning-to-the-console">report a warning to the console</dfn></li>
@@ -4539,7 +4566,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
   several features assume that those languages and protocols are in use.</p>
 
   <p>A user agent that implements the HTTP protocol must implement <cite>HTTP State Management
-  Mechanism</cite> (Cookies) as well. <ref spec=HTTP> <ref spec=COOKIES></p>
+  Mechanism</cite> (Cookies) as well. <ref>HTTP</ref> <ref>COOKIES</ref></p>
 
   <p class="note">This specification might have certain additional requirements on character
   encodings, image formats, audio formats, and video formats in the respective sections.</p>
@@ -4671,7 +4698,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
   <p class="note">This change is a <span>willful violation</span> of the XPath 1.0 specification,
   motivated by desire to have implementations be compatible with legacy content while still
   supporting the changes that this specification introduces to HTML regarding which namespace is
-  used for HTML elements. <ref spec=XPATH10></p> <!-- note: version matters for
+  used for HTML elements. <ref>XPATH10</ref></p> <!-- note: version matters for
   this ref -->
 
   <hr>
@@ -4689,7 +4716,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
   <p class="note">This requirement is a <span>willful violation</span> of the XSLT 1.0
   specification, required because this specification changes the namespaces and case-sensitivity
   rules of HTML in a manner that would otherwise be incompatible with DOM-based XSLT
-  transformations. (Processors that serialize the output are unaffected.) <ref spec=XSLT10></p> <!--
+  transformations. (Processors that serialize the output are unaffected.) <ref>XSLT10</ref></p> <!--
   note: version matters for this ref -->
 
   <hr>
@@ -5434,8 +5461,10 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
 
   <p>In the algorithms below, the <dfn>number of days in month <var>month</var> of year
   <var>year</var></dfn> is: <em>31</em> if <var>month</var> is 1, 3, 5, 7, 8,
-  10, or 12; <em>30</em> if <var>month</var> is 4, 6, 9, or 11; <em>29</em> if <var>month</var> is 2 and <var>year</var> is a number divisible by 400, or if <var>year</var> is a number divisible by 4 but not by 100; and <em>28</em> otherwise. This
-  takes into account leap years in the Gregorian calendar. <ref spec=GREGORIAN></p>
+  10, or 12; <em>30</em> if <var>month</var> is 4, 6, 9, or 11; <em>29</em> if <var>month</var> is 2
+  and <var>year</var> is a number divisible by 400, or if <var>year</var> is a number divisible by 4
+  but not by 100; and <em>28</em> otherwise. This takes into account leap years in the Gregorian
+  calendar. <ref>GREGORIAN</ref></p>
 
   <p>When <span>ASCII digits</span> are used in the date and time syntaxes defined in this section,
   they express numbers in base ten.</p>
@@ -5446,7 +5475,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
   ISO8601 formats, this specification defines parsing rules in much more detail than ISO8601.
   Implementers are therefore encouraged to carefully examine any date parsing libraries before using
   them to implement the parsing rules described below; ISO8601 libraries might not parse dates and
-  times in exactly the same manner. <ref spec=ISO8601></p>
+  times in exactly the same manner. <ref>ISO8601</ref></p>
 
   </div>
 
@@ -5454,7 +5483,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
   modern Gregorian calendar, extrapolated backwards to year 1. A date in the <span>proleptic
   Gregorian calendar</span>, sometimes explicitly referred to as a <dfn>proleptic-Gregorian
   date</dfn>, is one that is described using that calendar even if that calendar was not in use at
-  the time (or place) in question. <ref spec=GREGORIAN></p>
+  the time (or place) in question. <ref>GREGORIAN</ref></p>
 
   <p class="note">The use of the Gregorian calendar as the wire format in this specification is an
   arbitrary choice resulting from the cultural biases of those involved in the decision. See also
@@ -5466,7 +5495,8 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
   <h5>Months</h5>
 
   <p>A <dfn data-x="concept-month">month</dfn> consists of a specific <span>proleptic-Gregorian
-  date</span> with no time-zone information and no date information beyond a year and a month. <ref spec=GREGORIAN></p>
+  date</span> with no time-zone information and no date information beyond a year and a month.
+  <ref>GREGORIAN</ref></p>
 
   <p>A string is a <dfn>valid month string</dfn> representing a year <var>year</var> and
   month <var>month</var> if it consists of the following components in the given order:</p>
@@ -5533,7 +5563,8 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
   <h5>Dates</h5>
 
   <p>A <dfn data-x="concept-date">date</dfn> consists of a specific <span>proleptic-Gregorian
-  date</span> with no time-zone information, consisting of a year, a month, and a day. <ref spec=GREGORIAN></p>
+  date</span> with no time-zone information, consisting of a year, a month, and a day.
+  <ref>GREGORIAN</ref></p>
 
   <p>A string is a <dfn>valid date string</dfn> representing a year <var>year</var>, month
   <var>month</var>, and day <var>day</var> if it consists of the following
@@ -5600,7 +5631,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
   <h5>Yearless dates</h5>
 
   <p>A <dfn data-x="concept-yearless-date">yearless date</dfn> consists of a Gregorian month and a
-  day within that month, but with no associated year. <ref spec=GREGORIAN></p>
+  day within that month, but with no associated year. <ref>GREGORIAN</ref></p>
 
   <p>A string is a <dfn>valid yearless date string</dfn> representing a month <var>month</var> and a day <var>day</var> if it consists of the following components
   in the given order:</p>
@@ -5802,7 +5833,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
   <p>A <dfn data-x="concept-datetime-local">local date and time</dfn> consists of a specific
   <span>proleptic-Gregorian date</span>, consisting of a year, a month, and a day, and a time,
   consisting of an hour, a minute, a second, and a fraction of a second, but expressed without a
-  time zone. <ref spec=GREGORIAN></p>
+  time zone. <ref>GREGORIAN</ref></p>
 
   <p>A string is a <dfn>valid local date and time string</dfn> representing a date and time if it
   consists of the following components in the given order:</p>
@@ -6012,7 +6043,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
   <p>A <dfn data-x="concept-datetime">global date and time</dfn> consists of a specific
   <span>proleptic-Gregorian date</span>, consisting of a year, a month, and a day, and a time,
   consisting of an hour, a minute, a second, and a fraction of a second, expressed with a time-zone
-  offset, consisting of a signed number of hours and minutes. <ref spec=GREGORIAN></p>
+  offset, consisting of a signed number of hours and minutes. <ref>GREGORIAN</ref></p>
 
   <p>A string is a <dfn>valid global date and time string</dfn> representing a date, time, and a
   time-zone offset if it consists of the following components in the given order:</p>
@@ -6142,7 +6173,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
   has either 52 or 53 such seven-day periods, as defined below. The seven-day period starting on the
   Gregorian date Monday December 29th 1969 (1969-12-29) is defined as week number 1 in week-year
   1970. Consecutive weeks are numbered sequentially. The week before the number 1 week in a
-  week-year is the last week in the previous week-year, and vice versa. <ref spec=GREGORIAN></p>
+  week-year is the last week in the previous week-year, and vice versa. <ref>GREGORIAN</ref></p>
 
   <p>A week-year with a number <var>year</var> has 53 weeks if it corresponds to either a
   year <var>year</var> in the <span>proleptic Gregorian calendar</span> that has a Thursday
@@ -6159,7 +6190,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
   <var>y</var>.</p>
 
   <p class="note">For modern purposes, a <span data-x="concept-week">week</span> as defined here is
-  equivalent to ISO weeks as defined in ISO 8601. <ref spec=ISO8601></p>
+  equivalent to ISO weeks as defined in ISO 8601. <ref>ISO8601</ref></p>
 
   <p>A string is a <dfn>valid week string</dfn> representing a week-year <var>year</var>
   and week <var>week</var> if it consists of the following components in the given
@@ -6303,7 +6334,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
     </ol>
 
     <p class="note">This, as with a number of other date- and time-related microsyntaxes defined in
-    this specification, is based on one of the formats defined in ISO 8601. <ref spec=ISO8601></p>
+    this specification, is based on one of the formats defined in ISO 8601. <ref>ISO8601</ref></p>
    </li>
 
    <li>
@@ -6739,8 +6770,8 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
 
    <li>
     <p>If <var>input</var> is an <span>ASCII case-insensitive</span> match for one of the
-    <span data-x="named color">named colors</span>, then return the <span>simple
-    color</span> corresponding to that keyword. <ref spec=CSSCOLOR></p>
+    <span data-x="named color">named colors</span>, then return the <span>simple color</span>
+    corresponding to that keyword. <ref>CSSCOLOR</ref></p>
 
     <p class="note"><a
     href="https://www.w3.org/TR/css3-color/#css2-system">CSS2 System
@@ -6904,12 +6935,12 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
   <h4 id="mq">Media queries</h4>
 
   <p>A string is a <dfn>valid media query list</dfn> if it matches the <code
-  data-x="">&lt;media-query-list&gt;</code> production of <cite>Media Queries</cite>. <ref spec=MQ></p>
+  data-x="">&lt;media-query-list&gt;</code> production of <cite>Media Queries</cite>.
+  <ref>MQ</ref></p>
 
   <p>A string <dfn>matches the environment</dfn> of the user if it is the empty string, a string
   consisting of only <span>ASCII whitespace</span>, or is a media query list that matches the user's
-  environment according to the definitions given in <cite>Media Queries</cite>. <ref
-  spec=MQ></p>
+  environment according to the definitions given in <cite>Media Queries</cite>. <ref>MQ</ref></p>
 
 
   <h4 id="unique-values">Unique internal values</h4>
@@ -6939,17 +6970,17 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
   <p>This specification defines the URL <dfn><code>about:legacy-compat</code></dfn> as a reserved,
   though unresolvable, <code data-x="about protocol">about:</code> URL, for use in <span
   data-x="syntax-doctype">DOCTYPE</span>s in <span>HTML documents</span> when needed for
-  compatibility with XML tools. <ref spec=ABOUT></p>
+  compatibility with XML tools. <ref>ABOUT</ref></p>
 
   <p>This specification defines the URL <dfn><code>about:html-kind</code></dfn> as a reserved,
   though unresolvable, <code data-x="about protocol">about:</code> URL, that is used as an
-  identifier for kinds of media tracks. <ref spec=ABOUT></p>
+  identifier for kinds of media tracks. <ref>ABOUT</ref></p>
 
   <p>This specification defines the URL <dfn><code>about:srcdoc</code></dfn> as a reserved, though
   unresolvable, <code data-x="about protocol">about:</code> URL, that is used as the <span
   data-x="concept-document-url">URL</span> of <span data-x="an iframe srcdoc
   document"><code>iframe</code> <code data-x="attr-iframe-srcdoc">srcdoc</code> documents</span>.
-  <ref spec=ABOUT></p>
+  <ref>ABOUT</ref></p>
 
   <p>The <dfn>fallback base URL</dfn> of a <code>Document</code> object <var>document</var> is the
   <span>URL record</span> obtained by running these steps:</p>
@@ -7030,8 +7061,8 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
   <h4 id="resolving-urls">Parsing URLs</h4>
 
   <p>Parsing a URL is the process of taking a string and obtaining the <span>URL record</span> that
-  it represents. While this process is defined in <cite>URL</cite>, the HTML standard defines
-  a wrapper for convenience. <ref spec=URL></p>
+  it represents. While this process is defined in <cite>URL</cite>, the HTML standard defines a
+  wrapper for convenience. <ref>URL</ref></p>
 
   <p class="note">This wrapper is only useful when the character encoding for the URL parser has to
   match that of the document or environment settings object for legacy reasons. When that is not the
@@ -7132,8 +7163,8 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
 
   <p>A <span data-x="concept-response">response</span> whose <span
   data-x="concept-response-type">type</span> is "<code data-x="">basic</code>", "<code
-  data-x="">cors</code>", or "<code data-x="">default</code>" is <dfn
-  export>CORS-same-origin</dfn>. <ref spec=FETCH></p>
+  data-x="">cors</code>", or "<code data-x="">default</code>" is <dfn export>CORS-same-origin</dfn>.
+  <ref>FETCH</ref></p>
 
   <p>A <span data-x="concept-response">response</span> whose <span
   data-x="concept-response-type">type</span> is "<code data-x="">opaque</code>" or "<code
@@ -7174,12 +7205,12 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
 
   <p>The <dfn data-x="Content-Type">Content-Type metadata</dfn> of a resource must be obtained and
   interpreted in a manner consistent with the requirements of <cite>MIME Sniffing</cite>.
-  <ref spec=MIMESNIFF></p>
+  <ref>MIMESNIFF</ref></p>
 
   <p>The <dfn data-x="Content-Type sniffing"
   data-x-href="https://mimesniff.spec.whatwg.org/#computed-mime-type">computed MIME type</dfn> of a
   resource must be found in a manner consistent with the requirements given in <cite>MIME
-  Sniffing</cite>. <ref spec=MIMESNIFF></p>
+  Sniffing</cite>. <ref>MIMESNIFF</ref></p>
 
   <p>The <dfn data-x="Content-Type sniffing: image"
   data-x-href="https://mimesniff.spec.whatwg.org/#rules-for-sniffing-images-specifically">rules for
@@ -7187,12 +7218,13 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
   data-x-href="https://mimesniff.spec.whatwg.org/#rules-for-text-or-binary">rules for distinguishing
   if a resource is text or binary</dfn>, and the <dfn data-x="Content-Type sniffing: video"
   data-x-href="https://mimesniff.spec.whatwg.org/#rules-for-sniffing-audio-and-video-specifically">rules
-  for sniffing audio and video specifically</dfn> are also defined in <cite>MIME Sniffing</cite>. These rules return a <span>MIME type</span> as their result. <ref
-  spec=MIMESNIFF></p>
+  for sniffing audio and video specifically</dfn> are also defined in <cite>MIME Sniffing</cite>.
+  These rules return a <span>MIME type</span> as their result. <ref>MIMESNIFF</ref></p>
 
   <p class="warning">It is imperative that the rules in <cite>MIME Sniffing</cite> be
   followed exactly. When a user agent uses different heuristics for content type detection than the
-  server expects, security problems can occur. For more details, see <cite>MIME Sniffing</cite>. <ref spec=MIMESNIFF></p>
+  server expects, security problems can occur. For more details, see <cite>MIME Sniffing</cite>.
+  <ref>MIMESNIFF</ref></p>
 
 
   <h4>Extracting character encodings from <code>meta</code> elements</h4>
@@ -7246,7 +7278,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
   that is not supported by this algorithm<!-- not to mention not having any rules for
   error-handling, which is of course why we're having to define it ourselves -->). While the
   algorithm is used in contexts that, historically, were related to HTTP, the syntax as supported by
-  implementations diverged some time ago. <ref spec=HTTP></p>
+  implementations diverged some time ago. <ref>HTTP</ref></p>
 
   </div>
 
@@ -7322,8 +7354,8 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
 
   <p>The impact of these states on the processing model of various <span
   data-x="concept-fetch">fetches</span> is defined in more detail throughout this specification, in
-  <cite>Fetch</cite>, and in <cite>Referrer Policy</cite>. <ref spec=FETCH> <ref
-  spec=REFERRERPOLICY></p>
+  <cite>Fetch</cite>, and in <cite>Referrer Policy</cite>. <ref>FETCH</ref>
+  <ref>REFERRERPOLICY</ref></p>
 
   <div class="note">
    <p>Several signals can contribute to which processing model is used for a given <span
@@ -7347,7 +7379,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
   <p>A <dfn element-attr for="htmlsvg-global" data-x="attr-nonce"><code>nonce</code></dfn> content
   attribute represents a cryptographic nonce ("number used once") which can be used by <cite>Content
   Security Policy</cite> to determine whether or not a given fetch will be allowed to proceed. The
-  value is text. <ref spec="CSP"></p>
+  value is text. <ref>CSP</ref></p>
 
   <p>Elements that have a <code data-x="attr-nonce">nonce</code> content attribute ensure that the
   cryptographic nonce is only exposed to script (and not to side-channels like CSS attribute
@@ -7513,7 +7545,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
     JavaScript-exposed constructor in this specification, until <cite>Intersection Observer</cite>
     exposes low-level hooks for use in specifications. See bug <a
     href="https://github.com/w3c/IntersectionObserver/issues/464">w3c/IntersectionObserver#464</a>
-    which tracks this. <ref spec="INTERSECTIONOBSERVER"></p>
+    which tracks this. <ref>INTERSECTIONOBSERVER</ref></p>
 
     <ul>
      <li>
@@ -7551,7 +7583,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
         <code data-x="dom-IntersectionObserverEntry-isIntersecting">isIntersecting</code> and
         <code data-x="dom-IntersectionObserverEntry-target">target</code> getters. See <a
         href="https://github.com/w3c/IntersectionObserver/issues/464">w3c/IntersectionObserver#464</a>.
-        <ref spec="INTERSECTIONOBSERVER"></p>
+        <ref>INTERSECTIONOBSERVER</ref></p>
        </li>
       </ol>
      </li>
@@ -7580,7 +7612,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
     <p class="XXX">The intention is to use the original value of the <code
     data-x="dom-IntersectionObserver-observe">observe</code> method. See <a
     href="https://github.com/w3c/IntersectionObserver/issues/464">w3c/IntersectionObserver#464</a>.
-    <ref spec="INTERSECTIONOBSERVER"></p>
+    <ref>INTERSECTIONOBSERVER</ref></p>
    </li>
   </ol>
 
@@ -7601,7 +7633,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
     <p class="XXX">The intention is to use the original value of the <code
     data-x="dom-IntersectionObserver-unobserve">unobserve</code> method. See <a
     href="https://github.com/w3c/IntersectionObserver/issues/464">w3c/IntersectionObserver#464</a>.
-    <ref spec="INTERSECTIONOBSERVER"></p>
+    <ref>INTERSECTIONOBSERVER</ref></p>
    </li>
   </ol>
 
@@ -8215,7 +8247,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
   </ul>
 
   <p class="note">The values Infinity and Not-a-Number (NaN) values throw an exception on setting,
-  as defined in <cite>Web IDL</cite>. <ref spec=WEBIDL></p>
+  as defined in <cite>Web IDL</cite>. <ref>WEBIDL</ref></p>
 
   <p>If a <span>reflected IDL attribute</span> has the type <code>DOMTokenList</code>, then its
   getter steps are to return a <code>DOMTokenList</code> object whose associated element is
@@ -8581,7 +8613,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
    content: one that uses the presence of <code data-x="dom-document-all">document.all</code> as a
    way to detect legacy user agents, and one that only supports those legacy user agents and uses
    the <code data-x="dom-document-all">document.all</code> object without testing for its presence
-   first. <ref spec=JAVASCRIPT></p>
+   first. <ref>JAVASCRIPT</ref></p>
   </div>
 
   <pre><code class="idl">[Exposed=Window,
@@ -9160,7 +9192,7 @@ interface <dfn interface>DOMStringList</dfn> {
   <div w-nodev>
 
   <p>This section uses the terminology and typographic conventions from the JavaScript
-  specification. <ref spec=JAVASCRIPT></p>
+  specification. <ref>JAVASCRIPT</ref></p>
 
   </div>
 
@@ -9566,8 +9598,8 @@ interface <dfn interface>DOMStringList</dfn> {
       data which are not yet specified, notably the <code data-x="">stack</code> property, to
       <var>serialized</var>.</p>
 
-      <p class="note">See the <cite>Error Stacks</cite> proposal for in-progress work on
-      specifying this data. <ref spec=JSERRORSTACKS></p>
+      <p class="note">See the <cite>Error Stacks</cite> proposal for in-progress work on specifying
+      this data. <ref>JSERRORSTACKS</ref></p>
      </li>
     </ol>
    </li>
@@ -10243,7 +10275,7 @@ o.myself = o;</code></pre>
 
         <p class="note">Specifications can use the [[ArrayBufferDetachKey]] internal slot to prevent
         <code data-x="idl-ArrayBuffer">ArrayBuffer</code>s from being detached. This is used in
-        <cite>WebAssembly JavaScript Interface</cite>, for example. <ref spec=WASMJS></p>
+        <cite>WebAssembly JavaScript Interface</cite>, for example. <ref>WASMJS</ref></p>
        </li>
       </ol>
      </li>
@@ -10488,7 +10520,8 @@ o.myself = o;</code></pre>
 
   <h3>Documents</h3>
 
-  <p>Every XML and HTML document in an HTML UA is represented by a <code>Document</code> object. <ref spec=DOM></p>
+  <p>Every XML and HTML document in an HTML UA is represented by a <code>Document</code> object.
+  <ref>DOM</ref></p>
 
   <p>The <code>Document</code> object's <dfn id="the-document's-address"
   data-x="concept-document-url" data-x-href="https://dom.spec.whatwg.org/#concept-document-url"
@@ -10497,7 +10530,7 @@ o.myself = o;</code></pre>
   <code>Document</code> object; for example, it changes when the user <span
   data-x="navigate">navigates</span> to a <span data-x="navigate-fragid">fragment</span> on the page
   and when the <code data-x="dom-history-pushState">pushState()</code> method is called with a new
-  <span>URL</span>. <ref spec=DOM></p>
+  <span>URL</span>. <ref>DOM</ref></p>
   <!--
     https://www.hixie.ch/tests/adhoc/dom/level0/history/pushState/002/
     https://www.hixie.ch/tests/adhoc/html/navigation/fragids/016.html
@@ -10521,7 +10554,7 @@ o.myself = o;</code></pre>
   data-x="nav-parent">parent</span>'s <span data-x="nav-document">active document</span>'s <span
   data-x="concept-document-origin">origin</span>, even though its <span
   data-x="nav-document">active document</span>'s <span data-x="concept-document-url">URL</span> is
-  <code>about:blank</code>. <ref spec=DOM></p>
+  <code>about:blank</code>. <ref>DOM</ref></p>
 
   <p>When a <code>Document</code> is created by a <span data-x="concept-script">script</span> using
   the <code data-x="dom-DOMImplementation-createDocument">createDocument()</code> or <code
@@ -10702,7 +10735,7 @@ partial interface <dfn id="document" data-lt="">Document</dfn> {
   origin</span>, the user agent must throw a <span>"<code>SecurityError</code>"</span>
   <code>DOMException</code>. Otherwise, the user agent must return the <span>cookie-string</span>
   for the document's <span data-x="concept-document-url">URL</span> for a "non-HTTP" API, decoded
-  using <span>UTF-8 decode without BOM</span>. <ref spec=COOKIES></p>
+  using <span>UTF-8 decode without BOM</span>. <ref>COOKIES</ref></p>
 
   <p>On setting, if the document is a <span>cookie-averse <code>Document</code> object</span>, then
   the user agent must do nothing. Otherwise, if the <code>Document</code>'s <span
@@ -10711,7 +10744,7 @@ partial interface <dfn id="document" data-lt="">Document</dfn> {
   <code>DOMException</code>. Otherwise, the user agent must act as it would when <span
   data-x="receives a set-cookie-string">receiving a set-cookie-string</span> for the document's
   <span data-x="concept-document-url">URL</span> via a "non-HTTP" API, consisting of the new value
-  <span data-x="utf-8 encode">encoded as UTF-8</span>.  <ref spec=COOKIES> <ref spec=ENCODING></p>
+  <span data-x="utf-8 encode">encoded as UTF-8</span>.  <ref>COOKIES</ref> <ref>ENCODING</ref></p>
 
   <p class="note">Since the <code data-x="dom-document-cookie">cookie</code> attribute is accessible
   across frames, the path restrictions on cookies are only a tool to help manage which cookies are
@@ -11684,7 +11717,7 @@ interface <dfn interface>HTMLUnknownElement</dfn> : <span>HTMLElement</span> {
   instead of a lateral one, from <code>HTMLUnknownElement</code> to an unrelated subclass.</p>
 
   <p>Features shared between HTML and SVG elements use the <code>HTMLOrSVGElement</code> interface
-  mixin: <ref spec=SVG></p>
+  mixin: <ref>SVG</ref></p>
 
   <pre><code class="idl">interface mixin <dfn interface>HTMLOrSVGElement</dfn> {
   [SameObject] readonly attribute <span>DOMStringMap</span> <span data-x="dom-dataset">dataset</span>;
@@ -12035,11 +12068,11 @@ console.assert(image.height === 200);</code></pre>
 
    <dd>
     <p>For authors: Conformance requirements for use of <cite>ARIA</cite> <code
-    data-x="attr-aria-role">role</code> and <code data-x="attr-aria-*">aria-*</code> attributes
-    are defined in <cite>ARIA in HTML</cite>. <ref spec=ARIA> <ref spec=ARIAHTML></p>
+    data-x="attr-aria-role">role</code> and <code data-x="attr-aria-*">aria-*</code> attributes are
+    defined in <cite>ARIA in HTML</cite>. <ref>ARIA</ref> <ref>ARIAHTML</ref></p>
 
-    <p>For implementers: User agent requirements for implementing accessibility API semantics
-    are defined in <cite>HTML Accessibility API Mappings</cite>. <ref spec=HTMLAAM></p>
+    <p>For implementers: User agent requirements for implementing accessibility API semantics are
+    defined in <cite>HTML Accessibility API Mappings</cite>. <ref>HTMLAAM</ref></p>
    </dd>
 
 
@@ -12095,7 +12128,7 @@ console.assert(image.height === 200);</code></pre>
   data-x="">content</code> element. When its <code data-x="">type</code> attribute has the value
   <code data-x="">xhtml</code>, <cite>The Atom Syndication Format</cite> requires that it contain a
   single HTML <code>div</code> element. Thus, a <code>div</code> element is allowed in that context,
-  even though this is not explicitly normatively stated by this specification. <ref spec=ATOM></p>
+  even though this is not explicitly normatively stated by this specification. <ref>ATOM</ref></p>
 
   <p>In addition, <span>HTML elements</span> may be orphan nodes (i.e. without a parent node).</p>
 
@@ -12426,7 +12459,7 @@ console.assert(image.height === 200);</code></pre>
   This specification includes extra constraints on the exact value of <code>Text</code> nodes and
   attribute values depending on their precise context.
 
-  <!-- <ref spec=UNICODE>-->
+  <!-- <ref>UNICODE</ref>-->
 
   </p>
 
@@ -12921,8 +12954,8 @@ https://software.hixie.ch/utilities/js/live-dom-viewer/?%3C%21DOCTYPE%20HTML%3E%
   <p><cite>DOM</cite> defines the user agent requirements for the <dfn element-attr for="global"
   data-x="attr-class" id="classes"><code>class</code></dfn>, <dfn element-attr for="global"
   data-x="attr-id" id="the-id-attribute"><code>id</code></dfn>, and <dfn element-attr for="global"
-  data-x="attr-slot"><code>slot</code></dfn> attributes for any element in any namespace. <ref
-  spec=DOM></p>
+  data-x="attr-slot"><code>slot</code></dfn> attributes for any element in any namespace.
+  <ref>DOM</ref></p>
 
   <p>The <code data-x="attr-class">class</code>, <code data-x="attr-id">id</code>, and <code
   data-x="attr-slot">slot</code> attributes may be specified on all <span>HTML elements</span>.</p>
@@ -12991,8 +13024,8 @@ https://software.hixie.ch/utilities/js/live-dom-viewer/?%3C%21DOCTYPE%20HTML%3E%
   <p>To enable assistive technology products to expose a more fine-grained interface than is
   otherwise possible with HTML elements and attributes, a set of <a href="#wai-aria">annotations
   for assistive technology products</a> can be specified (the ARIA <code
-  data-x="attr-aria-role">role</code> and <code data-x="attr-aria-*">aria-*</code> attributes). <ref
-  spec=ARIA></p>
+  data-x="attr-aria-role">role</code> and <code data-x="attr-aria-*">aria-*</code> attributes).
+  <ref>ARIA</ref></p>
 
   <hr>
 
@@ -13109,7 +13142,7 @@ https://software.hixie.ch/utilities/js/live-dom-viewer/?%3C%21DOCTYPE%20HTML%3E%
   <p><cite>XML</cite> also allows the use of the <code data-x="attr-xml-space">xml:space</code>
   attribute in the <span>XML namespace</span> on any element in an <span data-x="XML documents">XML
   document</span>. This attribute has no effect on <span>HTML elements</span>, as the default
-  behavior in HTML is to preserve whitespace. <ref spec=XML></p>
+  behavior in HTML is to preserve whitespace. <ref>XML</ref></p>
 
   <p class="note">There is no way to serialize the <code data-x="attr-xml-space">xml:space</code>
   attribute on <span>HTML elements</span> in the <code>text/html</code> syntax.</p>
@@ -13194,11 +13227,11 @@ Transport Protocol">HTTP&lt;/abbr> today.&lt;/p></code></pre> <!-- DO NOT REWRAP
   (in no namespace) specifies the primary language for the element's contents and for any of the
   element's attributes that contain text. Its value must be a valid BCP 47 language tag, or the
   empty string. Setting the attribute to the empty string indicates that the primary language is
-  unknown<!-- UA conformance requirements for this are below -->. <ref spec=BCP47></p>
+  unknown<!-- UA conformance requirements for this are below -->. <ref>BCP47</ref></p>
 
   <p>The <dfn data-x="attr-xml-lang" data-x-href="https://www.w3.org/TR/xml/#sec-lang-tag"><code
-  data-x="">lang</code></dfn> attribute in the <span>XML namespace</span> is defined in XML. <ref
-  spec=XML></p>
+  data-x="">lang</code></dfn> attribute in the <span>XML namespace</span> is defined in XML.
+  <ref>XML</ref></p>
 
   <p>If these attributes are omitted from an element, then the language of this element is the same
   as the language of its parent element, if any.</p>
@@ -13259,7 +13292,8 @@ Transport Protocol">HTTP&lt;/abbr> today.&lt;/p></code></pre> <!-- DO NOT REWRAP
   language having the given language tag, distinct from all other languages. For the purposes of
   round-tripping or communicating with other services that expect language tags, user agents should
   pass unknown language tags through unmodified, and tagged as being BCP 47 language tags, so that
-  subsequent services do not interpret the data as another type of language description. <ref spec=BCP47></p>
+  subsequent services do not interpret the data as another type of language description.
+  <ref>BCP47</ref></p>
 
   <p class="example">Thus, for instance, an element with <code data-x="">lang="xyzzy"</code> would be
   matched by the selector <code data-x="">:lang(xyzzy)</code> (e.g. in CSS), but it would not be
@@ -13437,7 +13471,7 @@ Transport Protocol">HTTP&lt;/abbr> today.&lt;/p></code></pre> <!-- DO NOT REWRAP
     character with a strong directionality, in a manner analogous to the Paragraph Level
     determination in the bidirectional algorithm). Authors are urged to only use this value as a
     last resort when the direction of the text is truly unknown and no better server-side heuristic
-    can be applied. <ref spec=BIDI></p>
+    can be applied. <ref>BIDI</ref></p>
 
     <p class="note">For <code>textarea</code> and <code>pre</code> elements, the heuristic is
     applied on a per-paragraph level.</p>
@@ -13492,7 +13526,8 @@ Transport Protocol">HTTP&lt;/abbr> today.&lt;/p></code></pre> <!-- DO NOT REWRAP
     <p>If the element's <span data-x="concept-fe-value">value</span> contains a character of
     bidirectional character type AL or R, and there is no character of bidirectional character type
     L anywhere before it in the element's <span data-x="concept-fe-value">value</span>, then
-    <span>the directionality</span> of the element is '<span data-x="concept-rtl">rtl</span>'. <ref spec=BIDI></p>
+    <span>the directionality</span> of the element is '<span data-x="concept-rtl">rtl</span>'.
+    <ref>BIDI</ref></p>
 
     <p>Otherwise, if the element's <span data-x="concept-fe-value">value</span> is not the empty
     string, or if the element is a <span>document element</span>, <span>the directionality</span> of
@@ -13518,7 +13553,7 @@ Transport Protocol">HTTP&lt;/abbr> today.&lt;/p></code></pre> <!-- DO NOT REWRAP
      <li><p>The character is from a <code>Text</code> node that is a descendant of the element whose
      <span data-x="the directionality">directionality</span> is being determined.</p></li>
 
-     <li><p>The character is of bidirectional character type L, AL, or R. <ref spec=BIDI></li>
+     <li><p>The character is of bidirectional character type L, AL, or R. <ref>BIDI</ref></li>
 
      <li>
       <p>The character is not in a <code>Text</code> node that has an ancestor element that is a
@@ -13585,7 +13620,7 @@ Transport Protocol">HTTP&lt;/abbr> today.&lt;/p></code></pre> <!-- DO NOT REWRAP
 
    <dd>
     <p>Find the first character (in logical order) of the attribute's value that is of bidirectional
-    character type L, AL, or R. <ref spec=BIDI></p>
+    character type L, AL, or R. <ref>BIDI</ref></p>
 
     <p>If such a character is found and it is of bidirectional character type AL or R, the
     <span>directionality of the attribute</span> is '<span data-x="concept-rtl">rtl</span>'.</p>
@@ -13699,20 +13734,20 @@ Transport Protocol">HTTP&lt;/abbr> today.&lt;/p></code></pre> <!-- DO NOT REWRAP
   <p>All <span>HTML elements</span> may have the <dfn element-attr for="html-global"><code
   data-x="attr-style">style</code></dfn> content attribute set. This is a <span
   data-x="css-styling-attribute">style attribute</span> as defined by <cite>CSS Style
-  Attributes</cite>. <ref spec=CSSATTR></p>
+  Attributes</cite>. <ref>CSSATTR</ref></p>
 
   <div w-nodev>
 
   <p>In user agents that support CSS, the attribute's value must be parsed when the attribute is
   added or has its value changed<!-- so dynamic changes to the base URL don't affect the CSS -->,
   according to the rules given for <span data-x="css-styling-attribute">style attributes</span>.
-  <ref spec=CSSATTR></p>
+  <ref>CSSATTR</ref></p>
 
   <p>However, if the <span>Should element's inline behavior be blocked by Content Security
   Policy?</span> algorithm returns "<code data-x="">Blocked</code>" when executed upon the
   attribute's <span>element</span>, "<code data-x="">style attribute</code>", and the attribute's
   value, then the style rules defined in the attribute's value must not be applied to the
-  <span>element</span>. <ref spec=CSP></p>
+  <span>element</span>. <ref>CSP</ref></p>
 
   </div>
 
@@ -13734,8 +13769,8 @@ Transport Protocol">HTTP&lt;/abbr> today.&lt;/p></code></pre> <!-- DO NOT REWRAP
 
   <div w-nodev>
 
-  <p>The <code data-x="dom-style">style</code> IDL attribute is defined in <cite>CSS Object Model</cite>. <ref
-  spec=CSSOM></p>
+  <p>The <code data-x="dom-style">style</code> IDL attribute is defined in <cite>CSS Object
+  Model</cite>. <ref>CSSOM</ref></p>
 
   </div>
 
@@ -13975,8 +14010,7 @@ interface <dfn interface>DOMStringMap</dfn> {
 
   <p class="note">This algorithm will only get invoked by <cite>Web IDL</cite> for names that
   are given by the earlier algorithm for <span data-x="concept-DOMStringMap-pairs">getting the
-  <code>DOMStringMap</code>'s name-value pairs</span>. <ref
-  spec=WEBIDL></p>
+  <code>DOMStringMap</code>'s name-value pairs</span>. <ref>WEBIDL</ref></p>
 
   </div>
 
@@ -14141,8 +14175,8 @@ interface <dfn interface>DOMStringMap</dfn> {
    <var>items</var> to the <span>list</span> of the resulting strings, and return <var>items</var>.
    The CSS <span>'white-space'</span> processing rules are slightly modified: collapsible spaces at
    the end of lines are always collapsed, but they are only removed if the line is the last line of
-   the block, or it ends with a <code>br</code> element. Soft hyphens should be preserved. <ref
-   spec=CSSTEXT></p></li>
+   the block, or it ends with a <code>br</code> element. Soft hyphens should be preserved.
+   <ref>CSSTEXT</ref></p></li>
 
    <li><p>If <var>node</var> is a <code>br</code> element, then <span data-x="list
    append">append</span> a string containing a single U+000A LF code point to
@@ -14168,7 +14202,7 @@ interface <dfn interface>DOMStringMap</dfn> {
     <p>If <var>node</var>'s <span>used value</span> of <span>'display'</span> is
     <span>block-level</span> or <span>'table-caption'</span>, then <span data-x="list
     append">append</span> 1 (a <i>required line break count</i>) at the beginning and end of
-    <var>items</var>. <ref spec=CSSDISPLAY></p>
+    <var>items</var>. <ref>CSSDISPLAY</ref></p>
 
     <p class="note">Floats and absolutely-positioned elements fall into this category.</p>
    </li>
@@ -14304,7 +14338,7 @@ interface <dfn interface>DOMStringMap</dfn> {
   <p><span>Text content</span> in <span>HTML elements</span> with <code>Text</code> nodes in their
   <span data-x="concept-html-contents">contents</span>, and text in attributes of <span>HTML
   elements</span> that allow free-form text, may contain characters in the ranges U+202A to U+202E
-  and U+2066 to U+2069 (the bidirectional-algorithm formatting characters). <ref spec=BIDI></p>
+  and U+2066 to U+2069 (the bidirectional-algorithm formatting characters). <ref>BIDI</ref></p>
 
   <p class="note">Authors are encouraged to use the <code data-x="attr-dir">dir</code> attribute, the
   <code>bdo</code> element, and the <code>bdi</code> element, rather than maintaining the
@@ -14317,7 +14351,7 @@ interface <dfn interface>DOMStringMap</dfn> {
   <h5>User agent conformance criteria</h5>
 
   <p>User agents must implement the Unicode bidirectional algorithm to determine the proper ordering
-  of characters when rendering documents and parts of documents. <ref spec=BIDI></p>
+  of characters when rendering documents and parts of documents. <ref>BIDI</ref></p>
 
   <p>The mapping of HTML to the Unicode bidirectional algorithm must be done in one of three ways.
   Either the user agent must implement CSS, including in particular the CSS
@@ -14327,7 +14361,7 @@ interface <dfn interface>DOMStringMap</dfn> {
   act as if it implemented just the aforementioned properties and had a user agent style sheet that
   included all the aforementioned rules, but without letting style sheets specified in documents
   override them, or, alternatively, the user agent must implement another styling language with
-  equivalent semantics. <ref spec=CSSGC></p>
+  equivalent semantics. <ref>CSSGC</ref></p>
 
   <p id="bidireq">The following elements and attributes have requirements defined by the <a
   href="#rendering">rendering</a> section that, due to the requirements in this section, are
@@ -14352,8 +14386,8 @@ interface <dfn interface>DOMStringMap</dfn> {
 
   <p>User agent requirements for implementing Accessibility API semantics on <span>HTML
   elements</span> are defined in <cite>HTML Accessibility API Mappings</cite>. In addition to the
-  rules there, for a <span>custom element</span> <var>element</var>, the default ARIA role
-  semantics are determined as follows: <ref spec=HTMLAAM></p>
+  rules there, for a <span>custom element</span> <var>element</var>, the default ARIA role semantics
+  are determined as follows: <ref>HTMLAAM</ref></p>
 
   <ol>
    <li><p>Let <var>map</var> be <var>element</var>'s <span>internal content attribute
@@ -14392,7 +14426,7 @@ interface <dfn interface>DOMStringMap</dfn> {
   </ol>
 
   <p class="note">The "default semantics" referred to here are sometimes also called "native",
-  "implicit", or "host language" semantics in <cite>ARIA</cite>. <ref spec=ARIA></p>
+  "implicit", or "host language" semantics in <cite>ARIA</cite>. <ref>ARIA</ref></p>
 
   <p class="note">One implication of these definitions is that the default semantics can change over
   time. This allows custom elements the same expressivity as built-in elements; e.g., compare to how
@@ -14406,7 +14440,7 @@ interface <dfn interface>DOMStringMap</dfn> {
 
   <p>Conformance checker requirements for checking use of ARIA <code
   data-x="attr-aria-role">role</code> and <code data-x="attr-aria-*">aria-*</code> attributes on
-  <span>HTML elements</span> are defined in <cite>ARIA in HTML</cite>. <ref spec=ARIAHTML></p>
+  <span>HTML elements</span> are defined in <cite>ARIA in HTML</cite>. <ref>ARIAHTML</ref></p>
 
   </div>
 
@@ -15022,7 +15056,7 @@ interface <dfn interface>HTMLLinkElement</dfn> : <span>HTMLElement</span> {
   attribute must only be specified on <code>link</code> elements that have a <code
   data-x="attr-link-rel">rel</code> attribute that contains the <code
   data-x="rel-stylesheet">stylesheet</code>, <code data-x="rel-preload">preload</code>, or <code
-  data-x="rel-modulepreload">modulepreload</code> keyword. <ref spec=SRI></p>
+  data-x="rel-modulepreload">modulepreload</code> keyword. <ref>SRI</ref></p>
 
   <p>The <dfn element-attr for="link"><code data-x="attr-link-hreflang">hreflang</code></dfn>
   attribute on the <code>link</code> element has the same semantics as the <span
@@ -15042,7 +15076,7 @@ interface <dfn interface>HTMLLinkElement</dfn> : <span>HTMLElement</span> {
   attribute</span>. It is intended for use with <span data-x="external resource link">external
   resource links</span>, where it helps set the <span>referrer policy</span> used when <span
   data-x="fetch and process the linked resource">fetching and processing the linked resource</span>.
-  <ref spec=REFERRERPOLICY>.</p>
+  <ref>REFERRERPOLICY</ref>.</p>
 
   <p>The <dfn element-attr for="link"><code data-x="attr-link-title">title</code></dfn> attribute
   gives the title of the link. With one exception, it is purely advisory. The value is text. The
@@ -15654,7 +15688,7 @@ interface <dfn interface>HTMLLinkElement</dfn> : <span>HTMLElement</span> {
 
     <ol>
      <li><p>Let <var>linkObject</var> be the result of <span data-x="parsing a link field
-     value">parsing</span> <var>linkHeader</var>. <ref spec=WEBLINK></p></li>
+     value">parsing</span> <var>linkHeader</var>. <ref>WEBLINK</ref></p></li>
 
      <li><p>If <var>linkObject</var>["<code data-x="">target_uri</code>"] does not
      <span data-x="map exists">exist</span>, then <span>continue</span>.</p></li>
@@ -15792,7 +15826,7 @@ interface <dfn interface>HTMLLinkElement</dfn> : <span>HTMLElement</span> {
   load resources that are likely to be used by the document, before the navigation request is fully
   handled by the server and a response code is served. Servers can indicate early hints by serving a
   <span data-x="concept-response">response</span> with a 103 status code before serving the final
-  <span data-x="concept-response">response</span>.<ref spec=RFC8297></p>
+  <span data-x="concept-response">response</span>.<ref>RFC8297</ref></p>
 
   <p class="note">For compatibility reasons <a
   href="https://httpwg.org/specs/rfc8297.html#security-considerations">it is recommended</a> to
@@ -16282,7 +16316,7 @@ interface <dfn interface>HTMLMetaElement</dfn> : <span>HTMLElement</span> {
 
    <dd>
     <p>The value must be a <span>referrer policy</span>, which defines the default <span>referrer
-    policy</span> for the <code>Document</code>. <ref spec=REFERRERPOLICY></p>
+    policy</span> for the <code>Document</code>. <ref>REFERRERPOLICY</ref></p>
 
     <div w-nodev>
 
@@ -16534,7 +16568,7 @@ interface <dfn interface>HTMLMetaElement</dfn> : <span>HTMLElement</span> {
   href="https://wiki.whatwg.org/wiki/MetaExtensions">WHATWG Wiki MetaExtensions page</a> is
   encouraged — to avoid choosing a metadata name that's already in use, and to avoid duplicating the
   purpose of any metadata names that are already in use, and to avoid new standardized names
-  clashing with your chosen name. <ref spec=WHATWGWIKI></p>
+  clashing with your chosen name. <ref>WHATWGWIKI</ref></p>
 
   <p>Anyone is free to edit the WHATWG Wiki MetaExtensions page at any time to add a metadata name.
   New metadata names can be specified with the following information:</p>
@@ -16762,8 +16796,8 @@ people expect to have work and what is necessary.
     </ol>
 
     <p class="note">This pragma is almost, but not quite, entirely unlike the HTTP `<code
-    data-x="http-content-language">Content-Language</code>` header of the same name. <ref
-    spec=HTTP></p>
+    data-x="http-content-language">Content-Language</code>` header of the same name.
+    <ref>HTTP</ref></p>
    </dd>
 
    <dt><dfn data-x="attr-meta-http-equiv-content-type">Encoding declaration state</dfn> (<code data-x="">http-equiv="<code data-x="attr-meta-http-equiv-keyword-content-type">content-type</code>"</code>)
@@ -16806,8 +16840,8 @@ people expect to have work and what is necessary.
      attribute, or if that attribute's value is the empty string, then return.</p></li>
 
      <li><p><span>Change the preferred CSS style sheet set name</span> with the name being the value
-     of the element's <code data-x="attr-meta-content">content</code> attribute. <ref
-     spec=CSSOM></p></li>
+     of the element's <code data-x="attr-meta-content">content</code> attribute.
+     <ref>CSSOM</ref></p></li>
     </ol>
 
     </div>
@@ -17058,7 +17092,7 @@ people expect to have work and what is necessary.
 
    <dd>
     <p>This pragma <span data-x="enforce the policy">enforces</span> a <span>Content Security
-    Policy</span> on a <code>Document</code>. <ref spec=CSP></p>
+    Policy</span> on a <code>Document</code>. <ref>CSP</ref></p>
 
     <div w-nodev>
 
@@ -17093,8 +17127,8 @@ people expect to have work and what is necessary.
     <code data-x="frame-ancestors directive">frame-ancestors</code>, or <code data-x="sandbox
     directive">sandbox</code> <span data-x="Content Security Policy directive">directives</span>.
     The <span>Content Security Policy</span> given in the <code
-    data-x="attr-meta-content">content</code> attribute will be <span
-    data-x="enforce the policy">enforced</span> upon the current document. <ref spec=CSP></p>
+    data-x="attr-meta-content">content</code> attribute will be <span data-x="enforce the
+    policy">enforced</span> upon the current document. <ref>CSP</ref></p>
 
     <p class="note">At the time of inserting the <code>meta</code> element to the document, it is
     possible that some resources have already been fetched. For example, images might be stored in
@@ -17137,7 +17171,7 @@ people expect to have work and what is necessary.
   case-insensitive</span> match for "<code data-x="">utf-8</code>". Regardless of whether a
   <span>character encoding declaration</span> is present or not, the actual <span data-x="document's
   character encoding">character encoding</span> used to encode the document must be
-  <span>UTF-8</span>. <ref spec=ENCODING></p>
+  <span>UTF-8</span>. <ref>ENCODING</ref></p>
 
   <p w-nodev>To enforce the above rules, authoring tools must default to using <span>UTF-8</span>
   for newly-created documents.</p>
@@ -17307,7 +17341,7 @@ console.log(style.disabled); // false</code></pre>
   has no <code data-x="attr-style-title">title</code> attribute, then it has no title; the <code
   data-x="attr-title">title</code> attribute of ancestors does not apply to the <code>style</code>
   element. If the <code>style</code> element is not <span>in a document tree</span>, then the <code
-  data-x="attr-style-title">title</code> attribute is ignored. <ref spec=CSSOM></p>
+  data-x="attr-style-title">title</code> attribute is ignored. <ref>CSSOM</ref></p>
 
   <p class="note">The <code data-x="attr-style-title">title</code> attribute on <code>style</code>
   elements, like the <code data-x="attr-link-title">title</code> attribute on <code>link</code>
@@ -17365,8 +17399,8 @@ console.log(style.disabled); // false</code></pre>
 
    <li><p>If the <span>Should element's inline behavior be blocked by Content Security
    Policy?</span> algorithm returns "<code data-x="">Blocked</code>" when executed upon the
-   <code>style</code> element, "<code data-x="">style</code>", and the <code>style</code>
-   element's <span>child text content</span>, then return. <ref spec=CSP></p></li>
+   <code>style</code> element, "<code data-x="">style</code>", and the <code>style</code> element's
+   <span>child text content</span>, then return. <ref>CSP</ref></p></li>
 
    <li>
     <p><span>Create a CSS style sheet</span> with the following properties:</p>
@@ -17500,7 +17534,7 @@ console.log(style.disabled); // false</code></pre>
   </div>
 
   <p class="note">This specification does not specify a style system, but CSS is expected to be
-  supported by most web browsers. <ref spec=CSS></p>
+  supported by most web browsers. <ref>CSS</ref></p>
 
   <div w-nodev>
 
@@ -17510,7 +17544,7 @@ console.log(style.disabled); // false</code></pre>
 
   </div>
 
-  <p>The <code>LinkStyle</code> interface is also implemented by this element. <ref spec=CSSOM></p>
+  <p>The <code>LinkStyle</code> interface is also implemented by this element. <ref>CSSOM</ref></p>
 
   <div class="example">
 
@@ -17768,7 +17802,7 @@ interface <dfn interface>HTMLBodyElement</dfn> : <span>HTMLElement</span> {
 
   <p class="note">When used specifically with content to be redistributed in syndication, the
   <code>article</code> element is similar in purpose to the <code data-x="">entry</code> element in
-  Atom. <ref spec=ATOM>
+  Atom. <ref>ATOM</ref>
 
   <p class="note">The schema.org microdata vocabulary can be used to provide the publication date
   for an <code>article</code> element, using one of the CreativeWork subtypes.</p>
@@ -22239,7 +22273,7 @@ this specification: the &lt;abbr>WHATWG&lt;/abbr> and the
   <p>The <code>ruby</code> and <code>rt</code> elements can be used for a variety of kinds of
   annotations, including in particular (though by no means limited to) those described below. For
   more details on Japanese Ruby in particular, and how to render Ruby for Japanese, see
-  <cite>Requirements for Japanese Text Layout</cite>. <ref spec=JLREQ></p>
+  <cite>Requirements for Japanese Text Layout</cite>. <ref>JLREQ</ref></p>
 
   <p class="note">At the time of writing, CSS does not yet provide a way to fully control the
   rendering of the HTML <code>ruby</code> element. It is hoped that CSS will be extended to support
@@ -22311,7 +22345,7 @@ this specification: the &lt;abbr>WHATWG&lt;/abbr> and the
 
     <p class="note">For more details on <a
     href="https://www.w3.org/TR/jlreq/#positioning_of_jukugoruby">Jukugo Ruby rendering</a>, see
-    Appendix F in the <cite>Requirements for Japanese Text Layout</cite>. <ref spec=JLREQ></p>
+    Appendix F in the <cite>Requirements for Japanese Text Layout</cite>. <ref>JLREQ</ref></p>
    </dd>
 
 
@@ -22421,7 +22455,7 @@ this specification: the &lt;abbr>WHATWG&lt;/abbr> and the
   segment.) A <code>ruby</code> element <span>represents</span> the union of the segments of base
   text it contains, along with the mapping from those base text segments to annotation segments.
   <span w-nodev>Segments are described in terms of DOM ranges; annotation segment ranges always
-  consist of exactly one element. <ref spec=DOM></span></p>
+  consist of exactly one element. <ref>DOM</ref></span></p>
 
   <div w-nodev>
 
@@ -22974,7 +23008,7 @@ interface <dfn interface>HTMLTimeElement</dfn> : <span>HTMLElement</span> {
     daylight saving time. In some cases, geographic locations even change time zone, e.g. when the
     boundaries of those time zones are redrawn, as happened with Samoa at the end of 2011. There
     exists a time zone database that describes the boundaries of time zones and what rules apply
-    within each such zone, known as the <i>time zone database</i>. <ref spec=TZDATABASE></p>
+    within each such zone, known as the <i>time zone database</i>. <ref>TZDATABASE</ref></p>
    </dd>
 
 
@@ -23517,7 +23551,7 @@ For example, the 10th point has coordinate
 
   <p>Mathematical expressions often use subscripts and superscripts. Authors are encouraged to use
   MathML for marking up mathematics, but authors may opt to use <code>sub</code> and
-  <code>sup</code> if detailed mathematical markup is not desired. <ref spec=MATHML></p>
+  <code>sup</code> if detailed mathematical markup is not desired. <ref>MATHML</ref></p>
 
   <div class="example">
    <pre><code class="html">&lt;var>E&lt;/var>=&lt;var>m&lt;/var>&lt;var>c&lt;/var>&lt;sup>2&lt;/sup></code></pre>
@@ -23900,7 +23934,7 @@ wormhole connection.&lt;/mark>&lt;/p></code></pre>
   </dl>
 
   <p>The <code>bdi</code> element <span>represents</span> a span of text that is to be isolated from
-  its surroundings for the purposes of bidirectional text formatting. <ref spec=BIDI></p>
+  its surroundings for the purposes of bidirectional text formatting. <ref>BIDI</ref></p>
 
   <p class="note">The <code data-x="attr-dir">dir</code> global attribute defaults to <code
   data-x="attr-dir-auto">auto</code> on this element (it never inherits from the parent element like
@@ -23966,7 +24000,7 @@ wormhole connection.&lt;/mark>&lt;/p></code></pre>
 
   <p>The <code>bdo</code> element <span>represents</span> explicit text directionality formatting
   control for its children. It allows authors to override the Unicode bidirectional algorithm by
-  explicitly specifying a direction override. <ref spec=BIDI></p>
+  explicitly specifying a direction override. <ref>BIDI</ref></p>
 
   <p>Authors must specify the <code data-x="attr-dir">dir</code> attribute on this element, with the
   value <code data-x="attr-dir-ltr">ltr</code> to specify a left-to-right override and with the value <code data-x="attr-dir-rtl">rtl</code> to
@@ -24425,7 +24459,7 @@ document.body.appendChild(wbr);</code></pre>
   <p>The <dfn element-attr for="a,area"><code data-x="attr-hyperlink-hreflang">hreflang</code></dfn>
   attribute on <code>a</code> elements that create <span data-x="hyperlink">hyperlinks</span>, if
   present, gives the language of the linked resource. It is purely advisory. The value must be a
-  valid BCP 47 language tag. <ref spec=BCP47> <span w-nodev>User agents must not consider this
+  valid BCP 47 language tag. <ref>BCP47</ref> <span w-nodev>User agents must not consider this
   attribute authoritative &mdash; upon fetching the resource, user agents must use only language
   information associated with the resource to determine its language, not metadata included in the
   link to the resource.</span></p>
@@ -24440,7 +24474,7 @@ document.body.appendChild(wbr);</code></pre>
   <p>The <dfn element-attr for="a,area"><code
   data-x="attr-hyperlink-referrerpolicy">referrerpolicy</code></dfn> attribute is a <span>referrer
   policy attribute</span>. Its purpose is to set the <span>referrer policy</span> used when
-  <span>following hyperlinks</span>. <ref spec=REFERRERPOLICY></p>
+  <span>following hyperlinks</span>. <ref>REFERRERPOLICY</ref></p>
 
   <hr>
 
@@ -25142,7 +25176,7 @@ document.body.appendChild(wbr);</code></pre>
   <p>The attribute can furthermore be given a value, to specify the filename that user agents are
   to use when storing the resource in a file system. This value can be overridden by the `<code
   data-x="http-content-disposition">Content-Disposition</code>` HTTP header's filename parameters.
-  <ref spec=RFC6266></p>
+  <ref>RFC6266</ref></p>
 
   <p>In cross-origin situations, the <code data-x="attr-hyperlink-download">download</code>
   attribute has to be combined with the `<code
@@ -25242,7 +25276,7 @@ document.body.appendChild(wbr);</code></pre>
    <li><p>If the resource has a `<code data-x="http-content-disposition">Content-Disposition</code>`
    header, that header specifies the <code data-x="">attachment</code> disposition type, and the
    header includes filename information, then let <var>filename</var> have the value specified by
-   the header, and jump to the step labeled <i>sanitize</i> below. <ref spec=RFC6266></p></li>
+   the header, and jump to the step labeled <i>sanitize</i> below. <ref>RFC6266</ref></p></li>
 
    <li><p>Let <var>interface origin</var> be the <span
    data-x="concept-document-origin">origin</span> of the <code>Document</code> in which the <span
@@ -25262,7 +25296,7 @@ document.body.appendChild(wbr);</code></pre>
    <li><p>If <var>trusted operation</var> is true and the resource has a `<code
    data-x="http-content-disposition">Content-Disposition</code>` header and that header includes
    filename information, then let <var>filename</var> have the value specified by the header, and
-   jump to the step labeled <i>sanitize</i> below. <ref spec=RFC6266></p></li>
+   jump to the step labeled <i>sanitize</i> below. <ref>RFC6266</ref></p></li>
 
    <li><p>If the download was not initiated from a <span>hyperlink</span> created by an
    <code>a</code> or <code>area</code> element, or if the element of the <span>hyperlink</span> from
@@ -25285,8 +25319,9 @@ document.body.appendChild(wbr);</code></pre>
 
    <!-- Content-Disposition: attachment with no filename="" allows download="" cross-origin -->
    <li><p>If the resource has a `<code data-x="http-content-disposition">Content-Disposition</code>`
-   header and that header specifies the <code data-x="">attachment</code> disposition type, let <var>filename</var> have the value of <var>proposed filename</var>, and jump to the
-   step labeled <i>sanitize</i> below. <ref spec=RFC6266></p></li>
+   header and that header specifies the <code data-x="">attachment</code> disposition type, let
+   <var>filename</var> have the value of <var>proposed filename</var>, and jump to the step labeled
+   <i>sanitize</i> below. <ref>RFC6266</ref></p></li>
 
    <!-- fallback for same-origin resources or explicit downloads: use the resource's filename -->
    <li><p><i>No proposed filename</i>: If <var>trusted operation</var> is true, or if the
@@ -25648,7 +25683,7 @@ document.body.appendChild(wbr);</code></pre>
      <td colspan="2"><em>not allowed</em></td>
      <td class="no"> &middot; </td>
      <td class="no"> &middot; </td>
-     <td>Imports or links to an <span>application manifest</span>. <ref spec=MANIFEST></td>
+     <td>Imports or links to an <span>application manifest</span>. <ref>MANIFEST</ref></td>
     </tr>
 
     <tr>
@@ -25937,7 +25972,7 @@ document.body.appendChild(wbr);</code></pre>
   whole.</p>
 
   <p class="note">The "referenced document" can be, and often is, a <code data-x="mailto
-  protocol">mailto:</code> URL giving the email address of the author. <ref spec=MAILTO></p>
+  protocol">mailto:</code> URL giving the email address of the author. <ref>MAILTO</ref></p>
 
   <div w-nodev>
 
@@ -25998,7 +26033,7 @@ document.body.appendChild(wbr);</code></pre>
   <p>The <code data-x="rel-canonical">canonical</code> keyword indicates that URL given by the <code
   data-x="attr-link-href">href</code> attribute is the preferred URL for the current document. That
   helps search engines reduce duplicate content, as described in more detail in <cite>The Canonical
-  Link Relation</cite>. <ref spec=RFC6596></p>
+  Link Relation</cite>. <ref>RFC6596</ref></p>
 
 
   <h5>Link type "<dfn attr-value for="link/rel"><code
@@ -26409,7 +26444,7 @@ document.body.appendChild(wbr);</code></pre>
      data-x="concept-response-url">URL</span>.</p></li>
 
      <li><p><span>Process the manifest</span> given <var>document URL</var>, <var>manifest
-     URL</var>, and <var>bodyBytes</var>. <ref spec=MANIFEST></p></li>
+     URL</var>, and <var>bodyBytes</var>. <ref>MANIFEST</ref></p></li>
     </ol>
    </li>
   </ol>
@@ -26692,8 +26727,8 @@ document.body.appendChild(wbr);</code></pre>
   elements. This keyword creates an <span data-x="external resource link">external resource
   link</span>. This keyword is <span>body-ok</span>.</p>
 
-  <p>For the semantics of the <code data-x="rel-pingback">pingback</code> keyword, see <cite>Pingback
-  1.0</cite>. <ref spec=PINGBACK></p>
+  <p>For the semantics of the <code data-x="rel-pingback">pingback</code> keyword, see
+  <cite>Pingback 1.0</cite>. <ref>PINGBACK</ref></p>
 
 
   <h5>Link type "<dfn attr-value for="link/rel"><code
@@ -27021,8 +27056,8 @@ document.body.appendChild(wbr);</code></pre>
     consider the case where a developer specifies subresource integrity metadata on a preload
     request, but not the following resource request. If the preload request fails subresource
     integrity verification and is discarded, the resource request will fetch and consume a
-    potentially-malicious response from the network without verifying its integrity. <ref
-    spec=SRI></p>
+    potentially-malicious response from the network without verifying its integrity.
+    <ref>SRI</ref></p>
    </li>
 
    <li><p><span data-x="map remove">Remove</span> <var>preloads</var>[<var>key</var>].</p></li>
@@ -27241,7 +27276,7 @@ document.body.appendChild(wbr);</code></pre>
 
   <p class="note">OpenSearch description documents can be used with <code>link</code> elements and
   the <code data-x="rel-search">search</code> link type to enable user agents to autodiscover search
-  interfaces. <ref spec=OPENSEARCH></p>
+  interfaces. <ref>OPENSEARCH</ref></p>
 
 
   <h5>Link type "<dfn attr-value for="link/rel"><code
@@ -27444,14 +27479,16 @@ document.body.appendChild(wbr);</code></pre>
         </dd>
       </dl>
 
-      <p>The CSS <span>environment encoding</span> is the result of running the following steps: <ref spec=CSSSYNTAX></p>
+      <p>The CSS <span>environment encoding</span> is the result of running the following steps:
+      <ref>CSSSYNTAX</ref></p>
 
       <ol>
        <li><p>If the element has a <code data-x="attr-link-charset">charset</code> attribute, <span
        data-x="getting an encoding">get an encoding</span> from that attribute's value. If that
-       succeeds, return the resulting encoding. <ref spec=ENCODING></p></li>
+       succeeds, return the resulting encoding. <ref>ENCODING</ref></p></li>
 
-       <li><p>Otherwise, return the <span>document's character encoding</span>. <ref spec=DOM></p></li>
+       <li><p>Otherwise, return the <span>document's character encoding</span>.
+       <ref>DOM</ref></p></li>
       </ol>
      </li>
 
@@ -27612,7 +27649,7 @@ document.body.appendChild(wbr);</code></pre>
   <p><dfn data-x="concept-rel-extensions">Extensions to the predefined set of link types</dfn> may
   be registered on the <a
   href="https://microformats.org/wiki/existing-rel-values#HTML5_link_type_extensions">microformats
-  page for existing rel values</a>. <ref spec=MFREL></p>
+  page for existing rel values</a>. <ref>MFREL</ref></p>
 
   <p>Anyone is free to edit the <span data-x="">microformats page for existing rel values</span> at
   any time to add a type. Extension types must be specified with the following information:</p>
@@ -27785,7 +27822,7 @@ document.body.appendChild(wbr);</code></pre>
   href="https://microformats.org/wiki/existing-rel-values#HTML5_link_type_extensions">microformats
   page for existing rel values</a> with the status "proposed" or "ratified" may be used with the
   <code data-x="">rel</code> attribute on <code>link</code>, <code>a</code>, and <code>area</code>
-  elements in accordance to the "Effect on..." field. <ref spec=MFREL></p>
+  elements in accordance to the "Effect on..." field. <ref>MFREL</ref></p>
 
 
 
@@ -28312,8 +28349,8 @@ interface <dfn interface>HTMLSourceElement</dfn> : <span>HTMLElement</span> {
     <p>The <code data-x="attr-source-type">type</code> attribute gives the type of the <span>media
     resource</span>, to help the user agent determine if it can play this <span>media
     resource</span> before fetching it. The <code data-x="">codecs</code> parameter, which certain
-    MIME types define, might be necessary to specify exactly how the resource is encoded. <ref
-    spec=RFC6381></p>
+    MIME types define, might be necessary to specify exactly how the resource is encoded.
+    <ref>RFC6381</ref></p>
 
     <p class="note">Dynamically modifying a <code>source</code> element's <code
     data-x="attr-source-src">src</code> or <code data-x="attr-source-type">type</code> attribute
@@ -28588,8 +28625,8 @@ interface <dfn interface>HTMLImageElement</dfn> : <span>HTMLElement</span> {
   animated bitmaps (APNGs, animated GIFs), animated vector graphics (XML files with an SVG
   <span>document element</span> that use declarative SMIL animation), and so forth. However, these
   definitions preclude SVG files with script, multipage PDF files, interactive MNG files, HTML
-  documents, plain text documents, and the like. <ref spec=PNG> <ref spec=GIF> <ref spec=JPEG> <ref
-  spec=PDF> <ref spec=XML> <ref spec=APNG> <ref spec=SVG> <ref spec=MNG> </p>
+  documents, plain text documents, and the like. <ref>PNG</ref> <ref>GIF</ref> <ref>JPEG</ref>
+  <ref>PDF</ref> <ref>XML</ref> <ref>APNG</ref> <ref>SVG</ref> <ref>MNG</ref> </p>
 
   <p>The <code data-x="attr-img-srcset">srcset</code> attribute may also be present, and is a
   <span>srcset attribute</span>.</p>
@@ -28621,7 +28658,7 @@ interface <dfn interface>HTMLImageElement</dfn> : <span>HTMLElement</span> {
   <p>The <dfn element-attr for="img"
   data-x="attr-img-referrerpolicy"><code>referrerpolicy</code></dfn> attribute is a <span>referrer
   policy attribute</span>. Its purpose is to set the <span>referrer policy</span> used when <span
-  data-x="concept-fetch">fetching</span> the image. <ref spec=REFERRERPOLICY></p>
+  data-x="concept-fetch">fetching</span> the image. <ref>REFERRERPOLICY</ref></p>
 
   <p>The <dfn element-attr for="img" data-x="attr-img-decoding"><code>decoding</code></dfn>
   attribute indicates the preferred method to <span data-x="img-decoding-process">decode</span> this
@@ -28950,7 +28987,7 @@ interface <dfn interface>HTMLImageElement</dfn> : <span>HTMLElement</span> {
   data-x="'px'">CSS pixels</span>, if the image has <span>density-corrected natural width and
   height</span> and is <i data-x="img-available">available</i> but is not <span>being
   rendered</span>; or else 0, if the image is not <i data-x="img-available">available</i> or does
-  not have <span>density-corrected natural width and height</span>. <ref spec=CSS></p>
+  not have <span>density-corrected natural width and height</span>. <ref>CSS</ref></p>
 
   <p>On setting, they must act as if they <span data-x="reflect">reflected</span> the respective
   content attributes of the same name.</p>
@@ -28960,7 +28997,7 @@ interface <dfn interface>HTMLImageElement</dfn> : <span>HTMLElement</span> {
   for="HTMLImageElement" data-x="dom-img-naturalHeight"><code>naturalHeight</code></dfn> must return
   the <span>density-corrected natural width and height</span> of the image, in <span
   data-x="'px'">CSS pixels</span>, if the image has <span>density-corrected natural width and
-  height</span> and is <i data-x="img-available">available</i>, or else 0. <ref spec=CSS></p>
+  height</span> and is <i data-x="img-available">available</i>, or else 0. <ref>CSS</ref></p>
 
   <p class="note">Since the <span>density-corrected natural width and height</span> of an image
   take into account any orientation specified in its metadata, <code
@@ -29953,7 +29990,7 @@ was an English &lt;a href="/wiki/Music_hall">music hall&lt;/a> singer, ...</code
   <p>If present, the value must be a <span>valid source size list</span>.</p>
 
   <p>A <dfn>valid source size list</dfn> is a string that matches the following grammar:
-  <ref spec=CSSVALUES> <ref spec=MQ></p>
+  <ref>CSSVALUES</ref> <ref>MQ</ref></p>
 
 <pre><code class="html"><dfn type>&lt;source-size-list></dfn> = <span>&lt;source-size></span>#? , <span>&lt;source-size-value></span>
 <dfn type>&lt;source-size></dfn> = <span>&lt;media-condition></span> <span>&lt;source-size-value></span> | <span data-x="valdef-sizes-auto">auto</span>
@@ -29976,7 +30013,7 @@ was an English &lt;a href="/wiki/Music_hall">music hall&lt;/a> singer, ...</code
 
   <p>The <dfn export>concrete object size ignoring natural dimensions</dfn> of an element is its
   <span>concrete object size</span> but acting as if there are no <span>natural dimensions</span>,
-  thus producing a rectangle with an absolute width and height. <ref spec=CSSIMAGES></p>
+  thus producing a rectangle with an absolute width and height. <ref>CSSIMAGES</ref></p>
 
   <p class="note">The <span>concrete object size ignoring natural dimensions</span> of an
   <code>img</code> element will match the <span>concrete object size</span> before an image has
@@ -30134,8 +30171,8 @@ was an English &lt;a href="/wiki/Music_hall">music hall&lt;/a> singer, ...</code
   <p>A <dfn>source size</dfn> is a <span>&lt;source-size-value></span>.
   When a <span>source size</span> has a unit relative to the <span>viewport</span>,
   it must be interpreted relative to the <code>img</code> element's <span>node document</span>'s
-  <span>viewport</span>.
-  Other units must be interpreted the same as in Media Queries. <ref spec=MQ></p>
+  <span>viewport</span>. Other units must be interpreted the same as in Media Queries.
+  <ref>MQ</ref></p>
 
   <hr>
 
@@ -30819,8 +30856,8 @@ was an English &lt;a href="/wiki/Music_hall">music hall&lt;/a> singer, ...</code
 
   <ol>
    <li><p>Let <var>exifTagMap</var> be the EXIF tags obtained from <var>req</var>'s <span
-   data-x="img-req-data">image data</span>, as defined by the relevant codec. <ref
-   spec=EXIF></p></li>
+   data-x="img-req-data">image data</span>, as defined by the relevant codec.
+   <ref>EXIF</ref></p></li>
 
    <li><p>Let <var>physicalWidth</var> and <var>physicalHeight</var> be the width and height
    obtained from <var>req</var>'s <span data-x="img-req-data">image data</span>, as defined by the
@@ -31300,8 +31337,8 @@ was an English &lt;a href="/wiki/Music_hall">music hall&lt;/a> singer, ...</code
   <ol>
    <li><p>Let <var>unparsed sizes list</var> be the result of <span data-x="parse a comma-separated
    list of component values">parsing a comma-separated list of component values</span> from the
-   value of <var>element</var>'s <span>sizes attribute</span> (or the empty string, if the
-   attribute is absent). <ref spec=CSSSYNTAX></p></li>
+   value of <var>element</var>'s <span>sizes attribute</span> (or the empty string, if the attribute
+   is absent). <ref>CSSSYNTAX</ref></p></li>
 
    <li><p>Let <var>size</var> be null.</p></li>
 
@@ -31335,7 +31372,7 @@ was an English &lt;a href="/wiki/Music_hall">music hall&lt;/a> singer, ...</code
      as a <span>&lt;media-condition></span>.
      If it does not parse correctly,
      or it does parse correctly but the <span>&lt;media-condition></span> evaluates to false,
-     <span>continue</span>. <ref spec=MQ></p></li>
+     <span>continue</span>. <ref>MQ</ref></p></li>
 
      <li><p>If <var>size</var> is not <code data-x="valdef-sizes-auto">auto</code>, then return
      <var>size</var>.</p></li>
@@ -32659,7 +32696,7 @@ interface <dfn interface>HTMLIFrameElement</dfn> : <span>HTMLElement</span> {
   order to prevent <a href="https://www.w3.org/TR/xml/#AVNormalize">attribute-value
   normalization</a>, some of XML's whitespace characters &mdash; specifically U+0009 CHARACTER
   TABULATION (tab), U+000A LINE FEED (LF), and U+000D CARRIAGE RETURN (CR) &mdash; also need to be
-  escaped. <ref spec=XML></p>
+  escaped. <ref>XML</ref></p>
 
   <p class="note">If the <code data-x="attr-iframe-src">src</code> attribute and the <code
   data-x="attr-iframe-srcdoc">srcdoc</code> attribute are both specified together, the <code
@@ -33030,8 +33067,7 @@ interface <dfn interface>HTMLIFrameElement</dfn> : <span>HTMLElement</span> {
   the presentation API, scripts, and the creation of unsandboxed <span
   data-x="auxiliary browsing context">auxiliary browsing contexts</span> respectively. The <code
   data-x="attr-iframe-sandbox-allow-downloads">allow-downloads</code> keyword allows content to
-  perform downloads. <ref spec=POINTERLOCK> <ref spec=SCREENORIENTATION> <ref
-  spec=PRESENTATION></p>
+  perform downloads. <ref>POINTERLOCK</ref> <ref>SCREENORIENTATION</ref> <ref>PRESENTATION</ref></p>
 
   <p>The <code
   data-x="attr-iframe-sandbox-allow-top-navigation">allow-top-navigation</code> and <code
@@ -33175,7 +33211,7 @@ interface <dfn interface>HTMLIFrameElement</dfn> : <span>HTMLElement</span> {
   data-x="concept-document-permissions-policy">permissions policy</span> for a
   <code>Document</code> in the <code>iframe</code>'s <span>content navigable</span> is initialized.
   Its value must be a <span data-x="concept-serialized-permissions-policy">serialized permissions
-  policy</span>. <ref spec=PERMISSIONSPOLICY></p>
+  policy</span>. <ref>PERMISSIONSPOLICY</ref></p>
 
   <div class="example">
    <p>In this example, an <code>iframe</code> is used to embed a map from an online navigation
@@ -33192,7 +33228,7 @@ interface <dfn interface>HTMLIFrameElement</dfn> : <span>HTMLElement</span> {
   data-x="concept-document-permissions-policy">permissions policy</span> which allows the "<code
   data-x="">fullscreen</code>" feature to be used from any <span>origin</span>. This is enforced by
   the <span data-x="process-permissions-policy-attributes">process permissions policy
-  attributes</span> algorithm. <ref spec=PERMISSIONSPOLICY></p>
+  attributes</span> algorithm. <ref>PERMISSIONSPOLICY</ref></p>
 
   <div class="example">
 
@@ -33261,7 +33297,7 @@ interface <dfn interface>HTMLIFrameElement</dfn> : <span>HTMLElement</span> {
   data-x="attr-iframe-referrerpolicy"><code>referrerpolicy</code></dfn> attribute is a
   <span>referrer policy attribute</span>. Its purpose is to set the <span>referrer policy</span>
   used when <span data-x="process the iframe attributes">processing the <code>iframe</code>
-  attributes</span>. <ref spec=REFERRERPOLICY></p>
+  attributes</span>. <ref>REFERRERPOLICY</ref></p>
 
   <p>The <dfn element-attr for="iframe" data-x="attr-iframe-loading"><code>loading</code></dfn> attribute is a <span>lazy
   loading attribute</span>. Its purpose is to indicate the policy for loading <code>iframe</code>
@@ -34236,7 +34272,7 @@ interface <dfn interface>HTMLVideoElement</dfn> : <span>HTMLMediaElement</span>
   referenced using the <code>track</code> element and synthesized into speech by the user agent.
   WebVTT can also be used to provide chapter titles. For users who would rather not use a media
   element at all, transcripts or other textual alternatives can be provided by simply linking to
-  them in the prose near the <code>video</code> element. <ref spec=WEBVTT></p>
+  them in the prose near the <code>video</code> element. <ref>WEBVTT</ref></p>
 
   <p>The <code>video</code> element is a <span>media element</span> whose <span>media data</span> is
   ostensibly video data, possibly with associated audio data.</p>
@@ -34468,7 +34504,7 @@ interface <dfn interface>HTMLVideoElement</dfn> : <span>HTMLMediaElement</span>
   available; otherwise the <span>natural height</span> is missing.</p>
 
   <p>The <span>default object size</span> is a width of 300 <span data-x="'px'">CSS pixels</span>
-  and a height of 150 <span data-x="'px'">CSS pixels</span>. <ref spec=CSSIMAGES></p>
+  and a height of 150 <span data-x="'px'">CSS pixels</span>. <ref>CSSIMAGES</ref></p>
 
   <hr>
 
@@ -34633,7 +34669,7 @@ interface <dfn interface>HTMLAudioElement</dfn> : <span>HTMLMediaElement</span>
   play the audio, allowing users to enable the visual alternatives. Chapter titles can be provided
   to aid navigation, using the <code>track</code> element and a <span>WebVTT file</span>. And,
   naturally, transcripts or other textual alternatives can be provided by simply linking to them in
-  the prose near the <code>audio</code> element. <ref spec=WEBVTT></p>
+  the prose near the <code>audio</code> element. <ref>WEBVTT</ref></p>
 
   <p>The <code>audio</code> element is a <span>media element</span> whose <span>media data</span> is
   ostensibly audio data.</p>
@@ -34831,13 +34867,13 @@ interface <dfn interface>HTMLTrackElement</dfn> : <span>HTMLElement</span> {
   data-x="attr-track-kind">kind</code> attribute is not in the <span
   data-x="attr-track-kind-chapters">chapters metadata</span> or <span
   data-x="attr-track-kind-metadata">metadata</span> state, then the WebVTT file must be a
-  <span>WebVTT file using cue text</span>. <ref spec=WEBVTT></p>
+  <span>WebVTT file using cue text</span>. <ref>WEBVTT</ref></p>
 
   <p>The <dfn element-attr for="track"><code data-x="attr-track-srclang">srclang</code></dfn>
   attribute gives the language of the text track data. The value must be a valid BCP 47 language
   tag. This attribute must be present if the element's <code data-x="attr-track-kind">kind</code>
-  attribute is in the <span data-x="attr-track-kind-subtitles">subtitles</span> state. <ref
-  spec=BCP47></p>
+  attribute is in the <span data-x="attr-track-kind-subtitles">subtitles</span> state.
+  <ref>BCP47</ref></p>
 
   <div w-nodev>
 
@@ -35321,7 +35357,8 @@ interface <dfn interface>MediaError</dfn> {
 
   <p>A <span>media resource</span> can be described in terms of its <em>type</em>, specifically a
   <span>MIME type</span>, in some cases with a <code data-x="">codecs</code> parameter. (Whether the
-  <code data-x="">codecs</code> parameter is allowed or not depends on the MIME type.) <ref spec=RFC6381></p>
+  <code data-x="">codecs</code> parameter is allowed or not depends on the MIME type.)
+  <ref>RFC6381</ref></p>
 
   <p>Types are usually somewhat incomplete descriptions; for example "<code
   data-x="">video/mpeg</code>" doesn't say anything except what the container type is, and even a
@@ -37985,7 +38022,7 @@ interface <dfn interface>MediaError</dfn> {
    track showing">showing</span>, providing the <span>text track</span>'s <span>text track
    language</span> as the fallback language if it is not the empty string. For example, for <span
    data-x="text track">text tracks</span> based on WebVTT, the <span>rules for updating the display
-   of WebVTT text tracks</span>. <ref spec=WEBVTT></p></li>
+   of WebVTT text tracks</span>. <ref>WEBVTT</ref></p></li>
   </ol>
 
   <p>For the purposes of the algorithm above, a <span>text track cue</span> is considered to be part
@@ -38424,9 +38461,10 @@ interface <dfn interface>VideoTrack</dfn> {
   resource</span> is in a format that supports <span>media fragment syntax</span>, the identifier
   returned for a particular track must be the same identifier that would enable the track if used as
   the name of a track in the track dimension of such a <span
-  data-x="concept-url-fragment">fragment</span>. <ref spec=INBAND></p>
+  data-x="concept-url-fragment">fragment</span>. <ref>INBAND</ref></p>
 
-  <p class="example">For example, in Ogg files, this would be the Name header field of the track. <ref spec=OGGSKELETONHEADERS></p>
+  <p class="example">For example, in Ogg files, this would be the Name header field of the track.
+  <ref>OGGSKELETONHEADERS</ref></p>
 
   <p>The <code>AudioTrack</code> <dfn attribute for="AudioTrack"><code
   data-x="dom-AudioTrack-kind">kind</code></dfn> and <code>VideoTrack</code> <dfn attribute
@@ -38446,7 +38484,7 @@ interface <dfn interface>VideoTrack</dfn> {
   resources, the <code data-x="">Role</code> element conveys the information. For WebM, only the
   <code data-x="">FlagDefault</code> element currently maps to a value. <cite>Sourcing In-band
   Media Resource Tracks from Media Containers into HTML</cite> has further details.
-  <ref spec=OGGSKELETONHEADERS> <ref spec=DASH> <ref spec=WEBMCG> <ref spec=INBAND></p>
+  <ref>OGGSKELETONHEADERS</ref> <ref>DASH</ref> <ref>WEBMCG</ref> <ref>INBAND</ref></p>
 
   </div>
 
@@ -38527,7 +38565,7 @@ interface <dfn interface>VideoTrack</dfn> {
   <p>The <code>AudioTrack</code> <dfn attribute for="AudioTrack"><code
   data-x="dom-AudioTrack-label">label</code></dfn> and <code>VideoTrack</code> <dfn attribute
   for="VideoTrack"><code data-x="dom-VideoTrack-label">label</code></dfn> attributes must return the
-  label of the track, if it has one, or the empty string otherwise. <ref spec=INBAND></p>
+  label of the track, if it has one, or the empty string otherwise. <ref>INBAND</ref></p>
 
   <p>The <code>AudioTrack</code> <dfn attribute for="AudioTrack"><code
   data-x="dom-AudioTrack-language">language</code></dfn> and <code>VideoTrack</code> <dfn attribute
@@ -38536,7 +38574,7 @@ interface <dfn interface>VideoTrack</dfn> {
   otherwise. If the user agent is not able to express that language as a BCP 47 language tag (for
   example because the language information in the <span>media resource</span>'s format is a
   free-form string without a defined interpretation), then the method must return the empty string,
-  as if the track had no language. <ref spec=INBAND></p>
+  as if the track had no language. <ref>INBAND</ref></p>
 
   <p>The <code>AudioTrack</code> <dfn attribute for="AudioTrack"><code
   data-x="dom-AudioTrack-enabled">enabled</code></dfn> attribute, on getting, must return true if
@@ -38620,7 +38658,7 @@ interface <dfn interface>VideoTrack</dfn> {
   particular tracks in the <span data-x="concept-url-fragment">fragment</span> of the
   <span>URL</span> of the <span>media resource</span>. The format of the <span
   data-x="concept-url-fragment">fragment</span> depends on the <span>MIME type</span> of the
-  <span>media resource</span>. <ref spec=RFC2046> <ref spec=URL></p>
+  <span>media resource</span>. <ref>RFC2046</ref> <ref>URL</ref></p>
 
   <div class="example">
 
@@ -38715,7 +38753,7 @@ interface <dfn interface>VideoTrack</dfn> {
 
    <dd>
     <p>This is a string (a BCP 47 language tag) representing the language of the text track's cues.
-    <ref spec=BCP47></p>
+    <ref>BCP47</ref></p>
 
     <p>The <span data-x="text track language">language of a text track</span> can change dynamically,
     in the case of a <span>text track</span> corresponding to a <code>track</code> element.</p>
@@ -38808,7 +38846,7 @@ interface <dfn interface>VideoTrack</dfn> {
    <dd>
     <p>A list of <span data-x="text track cue">text track cues</span>, along with <dfn>rules for
     updating the text track rendering</dfn>. For example, for WebVTT, the <span>rules for updating
-    the display of WebVTT text tracks</span>. <ref spec=WEBVTT> </p>
+    the display of WebVTT text tracks</span>. <ref>WEBVTT</ref> </p>
 
     <p>The <span data-x="text track list of cues">list of cues of a text track</span> can change
     dynamically, either because the <span>text track</span> has <span data-x="text track not
@@ -38924,8 +38962,9 @@ interface <dfn interface>VideoTrack</dfn> {
 
    <dt>Some additional format-specific data</dt>
    <dd>
-    <p>Additional fields, as needed for the format, including the actual data of the cue. For example, WebVTT has a <span>text track cue
-    writing direction</span> and so forth. <ref spec=WEBVTT></p>
+    <p>Additional fields, as needed for the format, including the actual data of the cue. For
+    example, WebVTT has a <span>text track cue writing direction</span> and so forth.
+    <ref>WEBVTT</ref></p>
    </dd>
   </dl>
 
@@ -38942,8 +38981,8 @@ interface <dfn interface>VideoTrack</dfn> {
   <p>Each <span>text track cue</span> has a corresponding <code>TextTrackCue</code> object (or more
   specifically, an object that inherits from <code>TextTrackCue</code> &mdash; for example, WebVTT
   cues use the <code>VTTCue</code> interface). A <span>text track cue</span>'s in-memory
-  representation can be dynamically changed through this <code>TextTrackCue</code> API. <ref
-  spec=WEBVTT></p>
+  representation can be dynamically changed through this <code>TextTrackCue</code> API.
+  <ref>WEBVTT</ref></p>
 
   <p>A <span>text track cue</span> is associated with <span>rules for updating the text track
   rendering</span>, as defined by the specification for the specific kind of <span>text track
@@ -38971,7 +39010,7 @@ interface <dfn interface>VideoTrack</dfn> {
     the flag for all the affected cues, apply the <span>rules for updating the text track
     rendering</span> of those <span data-x="text track">text tracks</span>. For example, for <span
     data-x="text track">text tracks</span> based on WebVTT, the <span>rules for updating the display
-    of WebVTT text tracks</span>. <ref spec=WEBVTT></p> </dd>
+    of WebVTT text tracks</span>. <ref>WEBVTT</ref></p> </dd>
 
    <dt>The <dfn data-x="text track cue display state">display state</dfn>
    <dd>
@@ -38994,7 +39033,7 @@ interface <dfn interface>VideoTrack</dfn> {
   data-x="text track cue">cues</span> with identical <span data-x="text track cue end time">end
   times</span> must be sorted in the order they were last added to their respective <span>text track
   list of cues</span>, oldest first (so e.g. for cues from a WebVTT file, that would initially be
-  the order in which the cues were listed in the file). <ref spec=WEBVTT></p>
+  the order in which the cues were listed in the file). <ref>WEBVTT</ref></p>
 
 
   <h6>Sourcing in-band text tracks</h6>
@@ -39008,7 +39047,7 @@ interface <dfn interface>VideoTrack</dfn> {
   <p>Rules for processing and rendering such data are defined by the relevant specifications, e.g.
   the specification of the video format if the <span>media resource</span> is a video. Details for
   some legacy formats can be found in <cite>Sourcing In-band Media Resource Tracks from Media
-  Containers into HTML</cite>. <ref spec=INBAND></p>
+  Containers into HTML</cite>. <ref>INBAND</ref></p>
 
   <p>When a <span>media resource</span> contains data that the user agent recognizes and supports as
   being equivalent to a <span>text track</span>, the user agent <a
@@ -39043,12 +39082,12 @@ interface <dfn interface>VideoTrack</dfn> {
      <dt>If the <span>media resource</span> is an Ogg file</dt>
 
      <dd>The <span>text track in-band metadata track dispatch type</span> must be set to the value
-     of the Name header field. <ref spec=OGGSKELETONHEADERS></dd>
+     of the Name header field. <ref>OGGSKELETONHEADERS</ref></dd>
 
      <dt>If the <span>media resource</span> is a WebM file</dt>
 
      <dd>The <span>text track in-band metadata track dispatch type</span> must be set to the value
-     of the <code data-x="">CodecID</code> element. <ref spec=WEBMCG></dd>
+     of the <code data-x="">CodecID</code> element. <ref>WEBMCG</ref></dd>
 
      <dt>If the <span>media resource</span> is an MPEG-2 file</dt>
 
@@ -39060,8 +39099,8 @@ interface <dfn interface>VideoTrack</dfn> {
      <var>length</var> bytes following the "ES_info_length" field. The <span>text track in-band
      metadata track dispatch type</span> must be set to the concatenation of the <var>stream
      type</var> byte and the zero or more <var>descriptor bytes</var> bytes, expressed in
-     hexadecimal using <span data-x="ASCII upper hex digit">ASCII upper hex digits</span>. <ref
-     spec=MPEG2>
+     hexadecimal using <span data-x="ASCII upper hex digit">ASCII upper hex digits</span>.
+     <ref>MPEG2</ref>
      </dd>
 
      <dt>If the <span>media resource</span> is an MPEG-4 file</dt>
@@ -39092,7 +39131,7 @@ interface <dfn interface>VideoTrack</dfn> {
      data-x="">metx</code> box of the <i>stsd box</i>, or the empty string if that field is absent in
      that box.
 
-     <ref spec=MPEG4>
+     <ref>MPEG4</ref>
      </dd>
     </dl>
    </li>
@@ -39191,7 +39230,7 @@ interface <dfn interface>VideoTrack</dfn> {
   <p>The <span>text track list of cues</span> is initially empty. It is dynamically modified when
   the referenced file is parsed. Associated with the list are the <span>rules for updating the text
   track rendering</span> appropriate for the format in question; for WebVTT, this is the <span>rules
-  for updating the display of WebVTT text tracks</span>. <ref spec=WEBVTT></p>
+  for updating the display of WebVTT text tracks</span>. <ref>WEBVTT</ref></p>
 
   <p>When a <code>track</code> element's parent element changes and the new parent is a <span>media
   element</span>, then the user agent must add the <code>track</code> element's corresponding
@@ -39376,7 +39415,7 @@ interface <dfn interface>VideoTrack</dfn> {
     track format, the load will fail, as described below. Otherwise, the resource's data must be
     passed to the appropriate parser (e.g., the <span>WebVTT parser</span><!-- if the file starts
     with the "<code data-x="">WEBVTT</code>" signature-->) as it is received, with the <span>text
-    track list of cues</span> being used for that parser's output. <ref spec=WEBVTT></p><!-- see
+    track list of cues</span> being used for that parser's output. <ref>WEBVTT</ref></p><!-- see
     also critical block below, and the word "computed" in the paragraph after that -->
 
     <p class="note">The appropriate parser will incrementally update the <span>text track list of
@@ -40967,7 +41006,7 @@ dictionary <dfn dictionary>TrackEventInit</dfn> : <span>EventInit</span> {
   <p>However, significantly more sensitive information could be obtained if the user agent further
   exposes metadata within the content, such as subtitles. That information is therefore only exposed
   if the video resource uses CORS. The <code data-x="attr-media-crossorigin">crossorigin</code>
-  attribute allows authors to enable CORS. <ref spec=FETCH></p>
+  attribute allows authors to enable CORS. <ref>FETCH</ref></p>
 
   <p class="example">Without this restriction, an attacker could trick a user running within a
   corporate network into visiting a site that attempts to load a video from a previously leaked
@@ -41548,8 +41587,8 @@ interface <dfn interface>HTMLAreaElement</dfn> : <span>HTMLElement</span> {
       for all integer values of <var>i</var> from 0 to <span data-x="">(<var>N</var>/2)-1</span>,
       where <var>N</var> is the number of items in <var>coords</var>.</p>
 
-      <p>The shape is a polygon whose vertices are given by <var>the coordinates</var>, and
-      whose interior is established using the even-odd rule. <ref spec=GRAPHICS></p>
+      <p>The shape is a polygon whose vertices are given by <var>the coordinates</var>, and whose
+      interior is established using the even-odd rule. <ref>GRAPHICS</ref></p>
 
       <!--
         browsers implement the even-odd rule / even winding rule:
@@ -41630,7 +41669,7 @@ interface <dfn interface>HTMLAreaElement</dfn> : <span>HTMLElement</span> {
   </div>
 
   <p>The semantics of MathML elements are defined by <cite>MathML</cite> and <span>other applicable
-  specifications</span>. <ref spec=MATHML></p>
+  specifications</span>. <ref>MATHML</ref></p>
 
   <div class="example">
 
@@ -41684,7 +41723,7 @@ interface <dfn interface>HTMLAreaElement</dfn> : <span>HTMLElement</span> {
   in <cite>SVG 2</cite>.)</p>
 
   <p>The semantics of SVG elements are defined by <cite>SVG 2</cite> and <span>other applicable
-  specifications</span>. <ref spec=SVG></p>
+  specifications</span>. <ref>SVG</ref></p>
 
   <hr>
 
@@ -41872,8 +41911,7 @@ interface <dfn interface>HTMLTableElement</dfn> : <span>HTMLElement</span> {
 
   <p class="note">There are a variety of alternatives to using HTML tables for layout, such as CSS
   grid layout, CSS flexible box layout ("flexbox"), CSS multi-column layout, CSS positioning, and
-  the CSS table model.
-  <ref spec=CSS></p>
+  the CSS table model. <ref>CSS</ref></p>
 
   <div w-nodev>
 
@@ -45155,7 +45193,7 @@ interface <dfn interface>HTMLFormElement</dfn> : <span>HTMLElement</span> {
   <p>The <dfn element-attr for="form"><code
   data-x="attr-form-accept-charset">accept-charset</code></dfn> attribute gives the character
   encodings that are to be used for the submission. If specified, the value must be an <span>ASCII
-  case-insensitive</span> match for "<code data-x="">UTF-8</code>". <ref spec=ENCODING></p>
+  case-insensitive</span> match for "<code data-x="">UTF-8</code>". <ref>ENCODING</ref></p>
 
   <p>The <dfn element-attr for="form"><code data-x="attr-form-name">name</code></dfn> attribute
   represents the <code>form</code>'s name within the <code data-x="dom-document-forms">forms</code>
@@ -47529,7 +47567,7 @@ interface <dfn interface>HTMLInputElement</dfn> : <span>HTMLElement</span> {
   if no image is <i data-x="input-img-available">available</i>. When the <code>input</code>
   element's <code data-x="attr-input-type">type</code> attribute is not in the <span
   data-x="attr-input-type-image">Image Button</span> state, then no image is <i
-  data-x="input-img-available">available</i>. <ref spec=CSS></p>
+  data-x="input-img-available">available</i>. <ref>CSS</ref></p>
 
   <p>On setting, they must act as if they <span data-x="reflect">reflected</span> the respective
   content attributes of the same name.</p>
@@ -48152,8 +48190,8 @@ interface <dfn interface>HTMLInputElement</dfn> : <span>HTMLElement</span> {
 
   <p>A <dfn id="valid-e-mail-address">valid email address</dfn> is a string that matches the <code
   data-x="">email</code> production of the following ABNF, the character set for which is Unicode.
-  This ABNF implements the extensions described in RFC 1123. <ref spec=ABNF> <ref spec=RFC5322> <ref
-  spec=RFC1034> <ref spec=RFC1123></p>
+  This ABNF implements the extensions described in RFC 1123. <ref>ABNF</ref> <ref>RFC5322</ref>
+  <ref>RFC1034</ref> <ref>RFC1123</ref></p>
 
   <pre><code data-x="" class="abnf">email         = 1*( atext / "." ) "@" label *( "." label )
 label         = let-dig [ [ ldh-str ] let-dig ]  ; limited to a length of 63 characters by <a href="https://www.rfc-editor.org/rfc/rfc1034#section-3.5">RFC 1034 section 3.5</a>
@@ -51491,8 +51529,8 @@ You cannot submit this form when the field is incorrect.</samp></pre>
   interfere with the matching process. Case variations should be ignored, which may require
   language-specific case mapping. For examples of these, see <cite>Character Model for the World
   Wide Web: String Matching</cite>. User agents may also provide other matching features: for
-  illustration, a few examples include matching different forms of kana to each other (or to
-  kanji), ignoring accents, or applying spelling correction. <ref spec=CHARMODNORM></p>
+  illustration, a few examples include matching different forms of kana to each other (or to kanji),
+  ignoring accents, or applying spelling correction. <ref>CHARMODNORM</ref></p>
 
   <div class="example">
    <p>This text field allows you to choose a type of JavaScript function.</p>
@@ -51905,7 +51943,7 @@ You cannot submit this form when the field is incorrect.</samp></pre>
   data-x="concept-input-type-file-selected">selected files</span>. The same object must be returned
   until the list of <span data-x="concept-input-type-file-selected">selected files</span> changes.
   If the IDL attribute <span data-x="do not apply">does not apply</span>, then it must instead
-  return null. <ref spec=FILEAPI></p>
+  return null. <ref>FILEAPI</ref></p>
 
   <p>On setting, it must run these steps:
 
@@ -56287,7 +56325,7 @@ MIT Room 32-G524
      for="button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete"><code
      data-x="attr-fe-autocomplete-country">country</code></dfn>"
      <td>Country code
-     <td>Valid <a href="https://www.iso.org/iso-3166-country-codes.html">ISO 3166-1-alpha-2 country code</a> <ref spec=ISO3166>
+     <td>Valid <a href="https://www.iso.org/iso-3166-country-codes.html">ISO 3166-1-alpha-2 country code</a> <ref>ISO3166</ref>
      <td>US
      <td><span data-x="Control Group Text">Text</span>
     <tr>
@@ -56395,7 +56433,7 @@ MIT Room 32-G524
      for="button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete"><code
      data-x="attr-fe-autocomplete-transaction-currency">transaction-currency</code></dfn>"
      <td>The currency that the user would prefer the transaction to use
-     <td>ISO 4217 currency code <ref spec=ISO4217>
+     <td>ISO 4217 currency code <ref>ISO4217</ref>
      <td>GBP
      <td><span data-x="Control Group Text">Text</span>
     <tr>
@@ -56412,7 +56450,7 @@ MIT Room 32-G524
      for="button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete"><code
      data-x="attr-fe-autocomplete-language">language</code></dfn>"
      <td>Preferred language
-     <td>Valid BCP 47 language tag <ref spec=BCP47>
+     <td>Valid BCP 47 language tag <ref>BCP47</ref>
      <td>en
      <td><span data-x="Control Group Text">Text</span>
     <tr>
@@ -59125,7 +59163,7 @@ fur
         encoding algorithm</span> with <var>pairs</var>.</p>
 
         <p>Set <var>body</var> to the result of running <span>UTF-8 percent-encode</span> on
-        <var>body</var> using the <span>default encode set</span>. <ref spec=URL></p>
+        <var>body</var> using the <span>default encode set</span>. <ref>URL</ref></p>
        </dd>
 
        <dt>Otherwise</dt>
@@ -59486,8 +59524,8 @@ fur
   <h5>URL-encoded form data</h5>
 
   <p id="application-x-www-form-urlencoded-encoding-algorithm"><span
-  id="application/x-www-form-urlencoded-encoding-algorithm"></span>See <cite>URL</cite> for
-  details on <code>application/x-www-form-urlencoded</code>. <ref spec=URL></p>
+  id="application/x-www-form-urlencoded-encoding-algorithm"></span>See <cite>URL</cite> for details
+  on <code>application/x-www-form-urlencoded</code>. <ref>URL</ref></p>
 
 
   <h5>Multipart form data</h5>
@@ -59524,7 +59562,7 @@ fur
     <p>Return the byte sequence resulting from encoding the <var>entry list</var> using the rules
     described by RFC 7578, <cite>Returning Values from Forms: <code
     data-x="">multipart/form-data</code></cite>, given the following conditions:
-    <ref spec=RFC7578></p>
+    <ref>RFC7578</ref></p>
 
     <ul>
      <li><p>Each <span data-x="form entry">entry</span> in <var>entry list</var> is a <i>field</i>,
@@ -59556,8 +59594,8 @@ fur
 
   </div>
 
-  <p>For details on how to interpret <code>multipart/form-data</code> payloads, see RFC 7578. <ref
-  spec=RFC7578></p>
+  <p>For details on how to interpret <code>multipart/form-data</code> payloads, see RFC 7578.
+  <ref>RFC7578</ref></p>
 
 
   <h5>Plain text form data</h5>
@@ -60804,13 +60842,13 @@ interface <dfn interface>HTMLScriptElement</dfn> : <span>HTMLElement</span> {
   conform with the requirements of the JavaScript specification's <i
   data-x="js-prod-Script">Script</i> or <i data-x="js-prod-Module">Module</i> productions, for <span
   data-x="classic script">classic scripts</span> and <span data-x="JavaScript module
-  script">JavaScript module scripts</span> respectively. <ref spec="JAVASCRIPT"></p>
+  script">JavaScript module scripts</span> respectively. <ref>JAVASCRIPT</ref></p>
 
   <p>The contents of the external script resource for <span data-x="CSS module script">CSS module
-  scripts</span> must conform to the requirements of the CSS specification. <ref spec=CSS></p>
+  scripts</span> must conform to the requirements of the CSS specification. <ref>CSS</ref></p>
 
   <p>The contents of the external script resource for <span data-x="JSON module script">JSON module
-  scripts</span> must conform to the requirements of the JSON specification <ref spec=JSON>.</p>
+  scripts</span> must conform to the requirements of the JSON specification <ref>JSON</ref>.</p>
 
   <p>The contents of inline <code>script</code> elements for <span data-x="import map">import
   maps</span> must conform with the <span>import map authoring requirements</span>.</p>
@@ -60917,13 +60955,13 @@ interface <dfn interface>HTMLScriptElement</dfn> : <span>HTMLElement</span> {
   attribute represents the <span data-x="concept-request-integrity-metadata">integrity
   metadata</span> for requests which this element is responsible for. The value is text. The <code
   data-x="attr-script-integrity">integrity</code> attribute must not be specified when the <code
-  data-x="attr-script-src">src</code> attribute is not specified. <ref spec=SRI></p>
+  data-x="attr-script-src">src</code> attribute is not specified. <ref>SRI</ref></p>
 
   <p>The <dfn element-attr for="script"><code
   data-x="attr-script-referrerpolicy">referrerpolicy</code></dfn> attribute is a <span>referrer
   policy attribute</span>. Its purpose is to set the <span>referrer policy</span> used when <span
-  data-x="concept-fetch">fetching</span> the script, as well as any scripts imported from it. <ref
-  spec=REFERRERPOLICY></p>
+  data-x="concept-fetch">fetching</span> the script, as well as any scripts imported from it.
+  <ref>REFERRERPOLICY</ref></p>
 
   <div class="example">
    <p>An example of a <code>script</code> element's referrer policy being used when fetching
@@ -61173,8 +61211,8 @@ o............A....e
 
    <p>The following sample shows how a <code>script</code> element can be used to write an inline
    <span>JavaScript module script</span> that performs a number of substitutions on the document's
-   text, in order to make for a more interesting reading experience (e.g. on a news site): <ref
-   spec="XKCD1288"></p>
+   text, in order to make for a more interesting reading experience (e.g. on a news site):
+   <ref>XKCD1288</ref></p>
 
    <pre><code class="html">&lt;script type="module">
  import { walkAllTextNodeDescendants } from "./dom-utils.mjs";
@@ -61456,8 +61494,8 @@ o............A....e
     <code>XSLTProcessor</code>'s <code
     data-x="dom-XSLTProcessor-transformToDocument">transformToDocument</code> feature, and scripts
     that are first inserted by a script into a <code>Document</code> that was created using the
-    <code data-x="dom-DOMImplementation-createDocument">createDocument()</code> API. <ref spec=XHR>
-    <ref spec=DOMPARSING> <ref spec=XSLTP> <ref spec=DOM></p>
+    <code data-x="dom-DOMImplementation-createDocument">createDocument()</code> API. <ref>XHR</ref>
+    <ref>DOMPARSING</ref> <ref>XSLTP</ref> <ref>DOM</ref></p>
    </li>
 
    <li>
@@ -61473,7 +61511,7 @@ o............A....e
    data-x="attr-script-src">src</code> content attribute, and the <span>Should element's inline
    behavior be blocked by Content Security Policy?</span> algorithm returns "<code
    data-x="">Blocked</code>" when given <var>el</var>, "<code data-x="">script</code>", and
-   <var>source text</var>, then return. <ref spec=CSP></p></li>
+   <var>source text</var>, then return. <ref>CSP</ref></p></li>
 
    <li id="script-processing-for">
     <p>If <var>el</var> has an <code data-x="attr-script-event">event</code> attribute and a <code
@@ -61973,7 +62011,7 @@ o............A....e
   <cite>Updates to ECMAScript Media Types</cite>. Servers should not use other
   <span data-x="JavaScript MIME type">JavaScript MIME types</span> for JavaScript resources, and
   must not use non-<span data-x="JavaScript MIME type">JavaScript MIME types</span>.
-  <ref spec=RFC9239></p>
+  <ref>RFC9239</ref></p>
 
   <div w-nodev>
 
@@ -61989,7 +62027,7 @@ o............A....e
 
   <p>Furthermore, again for external JavaScript resources, special considerations apply around
   `<code>Content-Type</code>` header processing as detailed in the <span>prepare the script
-  element</span> algorithm and <cite>Fetch</cite>. <ref spec=FETCH>
+  element</span> algorithm and <cite>Fetch</cite>. <ref>FETCH</ref>
 
   </div>
 
@@ -62009,7 +62047,7 @@ o............A....e
 
   <p>The <code>script</code> element's <span>descendant text content</span> must match the <code
   data-x="">script</code> production in the following ABNF, the character set for which is Unicode.
-  <ref spec=ABNF></p>
+  <ref>ABNF</ref></p>
 
   <pre><code data-x="" class="abnf">script        = outer *( comment-open inner comment-close outer )
 
@@ -62122,7 +62160,7 @@ if (script > player) { ... }</code></pre>
   specified, then the contents of the <code>script</code> element, if any, must be such that the
   value of the <code data-x="dom-script-text">text</code> IDL attribute, which is derived from the
   element's contents, matches the <code data-x="">documentation</code> production in the following
-  ABNF, the character set for which is Unicode. <ref spec=ABNF></p>
+  ABNF, the character set for which is Unicode. <ref>ABNF</ref></p>
 
   <pre><code data-x="" class="abnf">documentation = *( *( space / tab / comment ) [ line-comment ] newline )
 comment       = slash star *( not-star / star not-slash ) 1*star slash
@@ -62292,8 +62330,9 @@ not-slash     = %x0000-002E / %x0030-10FFFF
        element.</li>
 
        <li>Set the <code data-x="dom-outerHTML">outerHTML</code> attribute of the
-       <code>noscript</code> element to the value of <var>s</var>. (This, as a
-       side-effect, causes the <code>noscript</code> element to be removed from the document.) <ref spec=DOMPARSING></li>
+       <code>noscript</code> element to the value of <var>s</var>. (This, as a side-effect, causes
+       the <code>noscript</code> element to be removed from the document.)
+       <ref>DOMPARSING</ref></li>
       </ol>
      </li>
     </ol>
@@ -62894,7 +62933,7 @@ callback <dfn callback>BlobCallback</dfn> = undefined (<span>Blob</span>? blob);
   events (even though the element itself is not visible). This allows authors to make an interactive
   canvas keyboard-accessible: authors should have a one-to-one mapping of interactive regions to <i
   data-x="focusable area">focusable areas</i> in the <span>fallback content</span>. (Focus has no
-  effect on mouse interaction events.) <ref spec=UIEVENTS></p> <!-- user
+  effect on mouse interaction events.) <ref>UIEVENTS</ref></p> <!-- user
   interaction spec integration point -->
 
   <p>An element whose nearest <code>canvas</code> element ancestor is <span>being rendered</span>
@@ -63005,13 +63044,13 @@ callback <dfn callback>BlobCallback</dfn> = undefined (<span>Blob</span>? blob);
       <p><span data-x="concept-canvas-webgl">webgl</span> or <span
       data-x="concept-canvas-webgl2">webgl2</span></p>
      <td>
-      <p>Follow the behavior defined in the WebGL specifications. <ref spec=WEBGL></p>
+      <p>Follow the behavior defined in the WebGL specifications. <ref>WEBGL</ref></p>
 
     <tr>
      <th>
       <p><span data-x="concept-canvas-webgpu">webgpu</span></p>
      <td>
-      <p>Follow the behavior defined in <cite>WebGPU</cite>. <ref spec=WEBGPU></p>
+      <p>Follow the behavior defined in <cite>WebGPU</cite>. <ref>WEBGPU</ref></p>
 
     <tr>
      <th>
@@ -63058,7 +63097,7 @@ callback <dfn callback>BlobCallback</dfn> = undefined (<span>Blob</span>? blob);
     data-x="canvas-context-bitmaprenderer">bitmaprenderer</code>" contexts below. The WebGL
     specifications define the "<code data-x="canvas-context-webgl">webgl</code>" and "<code
     data-x="canvas-context-webgl2">webgl2</code>" contexts. <cite>WebGPU</cite> defines the "<code
-    data-x="canvas-context-webgpu">webgpu</code>" context. <ref spec=WEBGL> <ref spec=WEBGPU></p>
+    data-x="canvas-context-webgpu">webgpu</code>" context. <ref>WEBGL</ref> <ref>WEBGPU</ref></p>
 
     <p>Returns null if <var>contextId</var> is not supported, or if the canvas has already been
     initialized with another context type (e.g., trying to get a "<code
@@ -63152,7 +63191,7 @@ callback <dfn callback>BlobCallback</dfn> = undefined (<span>Blob</span>? blob);
        <td>
         <ol>
          <li><p>Let <var>context</var> be the result of following the instructions given in
-         the WebGL specifications' <i>Context Creation</i> sections. <ref spec=WEBGL></p></li>
+         the WebGL specifications' <i>Context Creation</i> sections. <ref>WEBGL</ref></p></li>
 
          <li><p>If <var>context</var> is null, then return null; otherwise set <span>this</span>'s
          <span data-x="concept-canvas-context-mode">context mode</span> to <span
@@ -63180,7 +63219,7 @@ callback <dfn callback>BlobCallback</dfn> = undefined (<span>Blob</span>? blob);
          <li><p>Let <var>context</var> be the result of following the instructions given
          in <cite>WebGPU</cite>'s <a
          href="https://gpuweb.github.io/gpuweb/#canvas-rendering">Canvas Rendering</a>
-         section. <ref spec=WEBGPU></p></li>
+         section. <ref>WEBGPU</ref></p></li>
 
          <li><p>If <var>context</var> is null, then return null; otherwise set
          <span>this</span>'s <span data-x="concept-canvas-context-mode">context mode</span> to
@@ -63297,7 +63336,7 @@ callback <dfn callback>BlobCallback</dfn> = undefined (<span>Blob</span>? blob);
    <li><p>If <var>file</var> is null then return "<code data-x="">data:,</code>".</p></li>
 
    <li><p>Return a <span data-x="data protocol"><code>data:</code> URL</span> representing
-   <var>file</var>. <ref spec=RFC2397></p>
+   <var>file</var>. <ref>RFC2397</ref></p>
 
    <!-- should we explicitly require the URL to be base64-encoded and not have any parameters, to
    ensure the same exact URL is generated in each browser? -->
@@ -63334,8 +63373,8 @@ callback <dfn callback>BlobCallback</dfn> = undefined (<span>Blob</span>? blob);
       <ol>
        <li><p>If <var>result</var> is non-null, then set <var>result</var> to a new
        <code>Blob</code> object, created in the <span data-x="concept-relevant-realm">relevant
-       realm</span> of this <code>canvas</code> element, representing <var>result</var>. <ref
-       spec=FILEAPI></p></li>
+       realm</span> of this <code>canvas</code> element, representing <var>result</var>.
+       <ref>FILEAPI</ref></p></li>
 
        <li><p><span data-x="es-invoking-callback-functions">Invoke</span> <var>callback</var> with
        « <var>result</var> ».</p></li>
@@ -63757,8 +63796,8 @@ interface <dfn interface>Path2D</dfn> {
   front buffer rendering, also known as <i>single buffer</i> rendering, where rendering happens in
   parallel and racily with the scanning out process. This technique reduces the latency at the price
   of potentially introducing tearing artifacts and can be used to implement in total or part of the
-  <span data-x="concept-canvas-desynchronized">desynchronized</span> boolean. <ref
-  spec=MULTIPLEBUFFERING></p>
+  <span data-x="concept-canvas-desynchronized">desynchronized</span> boolean.
+  <ref>MULTIPLEBUFFERING</ref></p>
 
   <p class="note">The <span data-x="concept-canvas-desynchronized">desynchronized</span> boolean
   can be useful when implementing certain kinds of applications, such as drawing applications,
@@ -63935,7 +63974,7 @@ context.fillRect(100,0,50,50); // only this square remains</code></pre>
 
   <p class="note">Algorithms for converting between color spaces are found in the <a
   href="https://drafts.csswg.org/css-color/#predefined">Predefined color spaces</a> section of
-  <cite>CSS Color</cite>. <ref spec=CSSCOLOR></p>
+  <cite>CSS Color</cite>. <ref>CSSCOLOR</ref></p>
 
   <hr>
 
@@ -64640,7 +64679,7 @@ transform. ack Shaun Morris. -->
 
   <p>Font resolution for the <span>font style source object</span> requires a <span>font
   source</span>. This is determined for a given <var>object</var> implementing
-  <code>CanvasTextDrawingStyles</code> by the following steps: <ref spec=CSSFONTLOAD></p>
+  <code>CanvasTextDrawingStyles</code> by the following steps: <ref>CSSFONTLOAD</ref></p>
 
   <ol>
    <li><p>If <var>object</var>'s <span>font style source object</span> is a <code>canvas</code>
@@ -64714,7 +64753,7 @@ worker.postMessage(offscreenCanvas, [offscreenCanvas]);</code></pre>
   with the <span>'font-size'</span> component converted to <span data-x="'px'">CSS pixels</span>,
   and with system fonts being computed to explicit values. If the new value is syntactically
   incorrect (including using property-independent style sheet syntax like 'inherit' or 'initial'),
-  then it must be ignored, without assigning a new font value. <ref spec=CSS></p>
+  then it must be ignored, without assigning a new font value. <ref>CSS</ref></p>
 
   <p>Font family names must be interpreted in the context of the <span>font style source
   object</span> when the font is to be used; any fonts embedded using <code
@@ -64723,12 +64762,12 @@ worker.postMessage(offscreenCanvas, [offscreenCanvas]);</code></pre>
   object</span> has a <span>font source</span>, which determines what fonts are available.) If a font
   is used before it is fully loaded, or if the <span>font style source object</span> does not have
   that font in scope at the time the font is to be used, then it must be treated as if it was an
-  unknown font, falling back to another as described by the relevant CSS specifications. <ref
-  spec=CSSFONTS> <ref spec=CSSFONTLOAD></p>
+  unknown font, falling back to another as described by the relevant CSS specifications.
+  <ref>CSSFONTS</ref> <ref>CSSFONTLOAD</ref></p>
 
   <p>On getting, the <code data-x="dom-context-2d-font">font</code> attribute must return the <span
   data-x="serializing a CSS value">serialized form</span> of the current font of the context (with
-  no <span>'line-height'</span> component). <ref spec=CSSOM></p>
+  no <span>'line-height'</span> component). <ref>CSSOM</ref></p>
 
   <div class="example">
 
@@ -65053,7 +65092,7 @@ worker.postMessage(offscreenCanvas, [offscreenCanvas]);</code></pre>
       Find the first character in <var>text</var> of bidirectional character type L, AL, or
       R, if any. If such a character is found and it is of bidirectional character type AL or R,
       then let <var>direction</var> be '<span data-x="concept-rtl">rtl</span>'; otherwise,
-      let <var>direction</var> be '<span data-x="concept-rtl">rtl</span>'. <ref spec=BIDI>
+      let <var>direction</var> be '<span data-x="concept-rtl">rtl</span>'. <ref>BIDI</ref>
      </dd>
 -->
 
@@ -65746,8 +65785,8 @@ try {
    <var>cpy</var>)</span></p></li>
 
    <li><p>Connect the last point in the subpath to the given point (<var>x</var>, <var>y</var>)
-   using a quadratic B&eacute;zier curve with control point (<var>cpx</var>, <var>cpy</var>). <ref
-   spec=BEZIER></p></li>
+   using a quadratic B&eacute;zier curve with control point (<var>cpx</var>, <var>cpy</var>).
+   <ref>BEZIER</ref></p></li>
 
    <li><p>Add the given point (<var>x</var>, <var>y</var>) to the subpath.</p></li>
   </ol>
@@ -65765,7 +65804,7 @@ try {
 
    <li><p>Connect the last point in the subpath to the given point (<var>x</var>, <var>y</var>)
    using a cubic B&eacute;zier curve with control points (<var>cp1x</var>, <var>cp1y</var>) and
-   (<var>cp2x</var>, <var>cp2y</var>). <ref spec=BEZIER></p></li>
+   (<var>cp2x</var>, <var>cp2y</var>). <ref>BEZIER</ref></p></li>
 
    <li><p>Add the point (<var>x</var>, <var>y</var>) to the subpath.</p></li>
   </ol>
@@ -66087,7 +66126,7 @@ try {
     <p>When <var>path</var> is a <code>Path2D</code> object, returns a copy.</p>
 
     <p>When <var>path</var> is a string, creates the path described by the argument, interpreted as
-    SVG path data. <ref spec=SVG>
+    SVG path data. <ref>SVG</ref>
    </p></dd>
 
    <dt><code data-x=""><var>path</var>.<span subdfn data-x="dom-Path2D-addPath">addPath</span>(<var>path</var> [, <var>transform</var> ])</code></dt>
@@ -66111,7 +66150,7 @@ try {
 
    <li>
     <p>Let <var>svgPath</var> be the result of parsing and interpreting <var>path</var> according to
-    <cite>SVG 2</cite>'s rules for path data. <ref spec=SVG></p>
+    <cite>SVG 2</cite>'s rules for path data. <ref>SVG</ref></p>
 
     <p class="note">The resulting path could be empty. SVG defines error handling rules for parsing
     and applying path data.</p>
@@ -67202,7 +67241,7 @@ try {
   run the <span>text preparation algorithm</span>, passing it <var>text</var> and the object
   implementing the <code>CanvasText</code> interface, and then using the returned <span>inline
   box</span> must return a new <code>TextMetrics</code> object with members behaving as described in
-  the following list: <ref spec=CSS></p>
+  the following list: <ref>CSS</ref></p>
 
   </div>
 
@@ -67802,7 +67841,7 @@ try {
     Size Resolution</a>" algorithm, with the <i>specified size</i> having neither a definite width
     nor height, nor any additional constraints, the object's natural properties being those of the
     <var>image</var> argument, and the <span>default object size</span> being the size of the
-    <span>output bitmap</span>. <ref spec=CSSIMAGES></p>
+    <span>output bitmap</span>. <ref>CSSIMAGES</ref></p>
 
     <p>The source rectangle is the rectangle whose corners are the four points (<var>sx</var>, <var>sy</var>), (<var>sx</var>+<var>sw</var>, <var>sy</var>), (<var>sx</var>+<var>sw</var>, <var>sy</var>+<var>sh</var>),
     (<var>sx</var>, <var>sy</var>+<var>sh</var>).</p>
@@ -68419,7 +68458,7 @@ console.log(pixels.data[2]);
 
    <dd>
     <p>Returns the <span>current compositing and blending operator</span>, from the values defined
-    in <cite>Compositing and Blending</cite>. <ref spec=COMPOSITE></p>
+    in <cite>Compositing and Blending</cite>. <ref>COMPOSITE</ref></p>
 
     <p>Can be set, to change the <span>current compositing and blending operator</span>. Unknown
     values are ignored.</p>
@@ -68471,8 +68510,8 @@ console.log(pixels.data[2]);
 
   <ol>
    <li><p>If the given value is not <span>identical to</span> any of the values that the
-   <span>&lt;blend-mode&gt;</span> or the <span>&lt;composite-mode&gt;</span> properties are
-   defined to take, then return. <ref spec=COMPOSITE></p></li>
+   <span>&lt;blend-mode&gt;</span> or the <span>&lt;composite-mode&gt;</span> properties are defined
+   to take, then return. <ref>COMPOSITE</ref></p></li>
 
    <li><p>Otherwise, set <span>this</span>'s <span>current compositing and blending operator</span>
    to the given value.</p></li>
@@ -68574,8 +68613,8 @@ console.log(pixels.data[2]);
 
   <p>On setting, the new value must be <span data-x="parse a CSS &lt;color> value">parsed</span>
   with this <code>canvas</code> element and the color assigned. If parsing the value results in
-  failure then it must be ignored, and the attribute must retain its previous value. <ref
-  spec=CSSCOLOR></p>
+  failure then it must be ignored, and the attribute must retain its previous value.
+  <ref>CSSCOLOR</ref></p>
 
   <p>The <dfn attribute for="CanvasShadowStyles"><code
   data-x="dom-context-2d-shadowOffsetX">shadowOffsetX</code></dfn> and <dfn attribute
@@ -69053,8 +69092,8 @@ dictionary <dfn dictionary>ImageBitmapRenderingContextSettings</dfn> {
   data-x="gcop-source-over">source-over</span> compositing operator. If the <span
   data-x="concept-ImageBitmapRenderingContext-alpha">alpha</span> flag is set to true, then the
   <span data-x="concept-ImageBitmapRenderingContext-output-bitmap">output bitmap</span> is used as
-  the contents of the <code>canvas</code> element to which the context is bound. <ref
-  spec=COMPOSITE></p>
+  the contents of the <code>canvas</code> element to which the context is bound.
+  <ref>COMPOSITE</ref></p>
 
   <p class="note">The step of compositing over an <span>opaque black</span> bitmap ought to be
   elided whenever equivalent results can be obtained more efficiently by other means.</p>
@@ -69218,8 +69257,8 @@ interface <dfn interface>OffscreenCanvas</dfn> : <span>EventTarget</span> {
   <code>OffscreenCanvasRenderingContext2D</code> can fire <code
   data-x="event-contextlost">contextlost</code> and <code
   data-x="event-contextrestored">contextrestored</code>, and WebGL can fire <code
-  data-x="">webglcontextlost</code> and <code data-x="">webglcontextrestored</code>. <ref
-  spec=WEBGL></p>
+  data-x="">webglcontextlost</code> and <code data-x="">webglcontextrestored</code>.
+  <ref>WEBGL</ref></p>
 
   <p><code>OffscreenCanvas</code> objects are used to create rendering contexts, much like an
   <code>HTMLCanvasElement</code>, but with no connection to the DOM. This makes it possible to
@@ -69264,8 +69303,8 @@ interface <dfn interface>OffscreenCanvas</dfn> : <span>EventTarget</span> {
     context that is created from a <code>canvas</code> element. The WebGL specifications define the
     "<code data-x="offscreen-context-type-webgl">webgl</code>" and "<code
     data-x="offscreen-context-type-webgl2">webgl2</code>" contexts. <cite>WebGPU</cite> defines the
-    "<code data-x="offscreen-context-type-webgpu">webgpu</code>" context. <ref spec=WEBGL> <ref
-    spec=WEBGPU></p>
+    "<code data-x="offscreen-context-type-webgpu">webgpu</code>" context. <ref>WEBGL</ref>
+    <ref>WEBGPU</ref></p>
 
     <p>Returns null if the canvas has already been initialized with another context type (e.g.,
     trying to get a "<code data-x="offscreen-context-type-2d">2d</code>" context after getting a
@@ -69431,7 +69470,7 @@ interface <dfn interface>OffscreenCanvas</dfn> : <span>EventTarget</span> {
        <td>
         <ol>
          <li><p>Let <var>context</var> be the result of following the instructions given in the
-         WebGL specifications' <i>Context Creation</i> sections. <ref spec=WEBGL></p></li>
+         WebGL specifications' <i>Context Creation</i> sections. <ref>WEBGL</ref></p></li>
 
          <li><p>If <var>context</var> is null, then return null; otherwise set
          <span>this</span>'s <span data-x="offscreencanvas-context-mode">context
@@ -69458,7 +69497,7 @@ interface <dfn interface>OffscreenCanvas</dfn> : <span>EventTarget</span> {
          <li><p>Let <var>context</var> be the result of following the instructions given in
          <cite>WebGPU</cite>'s <a
          href="https://gpuweb.github.io/gpuweb/#canvas-rendering">Canvas Rendering</a> section.
-         <ref spec=WEBGPU></p></li>
+         <ref>WEBGPU</ref></p></li>
 
          <li><p>If <var>context</var> is null, then return null; otherwise set <span>this</span>'s
          <span data-x="offscreencanvas-context-mode">context mode</span> to <span
@@ -69517,10 +69556,10 @@ interface <dfn interface>OffscreenCanvas</dfn> : <span>EventTarget</span> {
 
   <p>The resizing behavior for "<code data-x="offscreen-context-type-webgl">webgl</code>" and "<code
   data-x="offscreen-context-type-webgl2">webgl2</code>" contexts is defined in the WebGL
-  specifications. <ref spec=WEBGL></p>
+  specifications. <ref>WEBGL</ref></p>
 
-  <p>The resizing behavior for "<code data-x="offscreen-context-type-webgpu">webgpu</code>"
-  context is defined in <cite>WebGPU</cite>. <ref spec=WEBGPU></p>
+  <p>The resizing behavior for "<code data-x="offscreen-context-type-webgpu">webgpu</code>" context
+  is defined in <cite>WebGPU</cite>. <ref>WEBGPU</ref></p>
 
   </div>
 
@@ -69604,8 +69643,8 @@ interface <dfn interface>OffscreenCanvas</dfn> : <span>EventTarget</span> {
 
        <li><p>Otherwise, resolve <var>result</var> with a new <code>Blob</code> object, created in
        the <span data-x="concept-relevant-realm">relevant realm</span> of this
-       <code>OffscreenCanvas</code> object, representing <var>file</var>. <ref
-       spec=FILEAPI></p></li>
+       <code>OffscreenCanvas</code> object, representing <var>file</var>.
+       <ref>FILEAPI</ref></p></li>
       </ol>
      </li>
     </ol>
@@ -69640,8 +69679,8 @@ interface <dfn interface>OffscreenCanvas</dfn> : <span>EventTarget</span> {
 
     <p class="note">This means that if the rendering context of this <code>OffscreenCanvas</code> is
     a <code>WebGLRenderingContext</code>, the value of <code
-    data-x="WebGLContextAttributes">preserveDrawingBuffer</code> will have no effect. <ref
-    spec=WEBGL></p>
+    data-x="WebGLContextAttributes">preserveDrawingBuffer</code> will have no effect.
+    <ref>WEBGL</ref></p>
    </li>
 
    <li><p>Return <var>image</var>.</p></li>
@@ -69863,7 +69902,7 @@ interface <dfn interface>OffscreenCanvasRenderingContext2D</dfn> {
   undefined. The color space for CSS colors is defined in <cite>CSS Color</cite>. The color space
   for images that specify no color profile information is assumed to be <span>'srgb'</span>, as
   specified in the <a href="https://drafts.csswg.org/css-color/#untagged">Color Spaces of Untagged
-  Colors</a> section of <cite>CSS Color</cite>. <ref spec=CSSCOLOR></p>
+  Colors</a> section of <cite>CSS Color</cite>. <ref>CSSCOLOR</ref></p>
 
   </div>
 
@@ -69877,7 +69916,7 @@ interface <dfn interface>OffscreenCanvasRenderingContext2D</dfn> {
   serialization of the bitmap as a file</dfn>, given a <var>type</var> and an optional
   <var>quality</var>, it must create an image file in the format given by <var>type</var>. If an
   error occurs during the creation of the image file (e.g. an internal encoder error), then the
-  result of the serialization is null. <ref spec=PNG></p>
+  result of the serialization is null. <ref>PNG</ref></p>
 
   <p>The image file's pixel data must be the bitmap's pixel data scaled to one image pixel per
   coordinate space unit, and if the file format used supports encoding resolution metadata, the
@@ -69895,7 +69934,7 @@ interface <dfn interface>OffscreenCanvasRenderingContext2D</dfn> {
 
   <p>User agents must support PNG ("<code>image/png</code>"). User agents may support other types.
   If the user agent does not support the requested type, then it must create the file using the PNG
-  format. <ref spec=PNG></p>
+  format. <ref>PNG</ref></p>
 
   <p>User agents must <span data-x="converted to ASCII lowercase">convert the provided type to ASCII
   lowercase</span> before establishing if they support that type.</p>
@@ -70757,7 +70796,7 @@ document.body.append(parent);
     </dl>
 
     <p>This uses the <a href="https://www.w3.org/TR/xml/#sec-notation">EBNF notation</a> from the
-    <cite>XML</cite> specification. <ref spec=XML></p>
+    <cite>XML</cite> specification. <ref>XML</ref></p>
    </li>
 
    <li>
@@ -70776,7 +70815,7 @@ document.body.append(parent);
 
     <p class="note">The list of names above is the summary of all hyphen-containing element names
     from the <span data-x="other applicable specifications">applicable specifications</span>, namely
-    <cite>SVG 2</cite> and <cite>MathML</cite>. <ref spec=SVG> <ref spec=MATHML></p>
+    <cite>SVG 2</cite> and <cite>MathML</cite>. <ref>SVG</ref> <ref>MATHML</ref></p>
    </li>
   </ul>
 
@@ -72352,7 +72391,7 @@ dictionary <dfn dictionary>ValidityStateFlags</dfn> {
    from games are more difficult to mark up. This example shows one possible convention using
    <code>dl</code> elements to list the possible responses at each point in the conversation.
    Another option to consider is describing the conversation in the form of a DOT file, and
-   outputting the result as an SVG image to place in the document. <ref spec=DOT></p>
+   outputting the result as an SVG image to place in the document. <ref>DOT</ref></p>
 
    <pre><code class="html">&lt;p> Next, you meet a fisher. You can say one of several greetings:
 &lt;dl>
@@ -72619,8 +72658,8 @@ contradict people?
   <h4>Case-sensitivity of the CSS <span>'attr()'</span> function</h4>
 
   <p><cite>CSS Values and Units</cite> leaves the case-sensitivity of attribute names for the
-  purpose of the <span>'attr()'</span> function to be defined by the host language. <ref
-  spec=CSSVALUES></p>
+  purpose of the <span>'attr()'</span> function to be defined by the host language.
+  <ref>CSSVALUES</ref></p>
 
   <p>When comparing the attribute name part of a CSS <span>'attr()'</span> function to the names of
   namespace-less attributes on <span>HTML elements</span> in <span>HTML documents</span>, the name
@@ -72636,7 +72675,7 @@ contradict people?
   <h4>Case-sensitivity of selectors</h4>
 
   <p><cite>Selectors</cite> leaves the case-sensitivity of element names, attribute names, and
-  attribute values to be defined by the host language. <ref spec=SELECTORS></p>
+  attribute values to be defined by the host language. <ref>SELECTORS</ref></p>
 
   <p>When comparing a CSS element <span>type selector</span> to the names of <span>HTML
   elements</span> in <span>HTML documents</span>, the CSS element <span>type selector</span> must
@@ -72746,7 +72785,7 @@ contradict people?
   <h4>Pseudo-classes</h4>
 
   <p>There are a number of dynamic selectors that can be used with HTML. This section defines when
-  these selectors match HTML elements. <ref spec=SELECTORS> <ref spec=CSSUI></p>
+  these selectors match HTML elements. <ref>SELECTORS</ref> <ref>CSSUI</ref></p>
 
   <dl>
    <dt><dfn selector noexport><code data-x="selector-defined">:defined</code></dfn></dt>
@@ -72822,8 +72861,8 @@ contradict people?
 
     <p class="note">Per the definition in <cite>Selectors</cite>, <code
     data-x="selector-active">:active</code> also matches <span>flat tree</span> ancestors of
-    elements that are <i data-x="concept-selector-active">being activated</i>. <ref
-    spec=SELECTORS></p>
+    elements that are <i data-x="concept-selector-active">being activated</i>.
+    <ref>SELECTORS</ref></p>
 
     <p>Additionally, any element that is the <span>labeled control</span> of a <code>label</code>
     element that is currently matching <code data-x="selector-active">:active</code>, also matches
@@ -72843,7 +72882,7 @@ contradict people?
 
     <p class="note">Per the definition in <cite>Selectors</cite>, <code
     data-x="selector-hover">:hover</code> also matches <span>flat tree</span> ancestors of elements
-    that are <i data-x="concept-selector-hover">designated</i>. <ref spec=SELECTORS></p>
+    that are <i data-x="concept-selector-hover">designated</i>. <ref>SELECTORS</ref></p>
 
     <p>Additionally, any element that is the <span>labeled control</span> of a <code>label</code>
     element that is currently matching <code data-x="selector-hover">:hover</code>, also matches
@@ -72904,8 +72943,8 @@ Demos:
    <dd>
     <p>For the purposes of the CSS <code data-x="selector-focus">:target</code>
     <span>pseudo-class</span>, the <code>Document</code>'s <i>target elements</i> are a list
-    containing the <code>Document</code>'s <span>target element</span>, if it is
-    not null, or containing no elements, if it is. <ref spec=SELECTORS></p>
+    containing the <code>Document</code>'s <span>target element</span>, if it is not null, or
+    containing no elements, if it is. <ref>SELECTORS</ref></p>
    </dd>
 
    <dt><dfn selector noexport><code data-x="selector-popover-open">:popover-open</code></dfn></dt>
@@ -73119,7 +73158,7 @@ Demos:
    <dd>
     <p>The <code data-x="selector-read-write">:read-write</code> <span>pseudo-class</span> must
     match any element falling into one of the following categories, which for the purposes of
-    Selectors are thus considered <i>user-alterable</i>: <ref spec=SELECTORS></p>
+    Selectors are thus considered <i>user-alterable</i>: <ref>SELECTORS</ref></p>
 
     <ul>
      <li><code>input</code> elements to which the <code data-x="attr-input-readonly">readonly</code>
@@ -73169,7 +73208,7 @@ Demos:
   <p class="note">This specification does not define when an element matches the <code undefined
   data-x="selector-lang()">:lang()</code> dynamic <span>pseudo-class</span>, as it is defined in
   sufficient detail in a language-agnostic fashion in <cite>Selectors</cite>.
-  <ref spec=SELECTORS></p>
+  <ref>SELECTORS</ref></p>
 
   </div>
 
@@ -74266,7 +74305,7 @@ Demos:
   <p>The following are the type's <span data-x="defined property name">defined property
   names</span>. They are based on the vocabulary defined in <cite>vCard Format Specification</cite>
   (<cite>vCard</cite>) and its extensions, where more information on how to interpret the values can
-  be found. <ref spec=RFC6350></p>
+  be found. <ref>RFC6350</ref></p>
 
   <dl>
    <dt><dfn><code data-x="md-vcard-kind">kind</code></dfn></dt>
@@ -74649,7 +74688,7 @@ Demos:
     interpreted as a telephone number as defined in the CCITT specifications E.163 and X.121, or an
     <span data-x="concept-item">item</span> with zero or more <code
     data-x="md-vcard-tel-type">type</code> properties and exactly one <code
-    data-x="md-vcard-tel-value">value</code> property. <ref spec=E163> <ref spec=X121></p>
+    data-x="md-vcard-tel-value">value</code> property. <ref>E163</ref> <ref>X121</ref></p>
 
     <p>If no <code data-x="md-vcard-tel-type">type</code> properties are present within an <span
     data-x="concept-item">item</span> that forms the <span
@@ -74688,8 +74727,8 @@ Demos:
     <p>Gives the actual telephone number of the person or organization.</p>
 
     <p>The <span data-x="concept-property-value">value</span> must be text that can be interpreted
-    as a telephone number as defined in the CCITT specifications E.163 and X.121. <ref spec=E163>
-    <ref spec=X121></p>
+    as a telephone number as defined in the CCITT specifications E.163 and X.121. <ref>E163</ref>
+    <ref>X121</ref></p>
 
     <p>Exactly one property with the name <code data-x="md-vcard-tel-value">value</code> must be
     present within the <span data-x="concept-item">item</span> that forms the <span
@@ -74732,7 +74771,8 @@ Demos:
    <dd>
     <p>Gives a language understood by the person or organization.</p>
 
-    <p>The <span data-x="concept-property-value">value</span> must be a valid BCP 47 language tag. <ref spec=BCP47>.</p>
+    <p>The <span data-x="concept-property-value">value</span> must be a valid BCP 47 language tag.
+    <ref>BCP47</ref>.</p>
 
     <p>Any number of properties with the name <code data-x="md-vcard-lang">lang</code> may be present
     within each <span data-x="concept-item">item</span> with the type <code
@@ -75194,7 +75234,7 @@ Demos:
    <dt><dfn data-x="md-vcard-rel-sweetheart">sweetheart</dfn></dt>
    <dt><dfn data-x="md-vcard-rel-me">me</dfn></dt>
    <dd>
-    <p>Has the meaning defined in XFN. <ref spec=XFN></p>
+    <p>Has the meaning defined in XFN. <ref>XFN</ref></p>
    </dd>
 
    <!-- update this when https://www.iana.org/assignments/vcard-elements/vcard-elements.xml#parameter-values is updated -->
@@ -75743,7 +75783,7 @@ END:VCARD</pre>
   <p>The following are the type's <span data-x="defined property name">defined property
   names</span>. They are based on the vocabulary defined in <cite>Internet Calendaring and
   Scheduling Core Object Specification</cite> (<cite>iCalendar</cite>), where more information on
-  how to interpret the values can be found. <ref spec=RFC5545></p>
+  how to interpret the values can be found. <ref>RFC5545</ref></p>
 
   <p class="note">Only the parts of the iCalendar vocabulary relating to events are used here; this
   vocabulary cannot express a complete iCalendar instance.</p>
@@ -76125,7 +76165,7 @@ END:VCARD</pre>
     <p>Gives a rule for finding dates and times at which the event occurs.</p>
 
     <p>The <span data-x="concept-property-value">value</span> must be text that matches the RECUR
-    value type defined in <cite>iCalendar</cite>. <ref spec=RFC5545></p>
+    value type defined in <cite>iCalendar</cite>. <ref>RFC5545</ref></p>
 
     <p>A single property with the name <code data-x="md-vevent-rrule">rrule</code> may be
     present within each <span data-x="concept-item">item</span> with the type <code
@@ -76259,7 +76299,8 @@ END:VCARD</pre>
 
      <li><p><span>Add an iCalendar line</span> with the type "<code data-x="">DTSTAMP</code>" and a
      value consisting of an iCalendar DATE-TIME string representing the current date and time, with
-     the annotation "<code data-x="">VALUE=DATE-TIME</code>", to <var>output</var>. <ref spec=RFC5545></p></li>
+     the annotation "<code data-x="">VALUE=DATE-TIME</code>", to <var>output</var>.
+     <ref>RFC5545</ref></p></li>
 
      <li>
       <p>For each element <var>element</var> that is <span data-x="the properties of an
@@ -76561,7 +76602,7 @@ END:VCARD</pre>
    possible way (meaning no whitespace between tokens, no unnecessary zero digits in numbers, and
    only using Unicode escapes in strings for characters that do not have a dedicated escape
    sequence), and with a lowercase "<code data-x="">e</code>" used, when appropriate, in the
-   representation of any numbers. <ref spec=JSON></p></li>
+   representation of any numbers. <ref>JSON</ref></p></li>
   </ol>
 
   <p class="note">This algorithm returns an object with a single property that is an array, instead
@@ -77005,8 +77046,8 @@ END:VCARD</pre>
    the <span>current high resolution time</span> given <var>document</var>'s
    <span>relevant global object</span>.</p>
 
-   <li><p>Run the <span>screen orientation change steps</span> with <var>document</var>. <ref
-   spec=SCREENORIENTATION></p></li>
+   <li><p>Run the <span>screen orientation change steps</span> with <var>document</var>.
+   <ref>SCREENORIENTATION</ref></p></li>
 
    <li>
     <p>Run any <dfn export>page visibility change steps</dfn> which may be defined in other
@@ -77016,8 +77057,8 @@ END:VCARD</pre>
     from here into their specifications directly, instead of using the <span>page visibility change
     steps</span> hook, to ensure well-defined cross-specification call order. As of the time of
     this writing the following specifications are known to have <span>page visibility change
-    steps</span>, which will be run in an unspecified order: <cite>Device Posture API</cite>
-    and <cite>Web NFC</cite>. <ref spec=DEVICEPOSTURE> <ref spec=WEBNFC></p>
+    steps</span>, which will be run in an unspecified order: <cite>Device Posture API</cite> and
+    <cite>Web NFC</cite>. <ref>DEVICEPOSTURE</ref> <ref>WEBNFC</ref></p>
    </li>
 
    <li><p>Fire an event named <code data-x="event-visibilitychange">visibilitychange</code> at
@@ -77487,8 +77528,8 @@ partial interface <span id="NavigatorUserActivation-partial">Navigator</span> {
 
   <p>For the purposes of user-agent automation and application testing, this specification defines
   the following <span>extension command</span> for the <cite>Web Driver</cite> specification. It is
-  optional for a user agent to support the following <span>extension command</span>. <ref
-  spec=WEBDRIVER></p>
+  optional for a user agent to support the following <span>extension command</span>.
+  <ref>WEBDRIVER</ref></p>
 
   <table class="data">
    <thead>
@@ -78247,7 +78288,7 @@ partial interface <span id="NavigatorUserActivation-partial">Navigator</span> {
    data-x="focusable area">focusable areas</span></dt>
 
    <dd><p>Return the element's first scrollable region, according to a pre-order, depth-first
-   traversal of the <span>flat tree</span>. <ref spec=CSSSCOPING></p></dd>
+   traversal of the <span>flat tree</span>. <ref>CSSSCOPING</ref></p></dd>
 
    <dt>If <var>focus target</var> is the <span>document element</span> of its
    <code>Document</code></dt>
@@ -79525,8 +79566,8 @@ addShortcutKeyLabel(document.getElementById('c'));</code></pre>
 
    <p>Features to enable, e.g., inserting links, can be implemented using the <code
    data-x="dom-document-execCommand">document.execCommand()</code> API, or using
-   <code>Selection</code> APIs and other DOM APIs. <ref spec=EXECCOMMAND> <ref spec=SELECTION> <ref
-   spec=DOM></p>
+   <code>Selection</code> APIs and other DOM APIs. <ref>EXECCOMMAND</ref> <ref>SELECTION</ref>
+   <ref>DOM</ref></p>
   </div>
 
   <div class="example">
@@ -79699,8 +79740,7 @@ body { display:none }
 
   methods, text selections, and the <dfn
   data-x-href="https://w3c.github.io/editing/docs/execCommand/#delete-the-selection">delete the
-  selection</dfn> algorithm are defined in <cite>execCommand</cite>. <ref
-  spec=EXECCOMMAND></p>
+  selection</dfn> algorithm are defined in <cite>execCommand</cite>. <ref>EXECCOMMAND</ref></p>
 
   </div>
 
@@ -80314,7 +80354,7 @@ body { display:none }
   elements with the <code data-x="attr-hidden">hidden</code> attribute in the <span
   data-x="attr-hidden-until-found-state">hidden until found state</span> should have their contents
   become skipped again. This entire process must happen synchronously (and so is not observable to
-  users or to author code). <ref spec=CSSCONTAIN></p>
+  users or to author code). <ref>CSSCONTAIN</ref></p>
 
   <p>When find-in-page chooses a new <span data-x="fip-active-match">active match</span>, perform
   the following steps:</p>
@@ -80952,7 +80992,7 @@ interface <dfn interface>DataTransfer</dfn> {
 
    <li><p>If <var>convert-to-URL</var> is true, then parse <var>result</var> as appropriate for
    <code data-x="">text/uri-list</code> data, and then set <var>result</var> to the first URL from
-   the list, if any, or the empty string otherwise. <ref spec=RFC2483></p></li>
+   the list, if any, or the empty string otherwise. <ref>RFC2483</ref></p></li>
 
    <li><p>Return <var>result</var>.</p></li>
   </ol>
@@ -81375,7 +81415,7 @@ callback <dfn>FunctionObjectCallback</dfn> = undefined (any data);--></code></pr
     <code>Blob</code> object representing the actual data of the item represented by the
     <code>DataTransferItem</code> object, with the <code data-x="dom-Blob-type">type</code> of the
     <code>Blob</code> being <span>the drag data item type string</span> and with the binary data of
-    the <code>Blob</code> object being the Unicode string encoded as UTF-8. <ref spec=ENCODING></p>
+    the <code>Blob</code> object being the Unicode string encoded as UTF-8. <ref>ENCODING</ref></p>
 
     <p>Otherwise, <span>the drag data item kind</span> is <i>Blob</i>; return a new
     <code>Blob</code> object representing the actual data of the item represented by the
@@ -81826,7 +81866,7 @@ dictionary <dfn dictionary>DragEventInit</dfn> : <span>MouseEventInit</span> {
 
    <li><p><span>Fire a pointer event</span> at the <span>source node</span> named <code
    data-x="event-pointercancel">pointercancel</code>, and fire any other follow-up events as
-   required by <cite>Pointer Events</cite>. <ref spec=POINTEREVENTS></p></li>
+   required by <cite>Pointer Events</cite>. <ref>POINTEREVENTS</ref></p></li>
 
    <li>
     <p><span>Initiate the drag-and-drop operation</span> in a manner consistent with platform
@@ -81839,7 +81879,7 @@ dictionary <dfn dictionary>DragEventInit</dfn> : <span>MouseEventInit</span> {
      <li>The <span>drag data store bitmap</span>, if any. In this case, the <span>drag data store
      hot spot coordinate</span> should be used as hints for where to put the cursor relative to the
      resulting image. The values are expressed as distances in <span data-x="'px'">CSS pixels</span>
-     from the left side and from the top side of the image respectively. <ref spec=CSS></li>
+     from the left side and from the top side of the image respectively. <ref>CSS</ref></li>
 
      <li>The <span>drag data store default feedback</span>.</li>
     </ol>
@@ -84051,7 +84091,7 @@ dictionary <dfn dictionary>ToggleEventInit</dfn> : <span>EventInit</span> {
        <!-- It would be cleaner to avoid string manipulation on domains. -->
       </ul>
 
-      <p>then return false. <ref spec=URL></p>
+      <p>then return false. <ref>URL</ref></p>
      </li>
 
      <li><p><span>Assert</span>: <var>originalHost</var>'s <span>public suffix</span>, prefixed by
@@ -84168,8 +84208,8 @@ dictionary <dfn dictionary>ToggleEventInit</dfn> : <span>EventInit</span> {
   placed in an <span>origin</span>-<span data-x="agent cluster key">keyed</span> <span>agent
   cluster</span>, by using the `<dfn http-header><code>Origin-Agent-Cluster</code></dfn>` HTTP
   response header. This header is a <span data-x="http-structured-header">structured header</span>
-  whose value must be a <span data-x="http-structured-header-boolean">boolean</span>. <ref
-  spec=STRUCTURED-FIELDS></p>
+  whose value must be a <span data-x="http-structured-header-boolean">boolean</span>.
+  <ref>STRUCTURED-FIELDS</ref></p>
 
   <p><span w-nodev>Per the processing model in the <span data-x="create-the-document-object">create
   and initialize a new <code>Document</code> object</span>, values</span><span w-dev>Values</span>
@@ -84308,15 +84348,14 @@ dictionary <dfn dictionary>ToggleEventInit</dfn> : <span>EventInit</span> {
   policy</span> is derived from the `<dfn http-header
   id="cross-origin-opener-policy-2"><code>Cross-Origin-Opener-Policy</code></dfn>` and `<dfn
   http-header><code>Cross-Origin-Opener-Policy-Report-Only</code></dfn>` HTTP response headers.
-  These headers are <span data-x="http-structured-header">structured headers</span> whose value
-  must be a <span data-x="http-structured-header-token">token</span>. <ref
-  spec=STRUCTURED-FIELDS></p>
+  These headers are <span data-x="http-structured-header">structured headers</span> whose value must
+  be a <span data-x="http-structured-header-token">token</span>. <ref>STRUCTURED-FIELDS</ref></p>
 
   <p>The valid <span data-x="http-structured-header-token">token</span> values are the <span
   data-x="cross-origin opener policy value">opener policy values</span>. The token may also have
   attached <span data-x="http-structured-header-parameters">parameters</span>; of these, the "<dfn
   data-x="coop-report-to"><code>report-to</code></dfn>" parameter can have a <span>valid URL
-  string</span> identifying an appropriate reporting endpoint. <ref spec=REPORTING></p>
+  string</span> identifying an appropriate reporting endpoint. <ref>REPORTING</ref></p>
 
   <p class="note"><span w-nodev>Per the processing model described below, user</span><span
   w-dev>User</span> agents will ignore this header if it contains an invalid value. Likewise, user
@@ -85517,16 +85556,15 @@ dictionary <dfn dictionary>ToggleEventInit</dfn> : <span>EventInit</span> {
   `<dfn http-header><code>Cross-Origin-Embedder-Policy-Report-Only</code></dfn>` HTTP response
   headers allow a server to declare an <span>embedder policy</span> for an <span>environment
   settings object</span>. These headers are <span data-x="http-structured-header">structured
-  headers</span> whose values must be <span data-x="http-structured-header-token">token</span>. <ref
-  spec=STRUCTURED-FIELDS>
+  headers</span> whose values must be <span data-x="http-structured-header-token">token</span>.
+  <ref>STRUCTURED-FIELDS</ref>
 
   <p>The valid <span
   data-x="http-structured-header-token">token</span> values are the <span data-x="embedder policy
   value">embedder policy values</span>. The token may also have attached <span
   data-x="http-structured-header-parameters">parameters</span>; of these, the "<dfn
   data-x="coep-report-to"><code>report-to</code></dfn>" parameter can have a <span>valid URL
-  string</span> identifying an appropriate reporting endpoint. <ref
-  spec=REPORTING></p>
+  string</span> identifying an appropriate reporting endpoint. <ref>REPORTING</ref></p>
 
   <div class="note">
    <p>The <span data-x="obtain an embedder policy">processing model</span> fails open (by defaulting
@@ -85845,7 +85883,7 @@ dictionary <dfn dictionary>ToggleEventInit</dfn> : <span>EventInit</span> {
    <dt>The <dfn export>sandboxed pointer lock browsing context flag</dfn></dt>
 
    <dd>
-    <p>This flag disables the Pointer Lock API. <ref spec=POINTERLOCK></p>
+    <p>This flag disables the Pointer Lock API. <ref>POINTERLOCK</ref></p>
    </dd>
 
 
@@ -85900,14 +85938,14 @@ dictionary <dfn dictionary>ToggleEventInit</dfn> : <span>EventInit</span> {
    <dt>The <dfn export>sandboxed orientation lock browsing context flag</dfn></dt>
 
    <dd>
-    <p>This flag disables the ability to lock the screen orientation. <ref
-    spec=SCREENORIENTATION></p>
+    <p>This flag disables the ability to lock the screen orientation.
+    <ref>SCREENORIENTATION</ref></p>
    </dd>
 
    <dt>The <dfn export>sandboxed presentation browsing context flag</dfn></dt>
 
    <dd>
-    <p>This flag disables the Presentation API. <ref spec=PRESENTATION></p>
+    <p>This flag disables the Presentation API. <ref>PRESENTATION</ref></p>
    </dd>
 
    <dt>The <dfn export>sandboxed downloads browsing context flag</dfn></dt>
@@ -86209,8 +86247,8 @@ dictionary <dfn dictionary>ToggleEventInit</dfn> : <span>EventInit</span> {
 
    <li><p>Set <var>result</var>'s <span data-x="policy-container-referrer-policy">referrer
    policy</span> to the result of <span data-x="parse-referrer-policy-header">parsing the
-   `<code>Referrer-Policy</code>` header</span> given <var>response</var>. <ref
-   spec="REFERRERPOLICY"></p></li>
+   `<code>Referrer-Policy</code>` header</span> given <var>response</var>.
+   <ref>REFERRERPOLICY</ref></p></li>
 
    <li><p>Return <var>result</var>.</p></li>
   </ol>
@@ -86300,7 +86338,7 @@ dictionary <dfn dictionary>ToggleEventInit</dfn> : <span>EventInit</span> {
   that the web depends upon.</p>
 
   <p>This section uses the terminology and typographic conventions from the JavaScript
-  specification. <ref spec=JAVASCRIPT></p>
+  specification. <ref>JAVASCRIPT</ref></p>
 
 
   <h5>Integration with IDL</h5>
@@ -86537,7 +86575,7 @@ dictionary <dfn dictionary>ToggleEventInit</dfn> : <span>EventInit</span> {
   navigation, it is required that the property be configurable. (However, see <a
   href="https://github.com/tc39/ecma262/issues/672">tc39/ecma262 issue #672</a> and references to it
   elsewhere in this specification for cases where we are not able to preserve these invariants, for
-  compatibility with existing web content.) <ref spec=JAVASCRIPT></p>
+  compatibility with existing web content.) <ref>JAVASCRIPT</ref></p>
 
   <p class="note">The reason the property descriptors are non-enumerable, despite this mismatching
   the same-origin behavior, is for compatibility with existing web content. See <a
@@ -86861,8 +86899,8 @@ dictionary <dfn dictionary>WindowPostMessageOptions</dfn> : <span>StructuredSeri
      popup window is requested</span>, given <var>tokenizedFeatures</var>.</p></li>
 
      <li><p><span>Set up browsing context features</span> for <var>targetNavigable</var>'s <span
-     data-x="nav-bc">active browsing context</span> given <var>tokenizedFeatures</var>.<ref
-     spec="CSSOMVIEW"></p></li>
+     data-x="nav-bc">active browsing context</span> given
+     <var>tokenizedFeatures</var>.<ref>CSSOMVIEW</ref></p></li>
 
      <li><p>Let <var>urlRecord</var> be the <span>URL record</span>
      <code>about:blank</code>.</p></li>
@@ -87906,7 +87944,7 @@ interface <dfn interface>BarProp</dfn> {
     <p class="note">This is a <span>willful violation</span> of the JavaScript specification's
     <span>invariants of the essential internal methods</span> to maintain compatibility with
     existing web content. See <a href="https://github.com/tc39/ecma262/issues/672">tc39/ecma262
-    issue #672</a> for more information. <ref spec=JAVASCRIPT></p>
+    issue #672</a> for more information. <ref>JAVASCRIPT</ref></p>
    </li>
 
    <li><p>Let <var>property</var> be <span>CrossOriginGetOwnPropertyHelper</span>(<var>W</var>,
@@ -87960,7 +87998,7 @@ interface <dfn interface>BarProp</dfn> {
       <p class="note">This is a <span>willful violation</span> of the JavaScript specification's
       <span>invariants of the essential internal methods</span> to maintain compatibility with
       existing web content. See <a href="https://github.com/tc39/ecma262/issues/672">tc39/ecma262
-      issue #672</a> for more information. <ref spec=JAVASCRIPT></p>
+      issue #672</a> for more information. <ref>JAVASCRIPT</ref></p>
      </li>
     </ol>
 
@@ -92772,7 +92810,7 @@ interface <dfn interface>NavigationDestination</dfn> {
      <span data-x="concept-document-window">associated <code>Document</code></span>.</p></li>
 
      <li><p>If <var>document</var>'s <span>indicated part</span> is null, then <span>scroll to the
-     beginning of the document</span> given <var>document</var>. <ref spec=CSSOMVIEW></p></li>
+     beginning of the document</span> given <var>document</var>. <ref>CSSOMVIEW</ref></p></li>
 
      <li><p>Otherwise, <span>scroll to the fragment</span> given <var>document</var>.</p></li>
     </ol>
@@ -93294,9 +93332,8 @@ interface <dfn interface>BeforeUnloadEvent</dfn> : <span>Event</span> {
    entries</span>.</p></li>
 
    <li id="copy-session-storage"><p>If <var>opener</var> is non-null, then <span>legacy-clone a
-   traversable storage shed</span> given <var>opener</var>'s <span
-   data-x="bc-traversable">top-level traversable</span> and <var>traversable</var>. <ref
-   spec=STORAGE></p></li>
+   traversable storage shed</span> given <var>opener</var>'s <span data-x="bc-traversable">top-level
+   traversable</span> and <var>traversable</var>. <ref>STORAGE</ref></p></li>
 
    <li><p><span data-x="list append">Append</span> <var>traversable</var> to the user agent's
    <span>top-level traversable set</span>.</p></li>
@@ -94211,7 +94248,7 @@ interface <dfn interface>BeforeUnloadEvent</dfn> : <span>Event</span> {
 
    <li>
     <p>Let <var>permissionsPolicy</var> be the result of <span>creating a permissions policy</span>
-    given <var>embedder</var> and <var>origin</var>. <ref spec="PERMISSIONSPOLICY"></p>
+    given <var>embedder</var> and <var>origin</var>. <ref>PERMISSIONSPOLICY</ref></p>
    </li>
 
    <li><p>Let <var>agent</var> be the result of <span
@@ -95545,8 +95582,8 @@ location.href = '#foo';</code></pre>
     delta">traversals</span> are sometimes talked about as a type of navigation, since all three
     will often <span>attempt to populate the history entry's document</span> and thus could perform
     navigational fetches. See, e.g., the APIs exposed <cite>Navigation Timing</cite>. But they have
-    their own entry point algorithms, separate from the <span>navigate</span> algorithm. <ref
-    spec=NAVIGATIONTIMING></p></li>
+    their own entry point algorithms, separate from the <span>navigate</span> algorithm.
+    <ref>NAVIGATIONTIMING</ref></p></li>
 
     <li><p>Although <span data-x="navigate-fragid">fragment navigations</span> are always done
     through the <span>navigate</span> algorithm, a user might perceive them as more like jumping
@@ -95705,7 +95742,7 @@ location.href = '#foo';</code></pre>
 
   <p>A <dfn>navigation ID</dfn> is a UUID string generated during navigation. It is used to
   interface with the <cite>WebDriver BiDi</cite> specification as well as to track the <span>ongoing
-  navigation</span>. <ref spec=WEBDRIVERBIDI></p>
+  navigation</span>. <ref>WEBDRIVERBIDI</ref></p>
 
   <hr>
 
@@ -95845,8 +95882,8 @@ location.href = '#foo';</code></pre>
     </ol>
    </li>
 
-   <li><p>Let <var>navigationId</var> be the result of <span>generating a random UUID</span>. <ref
-   spec=WEBCRYPTO></p></li>
+   <li><p>Let <var>navigationId</var> be the result of <span>generating a random UUID</span>.
+   <ref>WEBCRYPTO</ref></p></li>
 
    <li>
     <p>If the <span>surrounding agent</span> is equal to <var>navigable</var>'s <span
@@ -96380,7 +96417,7 @@ location.href = '#foo';</code></pre>
 
    <li><p>If the result of <span>should navigation request of type be blocked by Content Security
    Policy?</span> given <var>request</var> and <var>cspNavigationType</var> is "<code
-   data-x="">Blocked</code>", then return. <ref spec="CSP"></p></li>
+   data-x="">Blocked</code>", then return. <ref>CSP</ref></p></li>
 
    <li><p>Let <var>newDocument</var> be the result of <span data-x="evaluate a javascript:
    URL">evaluating a <code>javascript:</code> URL</span> given <var>targetNavigable</var>,
@@ -97641,8 +97678,8 @@ location.href = '#foo';</code></pre>
      <var>navigationParams</var>'s <span data-x="navigation-params-response">response</span>,
      <var>navigationParams</var>'s <span data-x="navigation-params-policy-container">policy
      container</span>'s <span data-x="policy-container-csp-list">CSP list</span>,
-     <var>cspNavigationType</var>, and <var>navigable</var> is "<code
-     data-x="">Blocked</code>", then set <var>failure</var> to true. <ref spec="CSP"></p></li>
+     <var>cspNavigationType</var>, and <var>navigable</var> is "<code data-x="">Blocked</code>",
+     then set <var>failure</var> to true. <ref>CSP</ref></p></li>
 
      <li><p>Otherwise, if <var>navigationParams</var>'s <span
      data-x="navigation-params-reserved-environment">reserved environment</span> is non-null and
@@ -98144,8 +98181,8 @@ location.href = '#foo';</code></pre>
 
         <p class="note">The created environment's <span
         data-x="concept-environment-active-service-worker">active service worker</span> is set in
-        the <span data-x="on-fetch-request-algorithm">Handle Fetch</span> algorithm during the
-        fetch if the request URL matches a service worker registration. <ref spec="SW"></p>
+        the <span data-x="on-fetch-request-algorithm">Handle Fetch</span> algorithm during the fetch
+        if the request URL matches a service worker registration. <ref>SW</ref></p>
        </li>
       </ol>
      </li>
@@ -98153,7 +98190,7 @@ location.href = '#foo';</code></pre>
      <li><p>If the result of <span>should navigation request of type be blocked by Content Security
      Policy?</span> given <var>request</var> and <var>cspNavigationType</var> is "<code
      data-x="">Blocked</code>", then set <var>response</var> to a <span>network error</span> and
-     <span>break</span>. <ref spec="CSP"></p></li>
+     <span>break</span>. <ref>CSP</ref></p></li>
 
      <li><p>Set <var>response</var> to null.</p></li>
 
@@ -99761,8 +99798,8 @@ location.href = '#foo';</code></pre>
     <ol>
      <li><p>Set <var>document</var>'s <span>target element</span> to null.</p></li>
 
-     <li><p><span>Scroll to the beginning of the document</span> for <var>document</var>. <ref
-     spec=CSSOMVIEW></p></li>
+     <li><p><span>Scroll to the beginning of the document</span> for <var>document</var>.
+     <ref>CSSOMVIEW</ref></p></li>
 
      <li><p>Return.</p></li>
     </ol>
@@ -99786,7 +99823,7 @@ location.href = '#foo';</code></pre>
 
      <li><p><span data-x="scroll a target into view">Scroll <var>target</var> into view</span>,
      with <var>behavior</var> set to "auto", <var>block</var> set to "start", and <var>inline</var>
-     set to "nearest". <ref spec=CSSOMVIEW></p></li>
+     set to "nearest". <ref>CSSOMVIEW</ref></p></li>
 
      <li><p>Run the <span>focusing steps</span> for <var>target</var>, with the
      <code>Document</code>'s <span>viewport</span> as the <var>fallback target</var>.</p></li>
@@ -99804,7 +99841,7 @@ location.href = '#foo';</code></pre>
   terms of mapping it to a node is defined by the specification that defines the <span>MIME
   type</span> used by the <code>Document</code> (for example, the processing of <span
   data-x="concept-url-fragment">fragments</span> for <span data-x="XML MIME type">XML MIME
-  types</span> is the responsibility of RFC7303). <ref spec=RFC7303></p>
+  types</span> is the responsibility of RFC7303). <ref>RFC7303</ref></p>
 
   <p>There is also a <dfn>target element</dfn> for each <code>Document</code>, which is used in
   defining the <code data-x="selector-target">:target</code> pseudo-class and is updated by the
@@ -99962,8 +99999,8 @@ location.href = '#foo';</code></pre>
     data-x="she-scroll-position">scroll position data</span> might take some time to load from the
     network.</p>
 
-    <p class="note">Scroll restoration might be affected by scroll anchoring. <ref
-    spec=CSSSCROLLANCHORING></p>
+    <p class="note">Scroll restoration might be affected by scroll anchoring.
+    <ref>CSSSCROLLANCHORING</ref></p>
    </li>
   </ol>
 
@@ -100020,7 +100057,7 @@ location.href = '#foo';</code></pre>
     data-x="navigation-params-navigable">navigable</span>'s <span
     data-x="nav-container">container</span>, <var>navigationParams</var>'s <span
     data-x="navigation-params-origin">origin</span>, and <var>navigationParams</var>'s <span
-    data-x="navigation-params-response">response</span>. <ref spec="PERMISSIONSPOLICY"></p>
+    data-x="navigation-params-response">response</span>. <ref>PERMISSIONSPOLICY</ref></p>
 
     <div class="note">
      <p>The <span>creating a permissions policy from a response</span> algorithm makes use of the
@@ -100194,7 +100231,7 @@ location.href = '#foo';</code></pre>
    <code>Document</code></span> to <var>document</var>.</p></li>
 
    <li><p><span>Run CSP initialization for a <code data-x="">Document</code></span> given
-   <var>document</var>. <ref spec="CSP"></p>
+   <var>document</var>. <ref>CSP</ref></p>
 
    <li>
     <p>If <var>navigationParams</var>'s <span data-x="navigation-params-request">request</span> is
@@ -100415,8 +100452,8 @@ new PaymentRequest(&hellip;); // Allowed to use
   data-x="create-the-document-object">create and initialize a <code>Document</code> object</span>
   <var>document</var>, given "<code data-x="">xml</code>", <var>type</var>, and
   <var>navigationParams</var>, and return that <code>Document</code>. They must also create a
-  corresponding <span>XML parser</span>. <ref spec=XML> <ref spec=XMLNS> <ref spec=RFC7303> <ref
-  spec=DOM></p>
+  corresponding <span>XML parser</span>. <ref>XML</ref> <ref>XMLNS</ref> <ref>RFC7303</ref>
+  <ref>DOM</ref></p>
 
   <p class="note">At the time of writing, the XML specification community had not actually yet
   specified how XML and the DOM interact.</p> <!--XMLPARSE-->
@@ -100520,8 +100557,8 @@ new PaymentRequest(&hellip;); // Allowed to use
   <ol>
    <li><p>Parse <var>navigationParams</var>'s <span
    data-x="navigation-params-response">response</span>'s <span
-   data-x="concept-response-body">body</span> using the rules for multipart types. <ref
-   spec=RFC2046></p></li>
+   data-x="concept-response-body">body</span> using the rules for multipart types.
+   <ref>RFC2046</ref></p></li>
 
    <li><p>Let <var>firstPartNavigationParams</var> be a copy of
    <var>navigationParams</var>.</p></li>
@@ -100954,10 +100991,10 @@ new PaymentRequest(&hellip;); // Allowed to use
    NFC</cite>, <cite>WebDriver BiDi</cite>, <cite>Compute Pressure</cite>, <cite>File API</cite>,
    <cite>Media Capture and Streams</cite>, <cite>Picture-in-Picture</cite>, <cite>Screen
    Orientation</cite>, <cite>Service Workers</cite>, <cite>WebLocks API</cite>, <cite>WebAudio
-   API</cite>, <cite>WebRTC</cite>. <ref spec=FULLSCREEN> <ref spec=WEBNFC> <ref
-   spec=WEBDRIVERBIDI> <ref spec=COMPUTEPRESSURE> <ref spec=FILEAPI> <ref spec=MEDIASTREAM>
-   <ref spec=PICTUREINPICTURE> <ref spec=SCREENORIENTATION> <ref spec=SW> <ref spec=WEBLOCKS>
-   <ref spec=WEBAUDIO> <ref spec=WEBRTC>
+   API</cite>, <cite>WebRTC</cite>. <ref>FULLSCREEN</ref> <ref>WEBNFC</ref> <ref>WEBDRIVERBIDI</ref>
+   <ref>COMPUTEPRESSURE</ref> <ref>FILEAPI</ref> <ref>MEDIASTREAM</ref> <ref>PICTUREINPICTURE</ref>
+   <ref>SCREENORIENTATION</ref> <ref>SW</ref> <ref>WEBLOCKS</ref> <ref>WEBAUDIO</ref>
+   <ref>WEBRTC</ref>
 
    <p><a href="https://github.com/whatwg/html/issues/8906">Issue #8906</a> tracks the work to make
    the order of these steps clear.</p>
@@ -101095,8 +101132,8 @@ new PaymentRequest(&hellip;); // Allowed to use
   navigable</span>. It is obsoleted by the <code data-x="frame-ancestors
   directive">frame-ancestors</code> CSP directive, which provides more granular control over the
   same situations. It was originally defined in <cite>HTTP Header Field X-Frame-Options</cite>, but
-  the definition<span w-nodev> and processing model</span> here supersedes that document. <ref
-  spec=CSP> <ref spec=RFC7034>
+  the definition<span w-nodev> and processing model</span> here supersedes that document.
+  <ref>CSP</ref> <ref>RFC7034</ref>
 
   <p class="note">In particular, <cite>HTTP Header Field X-Frame-Options</cite> specified an `<code
   data-x="">ALLOW-FROM</code>` variant of the header, but that is not to be implemented.</p>
@@ -101905,7 +101942,7 @@ new PaymentRequest(&hellip;); // Allowed to use
    <dt>A <dfn data-x="concept-settings-object-time-origin" export
    for="environment settings object">time origin</dfn></dt>
 
-   <dd>A number used as the baseline for performance-related timestamps. <ref spec=HRT></dd>
+   <dd>A number used as the baseline for performance-related timestamps. <ref>HRT</ref></dd>
   </dl>
 
   <p>An <span>environment settings object</span> also has an <dfn>outstanding rejected promises
@@ -102121,7 +102158,7 @@ new PaymentRequest(&hellip;); // Allowed to use
    creating an object that is to be persisted and returned multiple times. For example, the <code
    data-x="dom-navigator-getBattery">navigator.getBattery()</code> method creates promises in the
    <span data-x="concept-relevant-realm">relevant realm</span> for the <code>Navigator</code> object
-   on which it is invoked. This has the following impact: <ref spec=BATTERY>
+   on which it is invoked. This has the following impact: <ref>BATTERY</ref>
 
    <pre><code class="html">&lt;!-- outer.html -->
 &lt;!DOCTYPE html>
@@ -102206,8 +102243,7 @@ new PaymentRequest(&hellip;); // Allowed to use
   settings object</span> when no author code is on the stack, but author code is responsible for the
   current algorithm having been run in some way. The process of <span data-x="prepare to run a
   callback">preparing to run a callback</span> and <span data-x="clean up after running a
-  callback">cleaning up after running a callback</span> manipulate this stack. <ref
-  spec="WEBIDL"></p>
+  callback">cleaning up after running a callback</span> manipulate this stack. <ref>WEBIDL</ref></p>
 
   <p>When Web IDL is used to <span data-x="es-invoking-callback-functions">invoke</span> author
   code, or when <span>HostEnqueuePromiseJob</span> invokes a promise job, they use the following
@@ -102464,7 +102500,7 @@ document.querySelector("button").addEventListener("click", bound);
   <h6>Current</h6>
 
   <p>The JavaScript specification defines the <span>current realm</span>, also known as the "current
-  Realm Record". <ref spec=JAVASCRIPT></p>
+  Realm Record". <ref>JAVASCRIPT</ref></p>
 
   <p>Then, the <dfn export>current settings object</dfn> is the <span
   data-x="concept-realm-settings-object">environment settings object</span> of the <span>current
@@ -102883,7 +102919,7 @@ document.querySelector("button").addEventListener("click", bound);
   data-x="concept-fetch">fetch</span> at all.</p>
 
   <p class="note"><cite>Service Workers</cite> is an example of a specification that runs these
-  algorithms with its own options for the hook. <ref spec=SW></p>
+  algorithms with its own options for the hook. <ref>SW</ref></p>
 
   <hr>
 
@@ -103570,7 +103606,7 @@ document.querySelector("button").addEventListener("click", bound);
 
      <li><p>Let <var>referrerPolicy</var> be the result of <span
      data-x="parse-referrer-policy-header">parsing the `<code>Referrer-Policy</code>` header</span>
-     given <var>response</var>. <ref spec="REFERRERPOLICY"></p></li>
+     given <var>response</var>. <ref>REFERRERPOLICY</ref></p></li>
 
      <li><p>If <var>referrerPolicy</var> is not the empty string, set <var>options</var>'s <span
      data-x="concept-script-fetch-options-referrer-policy">referrer policy</span> to
@@ -104099,8 +104135,8 @@ document.querySelector("button").addEventListener("click", bound);
   running script</dfn>. This causes any <span data-x="js-ScriptEvaluation">ScriptEvaluation</span>
   or <span>Source Text Module Record</span> <span data-x="js-Evaluate">Evaluate</span> invocations
   to cease immediately, emptying the <span>JavaScript execution context stack</span> without
-  triggering any of the normal mechanisms like <code data-x="">finally</code> blocks. <ref
-  spec=JAVASCRIPT></p>
+  triggering any of the normal mechanisms like <code data-x="">finally</code> blocks.
+  <ref>JAVASCRIPT</ref></p>
 
   <p>User agents may impose resource limitations on scripts, for example CPU quotas, memory limits,
   total execution time limits, or bandwidth limitations. When a script exceeds a limit, the user
@@ -104884,7 +104920,7 @@ dictionary <dfn dictionary>PromiseRejectionEventInit</dfn> : <span>EventInit</sp
   requirements</dfn>:</p>
 
   <ul>
-   <li><p>It must be valid JSON. <ref spec=JSON></p></li>
+   <li><p>It must be valid JSON. <ref>JSON</ref></p></li>
 
    <li><p>The JSON must represent a JSON object, with at most the two keys "<code
    data-x="">imports</code>" and "<code data-x="">scopes</code>".</p></li>
@@ -105204,7 +105240,7 @@ dictionary <dfn dictionary>PromiseRejectionEventInit</dfn> : <span>EventInit</sp
 
   <p>JavaScript contains an <span>implementation-defined</span> <span
   data-x="js-HostEnsureCanAddPrivateElement">HostEnsureCanAddPrivateElement</span>(<var>O</var>)
-  abstract operation. User agents must use the following implementation: <ref spec=JAVASCRIPT>
+  abstract operation. User agents must use the following implementation: <ref>JAVASCRIPT</ref>
 
   <ol>
    <li><p>If <var>O</var> is a <code>WindowProxy</code> object, or <span>implements</span>
@@ -105226,13 +105262,12 @@ dictionary <dfn dictionary>PromiseRejectionEventInit</dfn> : <span>EventInit</sp
 
   <p>JavaScript contains an <span>implementation-defined</span> <span
   data-x="js-HostEnsureCanCompileStrings">HostEnsureCanCompileStrings</span>(<var>realm</var>)
-  abstract operation. User agents must use the following implementation:
-  <ref spec=JAVASCRIPT>
+  abstract operation. User agents must use the following implementation: <ref>JAVASCRIPT</ref>
 
   <ol>
    <li><p>Perform ? <span
    data-x="csp-EnsureCSPDoesNotBlockStringCompilation">EnsureCSPDoesNotBlockStringCompilation</span>(<var>realm</var>).
-   <ref spec=CSP></p></li>
+   <ref>CSP</ref></p></li>
   </ol>
 
   <h5 id="the-hostpromiserejectiontracker-implementation"><dfn>HostPromiseRejectionTracker</dfn>(<var>promise</var>, <var>operation</var>)</h5>
@@ -105240,7 +105275,7 @@ dictionary <dfn dictionary>PromiseRejectionEventInit</dfn> : <span>EventInit</sp
   <p>JavaScript contains an <span>implementation-defined</span> <span
   data-x="js-HostPromiseRejectionTracker">HostPromiseRejectionTracker</span>(<var>promise</var>,
   <var>operation</var>) abstract operation. User agents must use the following implementation:
-  <ref spec=JAVASCRIPT></p>
+  <ref>JAVASCRIPT</ref></p>
 
   <ol>
    <li><p>Let <var>script</var> be the <span>running script</span>.</p></li>
@@ -105309,8 +105344,8 @@ dictionary <dfn dictionary>PromiseRejectionEventInit</dfn> : <span>EventInit</sp
   <p>JavaScript contains an <span>implementation-defined</span> <span
   data-x="js-HostCallJobCallback">HostCallJobCallback</span>(<var>callback</var>, <var>V</var>,
   <var>argumentsList</var>) abstract operation to let hosts restore state when invoking JavaScript
-  callbacks from inside tasks. User agents must use the following implementation: <ref
-  spec=JAVASCRIPT></p>
+  callbacks from inside tasks. User agents must use the following implementation:
+  <ref>JAVASCRIPT</ref></p>
 
   <ol>
    <li><p>Let <var>incumbent settings</var> be
@@ -105367,7 +105402,7 @@ dictionary <dfn dictionary>PromiseRejectionEventInit</dfn> : <span>EventInit</sp
 
   <p>Cleanup actions do not take place interspersed with synchronous JavaScript execution, but
   rather happen in queued <span data-x="concept-task">tasks</span>. User agents must use the
-  following implementation: <ref spec=JAVASCRIPT></p>
+  following implementation: <ref>JAVASCRIPT</ref></p>
 
   <ol>
    <li><p>Let <var>global</var> be <var>finalizationRegistry</var>.[[Realm]]'s <span>global
@@ -105409,8 +105444,8 @@ dictionary <dfn dictionary>PromiseRejectionEventInit</dfn> : <span>EventInit</sp
   <p>JavaScript contains an <span>implementation-defined</span> <span
   data-x="js-HostEnqueueGenericJob">HostEnqueueGenericJob</span>(<var>job</var>, <var>realm</var>)
   abstract operation to perform generic jobs in a particular realm (e.g., resolve promises resulting
-  from <code>Atomics.waitAsync</code>). User agents must use the following implementation: <ref
-  spec=JAVASCRIPT></p>
+  from <code>Atomics.waitAsync</code>). User agents must use the following implementation:
+  <ref>JAVASCRIPT</ref></p>
 
   <ol>
    <li><p>Let <var>global</var> be <var>realm</var>'s <span data-x="concept-realm-global">global
@@ -105428,7 +105463,7 @@ dictionary <dfn dictionary>PromiseRejectionEventInit</dfn> : <span>EventInit</sp
   <p>JavaScript contains an <span>implementation-defined</span> <span
   data-x="js-HostEnqueuePromiseJob">HostEnqueuePromiseJob</span>(<var>job</var>, <var>realm</var>)
   abstract operation to schedule Promise-related operations. HTML schedules these operations in the
-  microtask queue. User agents must use the following implementation: <ref spec=JAVASCRIPT></p>
+  microtask queue. User agents must use the following implementation: <ref>JAVASCRIPT</ref></p>
 
   <ol>
    <li>
@@ -105496,7 +105531,7 @@ dictionary <dfn dictionary>PromiseRejectionEventInit</dfn> : <span>EventInit</sp
   data-x="js-HostEnqueueTimeoutJob">HostEnqueueTimeoutJob</span>(<var>job</var>,
   <var>milliseconds</var>) abstract operation to schedule an operation to be performed after a
   timeout. HTML schedules these operations using <span>run steps after a timeout</span>. User agents
-  must use the following implementation: <ref spec=JAVASCRIPT></p>
+  must use the following implementation: <ref>JAVASCRIPT</ref></p>
 
   <ol>
    <li><p>Let <var>global</var> be <var>realm</var>'s <span data-x="concept-realm-global">global
@@ -105515,8 +105550,8 @@ dictionary <dfn dictionary>PromiseRejectionEventInit</dfn> : <span>EventInit</sp
   <p>JavaScript contains an <span>implementation-defined</span> <span
   data-x="js-HostMakeJobCallback">HostMakeJobCallback</span>(<var>callable</var>) abstract operation
   to let hosts attach state to JavaScript callbacks that are called from inside <span
-  data-x="concept-task">task</span>s. User agents must use the following implementation: <ref
-  spec=JAVASCRIPT></p>
+  data-x="concept-task">task</span>s. User agents must use the following implementation:
+  <ref>JAVASCRIPT</ref></p>
 
   <ol>
    <li><p>Let <var>incumbent settings</var> be the <span>incumbent settings object</span>.</p></li>
@@ -105584,7 +105619,7 @@ dictionary <dfn dictionary>PromiseRejectionEventInit</dfn> : <span>EventInit</sp
   of their processing model. This specification defines the rest of their processing model: how the
   module system is bootstrapped, via the <code>script</code> element with <code
   data-x="attr-script-type">type</code> attribute set to "<code data-x="">module</code>", and how
-  modules are fetched, resolved, and executed. <ref spec="JAVASCRIPT"></p>
+  modules are fetched, resolved, and executed. <ref>JAVASCRIPT</ref></p>
 
   <p class="note">Although the JavaScript specification speaks in terms of "scripts" versus
   "modules", in general this specification speaks in terms of <span data-x="classic script">classic
@@ -105725,7 +105760,7 @@ import "https://example.com/foo/../module2.mjs";</code></pre>
 
   <p>JavaScript contains an <span>implementation-defined</span> <span
   data-x="js-HostGetImportMetaProperties">HostGetImportMetaProperties</span> abstract operation.
-  User agents must use the following implementation: <ref spec=JAVASCRIPT></p>
+  User agents must use the following implementation: <ref>JAVASCRIPT</ref></p>
 
   <ol>
    <li><p>Let <var>moduleScript</var> be <var>moduleRecord</var>.[[HostDefined]].</p></li>
@@ -105765,8 +105800,8 @@ import "https://example.com/foo/../module2.mjs";</code></pre>
 
   <p>The <cite>Import Attributes</cite> proposal contains an <span>implementation-defined</span>
   <span data-x="js-HostGetSupportedImportAttributes">HostGetSupportedImportAttributes</span>
-  abstract operation. User agents must use the following implementation: <ref
-  spec=JSIMPORTATTRIBUTES></p>
+  abstract operation. User agents must use the following implementation:
+  <ref>JSIMPORTATTRIBUTES</ref></p>
 
   <ol>
    <li><p>Return « "<code data-x="">type</code>" ».</p></li>
@@ -105777,7 +105812,7 @@ import "https://example.com/foo/../module2.mjs";</code></pre>
 
   <p>JavaScript contains an <span>implementation-defined</span> <span
   data-x="js-HostLoadImportedModule">HostLoadImportedModule</span> abstract operation. User agents
-  must use the following implementation: <ref spec=JAVASCRIPT></p>
+  must use the following implementation: <ref>JAVASCRIPT</ref></p>
 
   <ol>
    <li><p>Let <var>settingsObject</var> be the <span>current settings object</span>.</p></li>
@@ -106257,8 +106292,7 @@ import "https://example.com/foo/../module2.mjs";</code></pre>
 
    <li><p>Let <var>hasARenderingOpportunity</var> be false.</p></li>
 
-   <li><p>Let <var>now</var> be the <span>unsafe shared current time</span>. <ref
-   spec=HRT></p></li>
+   <li><p>Let <var>now</var> be the <span>unsafe shared current time</span>. <ref>HRT</ref></p></li>
 
    <li>
     <p>If <var>oldestTask</var> is not null, then:</p>
@@ -106392,20 +106426,21 @@ import "https://example.com/foo/../module2.mjs";</code></pre>
      is a <span>top-level traversable</span>.</p></li>
 
      <li><p>For each <span>fully active</span> <code>Document</code> in <var>docs</var>, <span>run
-     the resize steps</span> for that <code>Document</code>. <ref spec=CSSOMVIEW></p></li>
+     the resize steps</span> for that <code>Document</code>. <ref>CSSOMVIEW</ref></p></li>
 
      <li><p>For each <span>fully active</span> <code>Document</code> in <var>docs</var>, <span>run
-     the scroll steps</span> for that <code>Document</code>. <ref spec=CSSOMVIEW></p></li>
+     the scroll steps</span> for that <code>Document</code>. <ref>CSSOMVIEW</ref></p></li>
 
      <li><p>For each <span>fully active</span> <code>Document</code> in <var>docs</var>,
-     <span>evaluate media queries and report changes</span> for that <code>Document</code>. <ref spec=CSSOMVIEW></p></li>
+     <span>evaluate media queries and report changes</span> for that <code>Document</code>.
+     <ref>CSSOMVIEW</ref></p></li>
 
      <li><p>For each <span>fully active</span> <code>Document</code> in <var>docs</var>,
      <span>update animations and send events</span> for that <code>Document</code>, passing in
-     <var>now</var> as the timestamp. <ref spec=WEBANIMATIONS></p></li>
+     <var>now</var> as the timestamp. <ref>WEBANIMATIONS</ref></p></li>
 
      <li><p>For each <span>fully active</span> <code>Document</code> in <var>docs</var>, <span>run
-     the fullscreen steps</span> for that <code>Document</code>. <ref spec=FULLSCREEN></p></li>
+     the fullscreen steps</span> for that <code>Document</code>. <ref>FULLSCREEN</ref></p></li>
 
      <li><p>For each <span>fully active</span> <code>Document</code> in <var>docs</var>, if
      the user agent detects that the backing storage associated with a
@@ -106481,8 +106516,8 @@ import "https://example.com/foo/../module2.mjs";</code></pre>
            The intent of this step is for the initial viewport proximity
            determination, which takes effect immediately, to be reflected in the
            style and layout calculation which is carried out in a previous step
-           of this loop. Proximity determinations other than the initial one
-           take effect at the next rendering opportunity. <ref spec=CSSCONTAIN>
+           of this loop. Proximity determinations other than the initial one take effect at the next
+           rendering opportunity. <ref>CSSCONTAIN</ref>
           </div>
          </li>
 
@@ -106533,12 +106568,12 @@ import "https://example.com/foo/../module2.mjs";</code></pre>
      </li>
 
      <li><p>For each <span>fully active</span> <code>Document</code> in <var>docs</var>,
-     <span>perform pending transition operations</span> for that <code>Document</code>. <ref
-     spec=CSSVIEWTRANSITIONS></p></li>
+     <span>perform pending transition operations</span> for that <code>Document</code>.
+     <ref>CSSVIEWTRANSITIONS</ref></p></li>
 
       <li><p>For each <span>fully active</span> <code>Document</code> in <var>docs</var>, <span>run
      the update intersection observations steps</span> for that <code>Document</code>, passing in
-     <var>now</var> as the timestamp. <ref spec=INTERSECTIONOBSERVER></p></li>
+     <var>now</var> as the timestamp. <ref>INTERSECTIONOBSERVER</ref></p></li>
 
      <li><p>Invoke the <span>mark paint timing</span> algorithm for each <code>Document</code>
      object in <var>docs</var>.</p></li>
@@ -106635,8 +106670,7 @@ import "https://example.com/foo/../module2.mjs";</code></pre>
      <var>computeDeadline</var>, <span data-x="coarsen time">coarsened</span> given <var>win</var>'s
      <span>relevant settings object</span>'s <span
      data-x="concept-settings-object-cross-origin-isolated-capability">cross-origin isolated
-     capability</span>.
-     <ref spec=REQUESTIDLECALLBACK></p></li>
+     capability</span>. <ref>REQUESTIDLECALLBACK</ref></p></li>
     </ol>
    </li>
 
@@ -106653,8 +106687,8 @@ import "https://example.com/foo/../module2.mjs";</code></pre>
       <!-- TODO: grab the realm from the task. https://github.com/whatwg/html/issues/4342 -->
 
       <ol>
-       <li><p>Let <var>now</var> be the <span>current high resolution time</span> given
-       the <code>DedicatedWorkerGlobalScope</code>. <ref spec=HRT></p></li>
+       <li><p>Let <var>now</var> be the <span>current high resolution time</span> given the
+       <code>DedicatedWorkerGlobalScope</code>. <ref>HRT</ref></p></li>
 
        <li><p><span>Run the animation frame callbacks</span> for that
        <code>DedicatedWorkerGlobalScope</code>, passing in <var>now</var> as the
@@ -106988,7 +107022,7 @@ import "https://example.com/foo/../module2.mjs";</code></pre>
     <p>Events sent in response to user input (e.g. <code
     data-x="event-click">click</code> events) must be fired using <span
     data-x="concept-task">tasks</span> <span data-x="queue a task">queued</span> with the <span>user
-    interaction task source</span>. <ref spec=UIEVENTS></p> <!-- user
+    interaction task source</span>. <ref>UIEVENTS</ref></p> <!-- user
     interaction events integration point -->
    </dd>
 
@@ -107047,7 +107081,7 @@ import "https://example.com/foo/../module2.mjs";</code></pre>
   <p>You can, however, manipulate specification-level data structures and values from
   <cite>Infra</cite>, as those are realm-agnostic. They are never directly exposed to JavaScript without
   a specific conversion taking place (often <span data-x="concept-idl-convert">via Web IDL</span>).
-  <ref spec=INFRA> <ref spec=WEBIDL></p>
+  <ref>INFRA</ref> <ref>WEBIDL</ref></p>
 
   <p>To affect the world of observable JavaScript objects, then, you must <span>queue a global
   task</span> to perform any such manipulations. This ensures your steps are properly interleaved
@@ -107211,7 +107245,7 @@ import "https://example.com/foo/../module2.mjs";</code></pre>
 
   <p>Many objects can have <dfn export data-lt="event handler">event handlers</dfn> specified. These
   act as non-capture <span data-x="event listener">event listeners</span> for the object on which
-  they are specified. <ref spec=DOM></p>
+  they are specified. <ref>DOM</ref></p>
 
   <div w-nodev>
 
@@ -107393,7 +107427,7 @@ import "https://example.com/foo/../module2.mjs";</code></pre>
 
   <p>The following <span data-x="concept-element-attributes-change-ext">attribute change
   steps</span> are used to synchronize between <span>event handler content attributes</span> and
-  <span>event handlers</span>: <ref spec=DOM></p>
+  <span>event handlers</span>: <ref>DOM</ref></p>
 
   <ol>
    <li><p>If <var>namespace</var> is not null, or <var>localName</var> is not the name of an <span
@@ -107415,7 +107449,7 @@ import "https://example.com/foo/../module2.mjs";</code></pre>
      <li><p>If the <span>Should element's inline behavior be blocked by Content Security
      Policy?</span> algorithm returns "<code data-x="">Blocked</code>" when executed upon
      <var>element</var>, "<code data-x="">script attribute</code>", and <var>value</var>, then
-     return. <ref spec=CSP></p></li>
+     return. <ref>CSP</ref></p></li>
 
      <li><p>Let <var>handlerMap</var> be <var>eventTarget</var>'s <span>event handler
      map</span>.</p></li>
@@ -107437,7 +107471,7 @@ import "https://example.com/foo/../module2.mjs";</code></pre>
   <p class="note">Per the DOM Standard, these steps are run even if <var>oldValue</var> and
   <var>value</var> are identical (setting an attribute to its current value), but <em>not</em> if
   <var>oldValue</var> and <var>value</var> are both null (removing an attribute that doesn't
-  currently exist). <ref spec=DOM></p>
+  currently exist). <ref>DOM</ref></p>
 
   <hr>
 
@@ -107500,7 +107534,7 @@ import "https://example.com/foo/../module2.mjs";</code></pre>
 
     <p>The <code data-x="dom-EventListener">EventListener</code>'s <span>callback context</span> can
     be arbitrary; it does not impact the steps of <span>the event handler processing
-    algorithm</span>. <ref spec=DOM></p>
+    algorithm</span>. <ref>DOM</ref></p>
 
     <p class="note">The callback is emphatically <em>not</em> the <span data-x="event
     handlers">event handler</span> itself. Every event handler ends up registering the same
@@ -107626,7 +107660,7 @@ import "https://example.com/foo/../module2.mjs";</code></pre>
       <var>event</var>'s <code data-x="dom-ErrorEvent-error">error</code> attribute, and with the <i
       data-x="dfn-callback-this-value">callback this value</i> set to <var>event</var>'s <code
       data-x="dom-Event-currentTarget">currentTarget</code>. Let <var>return value</var> be the
-      callback's return value. <ref spec=WEBIDL></p>
+      callback's return value. <ref>WEBIDL</ref></p>
      </dd>
 
      <dt>Otherwise</dt>
@@ -107636,7 +107670,7 @@ import "https://example.com/foo/../module2.mjs";</code></pre>
       with one argument, the value of which is the <code>Event</code> object <var>event</var>,
       with the <i data-x="dfn-callback-this-value">callback this value</i> set to <var>event</var>'s
       <code data-x="dom-Event-currentTarget">currentTarget</code>. Let <var>return value</var> be
-      the callback's return value. <ref spec=WEBIDL></p>
+      the callback's return value. <ref>WEBIDL</ref></p>
      </dd>
     </dl>
 
@@ -108252,7 +108286,7 @@ interface mixin <dfn interface>WindowEventHandlers</dfn> {
 
   <p>Certain operations and methods are defined as firing events on elements. For example, the <code
   data-x="dom-click">click()</code> method on the <code>HTMLElement</code> interface is defined as
-  firing a <code data-x="event-click">click</code> event on the element. <ref spec=UIEVENTS></p>
+  firing a <code data-x="event-click">click</code> event on the element. <ref>UIEVENTS</ref></p>
 
   <p><dfn data-x="fire a synthetic pointer event">Firing a synthetic pointer event named
   <var>e</var></dfn> at <var>target</var>, with an optional <var>not trusted flag</var>, means
@@ -108339,8 +108373,8 @@ interface mixin <dfn interface>WindowOrWorkerGlobalScope</dfn> {
 
   <dl class="domintro">
    <dt><code data-x="">self.<span subdfn data-x="dom-isSecureContext">isSecureContext</span></code></dt>
-   <dd><p>Returns whether or not this global object represents a <span>secure context</span>. <ref
-   spec=SECURE-CONTEXTS></p></dd>
+   <dd><p>Returns whether or not this global object represents a <span>secure context</span>.
+   <ref>SECURE-CONTEXTS</ref></p></dd>
 
    <dt><code data-x="">self.<span subdfn data-x="dom-origin">origin</span></code></dt>
    <dd><p>Returns the global object's <span>origin</span>, serialized as string.</p></dd>
@@ -108629,7 +108663,7 @@ document.body.appendChild(frame)</code></pre>
   <span>overload resolution algorithm</span> rules, which would throw a <code>TypeError</code>
   exception for such calls had the arguments not been there. <a
   href="https://github.com/whatwg/webidl/issues/581">whatwg/webidl issue #581</a> investigates
-  changing the algorithm to allow for their removal. <ref spec=WEBIDL></p>
+  changing the algorithm to allow for their removal. <ref>WEBIDL</ref></p>
 
   <p>The <dfn method for="Document" data-x="dom-document-open-window"><code>open(<var>url</var>,
   <var>name</var>, <var>features</var>)</code></dfn> method must run these steps:</p>
@@ -109984,7 +110018,7 @@ interface <dfn interface>Navigator</dfn> {
    <dt><dfn attribute for="NavigatorLanguage"><code
    data-x="dom-navigator-language">language</code></dfn></dt> <dd><p>Must return a valid BCP 47
    language tag representing either <span>a plausible language</span> or the user's most preferred
-   language. <ref spec=BCP47></p></dd>
+   language. <ref>BCP47</ref></p></dd>
 
    <dt><dfn attribute for="NavigatorLanguage"><code data-x="dom-navigator-languages">languages</code></dfn></dt>
    <dd>
@@ -109992,7 +110026,7 @@ interface <dfn interface>Navigator</dfn> {
     or more <span data-x="a plausible language">plausible languages</span>, or the user's preferred
     languages, ordered by preference with the most preferred language first. The same object must be
     returned until the user agent needs to return different values, or values in a different order.
-    <ref spec=BCP47></p>
+    <ref>BCP47</ref></p>
 
     <p>Whenever the user agent needs to make the <code
     data-x="dom-navigator-languages">navigator.languages</code> attribute of a <code>Window</code>
@@ -110016,7 +110050,7 @@ interface <dfn interface>Navigator</dfn> {
    <li>If the user is not using a service that obfuscates the user's point of origin (e.g. the Tor
    anonymity network), then the value that is least likely to distinguish the user from other users
    with similar origins (e.g. from the same IP address block) is the language used by the majority
-   of such users. <ref spec=TOR></li>
+   of such users. <ref>TOR</ref></li>
 
    <li>If the user is using an anonymizing service, then the value "<code data-x="">en-US</code>" is
    suggested; if all users of the service use that same value, that reduces the possibility of
@@ -110111,7 +110145,7 @@ interface <dfn interface>Navigator</dfn> {
     <p>Registers a handler for <var>scheme</var> at <var>url</var>. For example, an online telephone
     messaging service could register itself as a handler of the <code data-x="sms
     protocol">sms:</code> scheme, so that if the user clicks on such a link, they are given the
-    opportunity to use that web site. <ref spec=SMS></p>
+    opportunity to use that web site. <ref>SMS</ref></p>
 
     <p>The string "<code data-x="">%s</code>" in <var>url</var> is used as a placeholder for where
     to put the URL of the content to be handled.</p>
@@ -110450,7 +110484,7 @@ interface <dfn interface>Navigator</dfn> {
    <p>The <dfn attribute for="NavigatorCookies"><code
    data-x="dom-navigator-cookieEnabled">cookieEnabled</code></dfn> attribute must return true if the
    user agent attempts to handle cookies according to <cite>HTTP State Management Mechanism</cite>,
-   and false if it ignores cookie change requests. <ref spec=COOKIES></p>
+   and false if it ignores cookie change requests. <ref>COOKIES</ref></p>
 
   </div>
 
@@ -111213,7 +111247,7 @@ dictionary <dfn dictionary>ImageBitmapOptions</dfn> {
     <var>options</var> is "<dfn enum-value for="ImageOrientation"><code
     data-x="dom-ImageOrientation-flipY">flipY</code></dfn>", <var>output</var> must be flipped
     vertically, disregarding any image orientation metadata of the source (such as EXIF metadata),
-    if any. <ref spec=EXIF></p>
+    if any. <ref>EXIF</ref></p>
 
     <p class="note">If the value is "<dfn enum-value for="ImageOrientation"><code
     data-x="dom-ImageOrientation-from-image">from-image</code></dfn>", no extra step is needed.</p>
@@ -111517,14 +111551,14 @@ self.onmessage = function(ev) {
   id="ping-and-pong-frames"></span><span id="the-closeevent-interface"></span><span
   id="garbage-collection-2"></span><span id="websocket"></span><span id="binarytype"></span><span
   id="closeevent"></span><span id="closeeventinit"></span>The <code>WebSocket</code> interface used
-  to be defined here. It is now defined in <cite>WebSockets</cite>. <ref spec=WEBSOCKETS></p>
+  to be defined here. It is now defined in <cite>WebSockets</cite>. <ref>WEBSOCKETS</ref></p>
 
   <h3>The <code>MessageEvent</code> interface</h3>
 
   <p>Messages in <span>server-sent events</span>, <span>cross-document messaging</span>,
   <span>channel messaging</span>, <span>broadcast channels</span>, and <cite>WebSockets</cite> use
   the <code>MessageEvent</code> interface for their <code data-x="event-message">message</code>
-  events: <ref spec=WEBSOCKETS></p>
+  events: <ref>WEBSOCKETS</ref></p>
 
   <pre><code class="idl">[Exposed=(Window,Worker,AudioWorklet)]
 interface <dfn interface>MessageEvent</dfn> : <span>Event</span> {
@@ -111623,8 +111657,8 @@ typedef (<span>WindowProxy</span> or <span>MessagePort</span> or <span>ServiceWo
   data-x="dom-MessageEvent-initMessageEvent">initMessageEvent(<var>type</var>, <var>bubbles</var>,
   <var>cancelable</var>, <var>data</var>, <var>origin</var>, <var>lastEventId</var>,
   <var>source</var>, <var>ports</var>)</code></dfn> method must initialize the event in a manner
-  analogous to the similarly-named <code data-x="dom-Event-initEvent">initEvent()</code>
-  method. <ref spec=DOM></p>
+  analogous to the similarly-named <code data-x="dom-Event-initEvent">initEvent()</code> method.
+  <ref>DOM</ref></p>
 
   </div>
 
@@ -112054,7 +112088,7 @@ dictionary <dfn dictionary>EventSourceInit</dfn> {
   <p>This event stream format's <span>MIME type</span> is <code>text/event-stream</code>.</p>
 
   <p>The event stream format is as described by the <code data-x="">stream</code> production of the
-  following ABNF, the character set for which is Unicode. <ref spec=ABNF></p>
+  following ABNF, the character set for which is Unicode. <ref>ABNF</ref></p>
 
   <pre><code data-x="" class="abnf">stream        = [ bom ] *event
 event         = *( comment / field ) end-of-line
@@ -112073,7 +112107,7 @@ name-char     = %x0000-0009 / %x000B-000C / %x000E-0039 / %x003B-10FFFF
 any-char      = %x0000-0009 / %x000B-000C / %x000E-10FFFF
                 ; a <span>scalar value</span> other than U+000A LINE FEED (LF) or U+000D CARRIAGE RETURN (CR)</code></pre>
 
-  <p>Event streams in this format must always be encoded as UTF-8. <ref spec=ENCODING></p>
+  <p>Event streams in this format must always be encoded as UTF-8. <ref>ENCODING</ref></p>
 
   <p>Lines must be separated by either a U+000D CARRIAGE RETURN U+000A LINE FEED (CRLF) character
   pair, a single U+000A LINE FEED (LF) character, or a single U+000D CARRIAGE RETURN (CR)
@@ -113985,7 +114019,7 @@ worker.port.postMessage({ foo: 'structured', bar: ['data', 'also', 'possible']})
   from a dedicated worker to multiple other browsing contexts or workers. Shared workers, on the
   other hand, are named, and once created any script running in the same <span>origin</span> can
   obtain a reference to that worker and communicate with it. <cite>Service Workers</cite> defines a
-  third kind. <ref spec="SW"></p>
+  third kind. <ref>SW</ref></p>
 
 
   <h4>The global scope</h4>
@@ -114489,7 +114523,7 @@ interface <dfn interface>SharedWorkerGlobalScope</dfn> : <span>WorkerGlobalScope
 
        <li><p>If the <span>Run CSP initialization for a global object</span> algorithm returns
        "<code data-x="">Blocked</code>" when executed upon <var>worker global scope</var>, set
-       <var>response</var> to a <span>network error</span>. <ref spec=CSP></p></li>
+       <var>response</var> to a <span>network error</span>. <ref>CSP</ref></p></li>
 
        <li>
         <p>If <var>worker global scope</var>'s <span
@@ -115182,7 +115216,7 @@ interface <dfn interface>SharedWorker</dfn> : <span>EventTarget</span> {
        <li><p>If <var>workerIsSecureContext</var> is not <var>callerIsSecureContext</var>, then
        <span>queue a task</span> to <span data-x="concept-event-fire">fire an event</span> named
        <code data-x="event-error">error</code> at <var>worker</var> and abort these steps.
-       <ref spec=SECURE-CONTEXTS></p></li>
+       <ref>SECURE-CONTEXTS</ref></p></li>
 
        <li><p>Associate <var>worker</var> with <var>worker global scope</var>.</p></li>
 
@@ -115306,7 +115340,7 @@ interface <dfn interface>SharedWorker</dfn> : <span>EventTarget</span> {
 
   <p class="note"><cite>Service Workers</cite> is an example of a specification that runs this
   algorithm with its own <span data-x="fetching-scripts-perform-fetch">perform the fetch
-  hook</span>. <ref spec=SW></p>
+  hook</span>. <ref>SW</ref></p>
 
   </div>
 
@@ -115536,7 +115570,7 @@ interface <dfn interface>WorkerLocation</dfn> {
   defined in <cite>CSS Painting API</cite>, provide extension points intended for stateless,
   idempotent, and short-running computations, which have special considerations as described in the
   next couple of sections. Others, such as those defined in <cite>Web Audio API</cite>, are used for
-  stateful, long-running operations. <ref spec=CSSPAINT> <ref spec=WEBAUDIO></p>
+  stateful, long-running operations. <ref>CSSPAINT</ref> <ref>WEBAUDIO</ref></p>
 
   <h4 id="worklets-idempotent">Code idempotence</h4>
 
@@ -115635,7 +115669,7 @@ interface <dfn interface>WorkerLocation</dfn> {
   <p class="note">"<code data-x="">fakeworklet</code>" is not actually a valid <span
   data-x="concept-request-destination">destination</span> per <cite>Fetch</cite>. But this
   illustrates how real worklets would generally have their own worklet-type-specific destination.
-  <ref spec=FETCH></p>
+  <ref>FETCH</ref></p>
 
   <div w-nodev>
 
@@ -116339,7 +116373,7 @@ dictionary <dfn dictionary>WorkletOptions</dfn> {
   <!-- NON-NORMATIVE SECTION -->
 
   <p>This specification introduces two related mechanisms, similar to HTTP session cookies, for
-  storing name-value pairs on the client side. <ref spec=COOKIES></p>
+  storing name-value pairs on the client side. <ref>COOKIES</ref></p>
 
   <p>The first is designed for scenarios where the user is carrying out a single transaction, but
   could be carrying out multiple transactions in different windows at the same time.</p>
@@ -116833,7 +116867,7 @@ dictionary <dfn dictionary>StorageEventInit</dfn> : <span>EventInit</span> {
   data-x="dom-StorageEvent-initStorageEvent">initStorageEvent(<var>type</var>, <var>bubbles</var>,
   <var>cancelable</var>, <var>key</var>, <var>oldValue</var>, <var>newValue</var>, <var>url</var>,
   <var>storageArea</var>)</code></dfn> method must initialize the event in a manner analogous to the
-  similarly-named <code data-x="dom-Event-initEvent">initEvent()</code> method. <ref spec=DOM></p>
+  similarly-named <code data-x="dom-Event-initEvent">initEvent()</code> method. <ref>DOM</ref></p>
 
   </div>
 
@@ -116884,7 +116918,7 @@ dictionary <dfn dictionary>StorageEventInit</dfn> : <span>EventInit</span> {
     stored in the local storage area, sites can defeat those attempts by using the two features as
     redundant backup for each other. User agents should present the interfaces for clearing these in
     a way that helps users to understand this possibility and enables them to delete data in all
-    persistent storage features simultaneously. <ref spec=COOKIES></p>
+    persistent storage features simultaneously. <ref>COOKIES</ref></p>
    </dd>
 
    <dt>Site-specific safelisting of access to local storage areas</dt> <dd>
@@ -118256,8 +118290,7 @@ dictionary <dfn dictionary>StorageEventInit</dfn> : <span>EventInit</span> {
       syntactic structure or be treated as an HTML-like comment, if the scripting language supports
       them (e.g., parsing rules for HTML-like comments can be found in Annex B of the JavaScript
       specification). The common reason for this error is a violation of the <span data-x="script
-      content restrictions">restrictions for contents of <code>script</code> elements</span>. <ref
-      spec=JAVASCRIPT></p>
+      content restrictions">restrictions for contents of <code>script</code> elements</span>. <ref>JAVASCRIPT</ref></p>
 
     <tr>
      <td><dfn data-x="parse-error-eof-in-tag">eof-in-tag</dfn>
@@ -118622,8 +118655,8 @@ dictionary <dfn dictionary>StorageEventInit</dfn> : <span>EventInit</span> {
   encoding</i>, which the user agent uses to decode the bytes into characters.</p>
 
   <p class="note">For XML documents, the algorithm user agents are required to use to determine the
-  character encoding is given by <cite>XML</cite>. This section does not apply to XML
-  documents. <ref spec=XML></p>
+  character encoding is given by <cite>XML</cite>. This section does not apply to XML documents.
+  <ref>XML</ref></p>
 
   <p>Usually, the <span>encoding sniffing algorithm</span> defined below is used to determine the
   character encoding.</p>
@@ -118637,7 +118670,7 @@ dictionary <dfn dictionary>StorageEventInit</dfn> : <span>EventInit</span> {
 
   <p class="note">Bytes or sequences of bytes in the original byte stream that did not conform to
   the Encoding standard (e.g. invalid UTF-8 byte sequences in a UTF-8 input byte stream) are errors
-  that conformance checkers are expected to report. <ref spec=ENCODING></p>
+  that conformance checkers are expected to report. <ref>ENCODING</ref></p>
 
   <p class="warning">The decoder algorithms describe how to handle invalid input; for security
   reasons, it is imperative that those rules be followed precisely. Differences in how invalid byte
@@ -118765,7 +118798,7 @@ dictionary <dfn dictionary>StorageEventInit</dfn> : <span>EventInit</span> {
     autodetection succeeds in determining a character encoding, and that encoding is a supported
     encoding, then return that encoding, with the <span
     data-x="concept-encoding-confidence">confidence</span> <i>tentative</i>.
-    <ref spec=UNIVCHARDET></p>
+    <ref>UNIVCHARDET</ref></p>
 
     <p class="note">User agents are generally discouraged from attempting to autodetect encodings
     for resources obtained over the network, since doing so involves inherently non-interoperable
@@ -118777,8 +118810,8 @@ dictionary <dfn dictionary>StorageEventInit</dfn> : <span>EventInit</span> {
     file system that contain bytes with values greater than 0x7F which match the UTF-8 pattern are
     very likely to be UTF-8, while documents with byte sequences that do not match it are very
     likely not. When a user agent can examine the whole file, rather than just the preamble,
-    detecting for UTF-8 specifically can be especially effective. <ref spec=PPUTF8> <ref
-    spec=UTF8DET></p>
+    detecting for UTF-8 specifically can be especially effective. <ref>PPUTF8</ref>
+    <ref>UTF8DET</ref></p>
    </li>
 
    <li>
@@ -118793,7 +118826,8 @@ dictionary <dfn dictionary>StorageEventInit</dfn> : <span>EventInit</span> {
     <p>In other environments, the default encoding is typically dependent on the user's locale (an
     approximation of the languages, and thus often encodings, of the pages that the user is likely
     to frequent). The following table gives suggested defaults based on the user's locale, for
-    compatibility with legacy content. Locales are identified by BCP 47 language tags. <ref spec=BCP47> <ref spec=ENCODING></p>
+    compatibility with legacy content. Locales are identified by BCP 47 language tags.
+    <ref>BCP47</ref> <ref>ENCODING</ref></p>
 
     <!-- based on three sources:
           1. Mozilla 1.9.1 localizations: http://mxr.mozilla.org/l10n-mozilla1.9.1/find?string=global%2Fintl.properties&tree=l10n-mozilla1.9.1&hint= (though this data was apparently misinterpreted in some cases)
@@ -119596,8 +119630,8 @@ dictionary <dfn dictionary>StorageEventInit</dfn> : <span>EventInit</span> {
 
   <p class="note">The above prohibits supporting, for example, CESU-8, UTF-7, BOCU-1, SCSU, EBCDIC,
   and UTF-32. This specification does not make any attempt to support prohibited encodings in its
-  algorithms; support and use of prohibited encodings would thus lead to unexpected behavior. <ref
-  spec=CESU8> <ref spec=UTF7> <ref spec=BOCU1> <ref spec=SCSU></p>
+  algorithms; support and use of prohibited encodings would thus lead to unexpected behavior.
+  <ref>CESU8</ref> <ref>UTF7</ref> <ref>BOCU1</ref> <ref>SCSU</ref></p>
 
 
   <h5>Changing the encoding while parsing</h5>
@@ -123140,7 +123174,7 @@ document.body.appendChild(text);
   <p id="mutation-during-parsing">DOM mutation events must not fire for changes caused by the UA
   parsing the document. This includes the parsing of any content inserted using <code
   data-x="dom-document-write">document.write()</code> and <code
-  data-x="dom-document-writeln">document.writeln()</code> calls. <ref spec=UIEVENTS></p>
+  data-x="dom-document-writeln">document.writeln()</code> calls. <ref>UIEVENTS</ref></p>
 
   <p>However, <span>mutation observers</span> <em>do</em> fire, as required by <cite>DOM</cite>
   .</p>
@@ -126602,7 +126636,7 @@ document.body.appendChild(text);
 
     <p>If the <span>active speculative HTML parser</span> is null and the user agent supports SVG,
     then <a href="https://www.w3.org/TR/SVGMobile12/script.html#ScriptContentProcessing">Process the
-    SVG <code data-x="">script</code> element</a> according to the SVG rules. <ref spec=SVG></p>
+    SVG <code data-x="">script</code> element</a> according to the SVG rules. <ref>SVG</ref></p>
 
     <p class="note">Even if this causes <span data-x="dom-document-write">new characters to be
     inserted into the tokenizer</span>, the parser will not be executed reentrantly, since the
@@ -126885,8 +126919,7 @@ document.body.appendChild(text);
 
      <li>A <code>meta</code> element whose <code data-x="attr-meta-name">name</code> attribute is an
      <span>ASCII case-insensitive</span> match for "<code data-x="">viewport</code>". (This can
-     affect whether a media query list <span>matches the environment</span>.) <ref
-     spec=CSSDEVICEADAPT></li>
+     affect whether a media query list <span>matches the environment</span>.) <ref>CSSDEVICEADAPT</ref></li>
     </ul>
    </li>
 
@@ -127916,8 +127949,7 @@ console.assert(container.firstChild instanceof SuperP);
   characters listed above.</i></p>
 
   <p class="note">The character reference names originate from <cite>XML Entity Definitions for
-  Characters</cite>, though only the above is considered normative. <ref
-  spec=XMLENTITY></p>
+  Characters</cite>, though only the above is considered normative. <ref>XMLENTITY</ref></p>
 
   <p class="note">This list is static and <a
   href="https://github.com/whatwg/html/blob/main/FAQ.md#html-should-add-more-named-character-references">will
@@ -127940,8 +127972,8 @@ console.assert(container.firstChild instanceof SuperP);
   specification does not use that term (among other reasons, because no such term is used for the
   HTML syntaxes of MathML and SVG).</p>
 
-  <p>The syntax for XML is defined in <cite>XML</cite> and <cite>Namespaces in XML</cite>. <ref spec=XML>
-  <ref spec=XMLNS></p>
+  <p>The syntax for XML is defined in <cite>XML</cite> and <cite>Namespaces in XML</cite>. <ref>XML</ref>
+  <ref>XMLNS</ref></p>
 
   <p>This specification does not define any syntax-level requirements beyond those defined for XML
   proper.</p>
@@ -127987,8 +128019,8 @@ console.assert(container.firstChild instanceof SuperP);
   were individually appended and set respectively so as to trigger rules in this specification
   regarding what happens when an element is inserted into a document or has its attributes set, and
   <cite>DOM</cite>'s requirements regarding <span>mutation observers</span> mean that
-  mutation observers <em>are</em> fired (unlike mutation events). <ref spec=XML> <ref spec=XMLNS>
-  <ref spec=DOM> <ref spec=UIEVENTS></p>
+  mutation observers <em>are</em> fired (unlike mutation events). <ref>XML</ref> <ref>XMLNS</ref>
+  <ref>DOM</ref> <ref>UIEVENTS</ref></p>
 
   <p>Between the time an element's start tag is parsed and the time either the element's end tag is
   parsed or the parser detects a well-formedness error, the user agent must act as if the element
@@ -128001,7 +128033,7 @@ console.assert(container.firstChild instanceof SuperP);
   when retrieving an external entity: the public identifiers given in the following list all
   correspond to <a href="<!--BOILERPLATE entities-dtd.url-->">the URL given by this link</a>. (This
   URL is a DTD containing the <a href="https://www.w3.org/TR/xml/#sec-entity-decl">entity
-  declarations</a> for the names listed in the <span>named character references</span> section.) <ref spec=XML></p>
+  declarations</a> for the names listed in the <span>named character references</span> section.) <ref>XML</ref></p>
 
   <ul class="brief">
    <li><code data-x="">-//W3C//DTD XHTML 1.0 Transitional//EN</code></li>
@@ -128022,7 +128054,7 @@ console.assert(container.firstChild instanceof SuperP);
   <p class="note">This is not strictly a <span data-x="willful violation">violation</span> of
   <cite>XML</cite>, but it does contradict the spirit of <cite>XML</cite>'s requirements. This is
   motivated by a desire for user agents to all handle entities in an interoperable fashion without
-  requiring any network access for handling external subsets. <ref spec=XML></p>
+  requiring any network access for handling external subsets. <ref>XML</ref></p>
 
   <p>XML parsers can be invoked with <dfn export>XML scripting support enabled</dfn> or <dfn
   export>XML scripting support disabled</dfn>. Except where otherwise specified, XML parsers are
@@ -128069,7 +128101,7 @@ console.assert(container.firstChild instanceof SuperP);
 
   <p class="note">This is a <span>willful violation</span> of <cite>XML</cite>; unfortunately,
   XML is not formally extensible in the manner that is needed for <code>template</code> processing.
-  <ref spec=XML></p>
+  <ref>XML</ref></p>
 
   <p>When an <span>XML parser</span> creates a <code>Node</code> object, its <span>node document</span>
   must be set to the <span>node document</span> of
@@ -128129,8 +128161,8 @@ console.assert(container.firstChild instanceof SuperP);
   <p>For <code>Element</code>s, if any of the elements in the serialization are in no namespace, the
   default namespace in scope for those elements must be explicitly declared as the empty string.<!--
   because otherwise round-tripping might break since it'll pick up the surrounding default ns when
-  setting --> (This doesn't apply in the <code>Document</code> case.) <ref spec=XML>
-  <ref spec=XMLNS></p>
+  setting --> (This doesn't apply in the <code>Document</code> case.) <ref>XML</ref>
+  <ref>XMLNS</ref></p>
 
   <p>For the purposes of this section, an internal general parsed entity is considered XML
   namespace-well-formed if a document consisting of an element with no namespace declarations whose
@@ -128145,28 +128177,28 @@ console.assert(container.firstChild instanceof SuperP);
    <li>A <code>Document</code> node with no child element nodes.</li>
 
    <li>A <code>DocumentType</code> node that has an external subset public identifier that contains
-   characters that are not matched by the XML <code data-x="">PubidChar</code> production. <ref spec=XML></li>
+   characters that are not matched by the XML <code data-x="">PubidChar</code> production. <ref>XML</ref></li>
 
    <li>A <code>DocumentType</code> node that has an external subset system identifier that contains
    both a U+0022 QUOTATION MARK (") and a U+0027 APOSTROPHE (') or that contains characters that are
-   not matched by the XML <code data-x="">Char</code> production. <ref spec=XML></li>
+   not matched by the XML <code data-x="">Char</code> production. <ref>XML</ref></li>
 
    <li>A node with a <!--prefix or--> local name containing a U+003A COLON (:).</li> <!--(prefixes
    can get adjusted, so this isn't an excuse) -->
 
    <li>A node with a <!--prefix or--> local name that does not match the XML <code
-   data-x="xml-Name">Name</code> production. <ref spec=XML></li> <!--(again, prefixes can get
+   data-x="xml-Name">Name</code> production. <ref>XML</ref></li> <!--(again, prefixes can get
    adjusted, so this isn't an excuse) -->
 
    <li>An <code>Attr</code> node with no namespace whose local name is the lowercase string "<code
-   data-x="">xmlns</code>". <ref spec=XMLNS></li>
+   data-x="">xmlns</code>". <ref>XMLNS</ref></li>
 
    <li>An <code>Element</code> node with two or more attributes with the same local name and
    namespace.</li>
 
    <li>An <code>Attr</code> node, <code>Text</code> node, <code>Comment</code> node, or
    <code>ProcessingInstruction</code> node whose data contains characters that are not matched by
-   the XML <code data-x="">Char</code> production. <ref spec=XML></li>
+   the XML <code data-x="">Char</code> production. <ref>XML</ref></li>
 
    <li>A <code>Comment</code> node whose data contains two adjacent U+002D HYPHEN-MINUS characters
    (-) or ends with such a character.</li>
@@ -128299,15 +128331,14 @@ console.assert(container.firstChild instanceof SuperP);
   with its document.</p>
 
   <p class="note">This specification does not define the precise timing for when the intersection is
-  tested, but it is suggested that the timing match that of the Intersection Observer API. <ref
-  spec=INTERSECTIONOBSERVER></p>
+  tested, but it is suggested that the timing match that of the Intersection Observer API. <ref>INTERSECTIONOBSERVER</ref></p>
 
   <hr>
 
   <p>User agents that do not honor author-level CSS style sheets are nonetheless expected to act as
   if they applied the CSS rules given in these sections in a manner consistent with this
-  specification and the relevant CSS and Unicode specifications. <ref spec=CSS> <ref spec=UNICODE>
-  <ref spec=BIDI></p>
+  specification and the relevant CSS and Unicode specifications. <ref>CSS</ref> <ref>UNICODE</ref>
+  <ref>BIDI</ref></p>
 
   <p class="note">This is especially important for issues relating to the <span>'display'</span>,
   <span>'unicode-bidi'</span>, and <span>'direction'</span> properties.</p>
@@ -128378,7 +128409,7 @@ console.assert(container.firstChild instanceof SuperP);
   particular descendant, the most deeply nested such element is expected to override the others.
   Aligned elements are expected to be aligned by having the <span data-x="used value">used
   values</span> of their margins on the <span>line-left</span> and <span>line-right</span> sides be
-  set accordingly. <ref spec=CSSLOGICAL> <ref spec=CSSWM></p>
+  set accordingly. <ref>CSSLOGICAL</ref> <ref>CSSWM</ref></p>
 
 
 
@@ -128707,8 +128738,7 @@ br[clear=all i], br[clear=both i] { clear: both; }</code></pre>
 
   <p>For the purposes of the CSS ruby model, runs of children of <code>ruby</code> elements that are
   not <code>rt</code> or <code>rp</code> elements are expected to be wrapped in anonymous boxes
-  whose <span>'display'</span> property has the value <span>'ruby-base'</span>. <ref
-  spec=CSSRUBY></p>
+  whose <span>'display'</span> property has the value <span>'ruby-base'</span>. <ref>CSSRUBY</ref></p>
 
   <p>When a particular part of a ruby has more than one annotation, the annotations should be
   distributed on both sides of the base text so as to minimize the stacking of ruby annotations on
@@ -128878,7 +128908,7 @@ input[dir=auto i]:is([type=search i], [type=tel i], [type=url i],
   property.</p>
 
   <p>When the document's character encoding is <span>ISO-8859-8</span>, the following rules are
-  additionally expected to apply, following those above: <ref spec=ENCODING></p>
+  additionally expected to apply, following those above: <ref>ENCODING</ref></p>
 
   <pre><code class="css">@namespace "http://www.w3.org/1999/xhtml";
 
@@ -128975,7 +129005,7 @@ ul[type=square i], li[type=square i] { list-style-type: square; }</code></pre>
 
   <p id="css-list-rendering">For CSS user agents, some aspects of rendering <span
   data-x="css-list-item">list items</span> are defined by the <cite>CSS Lists</cite> specification.
-  Additionally, the following attribute mappings are expected to apply: <ref spec=CSSLISTS></p>
+  Additionally, the following attribute mappings are expected to apply: <ref>CSSLISTS</ref></p>
 
   <p>When an <code>li</code> element has a <code
   data-x="attr-li-value">value</code> attribute, and parsing that attribute's value using the
@@ -129889,7 +129919,7 @@ legend[align=right i] {
 
   <p>Any subtitles or captions are expected to be overlaid directly on top of their
   <code>video</code> element, as defined by the relevant rendering rules; for WebVTT, those are the
-  <span>rules for updating the display of WebVTT text tracks</span>. <ref spec=WEBVTT></p>
+  <span>rules for updating the display of WebVTT text tracks</span>. <ref>WEBVTT</ref></p>
 
   <p>When the user agent starts <span data-x="expose a user interface to the user">exposing a user
   interface</span> for a <code>video</code> element, the user agent should run the <span>rules for
@@ -129899,7 +129929,7 @@ legend[align=right i] {
   data-x="dom-TextTrack-kind-subtitles">subtitles</code> or <code
   data-x="dom-TextTrack-kind-captions">captions</code> (e.g., for <span data-x="text track">text
   tracks</span> based on WebVTT, the <span>rules for updating the display of WebVTT text
-  tracks</span>). <ref spec=WEBVTT></p>
+  tracks</span>). <ref>WEBVTT</ref></p>
 
   <p class="note">Resizing <code>video</code> and <code>canvas</code> elements does not interrupt
   video playback or clear the canvas.</p>
@@ -130165,7 +130195,7 @@ input[type=image i][align=bottom i], object[align=bottom i] {
   widget</span> or <span>non-devolvable widget</span>. This section defines which elements match
   these concepts for HTML, what their <span>native appearance</span> is, and any particularity of
   their <span data-x="devolved widget">devolved</span> state or <span>primitive appearance</span>.
-  <ref spec=CSSUI></p>
+  <ref>CSSUI</ref></p>
 
   <p>The following elements can have a <span>native appearance</span> for the purpose of the CSS
   <span>'appearance'</span> property.</p>
@@ -130213,7 +130243,7 @@ input[type=image i][align=bottom i], object[align=bottom i] {
 
    <li><p>If the element is <span>absolutely-positioned</span>, then for the purpose of the
    <a href="https://drafts.csswg.org/css2/#visuren">CSS visual formatting model</a>, act as if
-   the element is a <span>replaced element</span>. <ref spec=CSS></p></li>
+   the element is a <span>replaced element</span>. <ref>CSS</ref></p></li>
 
    <li><p>If the <span>computed value</span> of <span>'inline-size'</span> is 'auto', then the
    <span>used value</span> is the <span>fit-content inline size</span>.</p></li>
@@ -131269,7 +131299,7 @@ progress { appearance: auto; }</code></pre>
   including, for instance, supporting the paragraph-breaking behavior of U+000A LINE FEED (LF)
   characters. For the purposes of determining the paragraph level of such text in the bidirectional
   algorithm, this specification does <em>not</em> provide a higher-level override of rules P2 and
-  P3. <ref spec=BIDI></p>
+  P3. <ref>BIDI</ref></p>
 
   <p>When necessary, authors can enforce a particular direction for a given paragraph by starting it
   with the Unicode U+200E LEFT-TO-RIGHT MARK or U+200F RIGHT-TO-LEFT MARK characters.</p>
@@ -131322,7 +131352,7 @@ if (s = prompt('What is your name?')) {
 
   <p>User agents are expected to allow the user to request the opportunity to <dfn>obtain a physical
   form</dfn> (or a representation of a physical form) of a <code>Document</code>. For example,
-  selecting the option to print a page or convert it to PDF format. <ref spec=PDF></p>
+  selecting the option to print a page or convert it to PDF format. <ref>PDF</ref></p>
 
   <p>When the user actually <span data-x="obtain a physical form">obtains a physical form</span> (or
   a representation of a physical form) of a <code>Document</code>, the user agent is expected to
@@ -131521,7 +131551,7 @@ if (s = prompt('What is your name?')) {
 
     <p>For certificate enrollment use cases, use the Web Cryptography API to generate a keypair for
     the certificate, and then export the certificate and key to allow the user to install them
-    manually. <ref spec=WEBCRYPTO></p>
+    manually. <ref>WEBCRYPTO</ref></p>
    </dd>
 
    <dt><dfn element><code>listing</code></dfn></dt>
@@ -131645,7 +131675,7 @@ if (s = prompt('What is your name?')) {
    <dd><p>Unnecessary. Omit it altogether.</p></dd>
 
    <dt><dfn element-attr for="html"><code data-x="attr-html-manifest">manifest</code></dfn> on <code>html</code> elements</dt>
-   <dd><p>Use service workers instead. <ref spec=SW></p></dd>
+   <dd><p>Use service workers instead. <ref>SW</ref></p></dd>
 
    <dt><dfn element-attr for="html"><code data-x="attr-html-version">version</code></dfn> on <code>html</code> elements</dt>
    <dd><p>Unnecessary. Omit it altogether.</p></dd>
@@ -131711,7 +131741,7 @@ if (s = prompt('What is your name?')) {
 
    <dt><dfn element-attr for="script"><code data-x="attr-script-event">event</code></dfn> on <code>script</code> elements</dt>
    <dt><dfn element-attr for="script"><code data-x="attr-script-for">for</code></dfn> on <code>script</code> elements</dt>
-   <dd><p>Use DOM events mechanisms to register event listeners. <ref spec=DOM></p></dd>
+   <dd><p>Use DOM events mechanisms to register event listeners. <ref>DOM</ref></p></dd>
 
    <dt><dfn element-attr for="style"><code data-x="attr-style-type">type</code></dfn> on <code>style</code> elements (except as noted in the previous section)</dt>
    <dd><p>Omit the attribute for CSS; for <span data-x="data block">data blocks</span>, use
@@ -131736,7 +131766,7 @@ if (s = prompt('What is your name?')) {
    <dt><dfn element-attr><code data-x="attr-datasrc">datasrc</code></dfn> on <code>a</code>, <code>button</code>, <code>div</code>, <code>frame</code>, <code>iframe</code>, <code>img</code>, <code>input</code>, <code>label</code>, <code>legend</code>, <code>marquee</code>, <code>object</code>, <code>option</code>, <code>select</code>, <code>span</code>, <code>table</code>, and <code>textarea</code> elements</dt>
    <dt><dfn element-attr><code data-x="attr-datafld">datafld</code></dfn> on <code>a</code>, <code>button</code>, <code>div</code>, <code>fieldset</code>, <code>frame</code>, <code>iframe</code>, <code>img</code>, <code>input</code>, <code>label</code>, <code>legend</code>, <code>marquee</code>, <code>object</code>, <code>select</code>, <code>span</code>, and <code>textarea</code> elements</dt>
    <dt><dfn element-attr><code data-x="attr-dataformatas">dataformatas</code></dfn> on <code>button</code>, <code>div</code>, <code>input</code>, <code>label</code>, <code>legend</code>, <code>marquee</code>, <code>object</code>, <code>option</code>, <code>select</code>, <code>span</code>, and <code>table</code> elements</dt>
-   <dd><p>Use script and a mechanism such as <code>XMLHttpRequest</code> to populate the page dynamically. <ref spec=XHR></p></dd>
+   <dd><p>Use script and a mechanism such as <code>XMLHttpRequest</code> to populate the page dynamically. <ref>XHR</ref></p></dd>
 
    <dt><dfn element-attr><code data-x="attr-dropzone">dropzone</code></dfn> on all elements</dt>
    <dd><p>Use script to handle the <code data-x="event-dnd-dragenter">dragenter</code> and <code
@@ -131841,7 +131871,7 @@ if (s = prompt('What is your name?')) {
   <h4 id="the-marquee-element">The <dfn element><code>marquee</code></dfn> element</h4>
 
   <p>The <code>marquee</code> element is a presentational element that animates content. CSS
-  transitions and animations are a more appropriate mechanism. <ref spec=CSSANIMATIONS> <ref spec=CSSTRANSITIONS></p>
+  transitions and animations are a more appropriate mechanism. <ref>CSSANIMATIONS</ref> <ref>CSSTRANSITIONS</ref></p>
 
   <p>The <code>marquee</code> element must implement the <code>HTMLMarqueeElement</code>
   interface.</p>
@@ -133038,7 +133068,7 @@ interface <dfn interface>External</dfn> {
       <span>document's character encoding</span>, overriding any <span data-x="character encoding
       declaration">character encoding declarations</span> in the document other than a Byte Order
       Mark (BOM). The parameter's value must be an <span>ASCII case-insensitive</span> match for the
-      string "<code data-x="">utf-8</code>". <ref spec=ENCODING></p>
+      string "<code data-x="">utf-8</code>". <ref>ENCODING</ref></p>
      </dd>
     </dl>
    </dd>
@@ -133101,7 +133131,7 @@ interface <dfn interface>External</dfn> {
      <dt>Magic number(s):</dt>
      <dd>No sequence of bytes can uniquely identify an HTML
      document. More information on detecting HTML documents is
-     available in <cite>MIME Sniffing</cite>. <ref spec=MIMESNIFF></dd>
+     available in <cite>MIME Sniffing</cite>. <ref>MIMESNIFF</ref></dd>
      <dt>File extension(s):</dt>
      <dd>"<code data-x="">html</code>" and "<code data-x="">htm</code>"
      are commonly, but certainly not exclusively, used as the
@@ -133146,7 +133176,7 @@ interface <dfn interface>External</dfn> {
    <dt>Required parameters:</dt>
    <dd>
     <ul class="brief">
-     <li><code data-x="">boundary</code> (defined in RFC2046) <ref spec=RFC2046>
+     <li><code data-x="">boundary</code> (defined in RFC2046) <ref>RFC2046</ref>
     </ul>
    </dd>
    <dt>Optional parameters:</dt>
@@ -133166,7 +133196,7 @@ interface <dfn interface>External</dfn> {
    <dt>Published specification:</dt>
    <dd>
     This specification describes processing rules for web browsers.
-    Conformance requirements for generating resources with this type are the same as for <code>multipart/mixed</code>. <ref spec=RFC2046>
+    Conformance requirements for generating resources with this type are the same as for <code>multipart/mixed</code>. <ref>RFC2046</ref>
    </dd>
    <dt>Applications that use this media type:</dt>
    <dd>
@@ -133221,27 +133251,27 @@ interface <dfn interface>External</dfn> {
    <dt>Subtype name:</dt>
    <dd>xhtml+xml</dd>
    <dt>Required parameters:</dt>
-   <dd>Same as for <code>application/xml</code> <ref spec=RFC7303></dd>
+   <dd>Same as for <code>application/xml</code> <ref>RFC7303</ref></dd>
    <dt>Optional parameters:</dt>
-   <dd>Same as for <code>application/xml</code> <ref spec=RFC7303></dd>
+   <dd>Same as for <code>application/xml</code> <ref>RFC7303</ref></dd>
    <dt>Encoding considerations:</dt>
-   <dd>Same as for <code>application/xml</code> <ref spec=RFC7303></dd>
+   <dd>Same as for <code>application/xml</code> <ref>RFC7303</ref></dd>
    <dt>Security considerations:</dt>
-   <dd>Same as for <code>application/xml</code> <ref spec=RFC7303></dd>
+   <dd>Same as for <code>application/xml</code> <ref>RFC7303</ref></dd>
    <dt>Interoperability considerations:</dt>
-   <dd>Same as for <code>application/xml</code> <ref spec=RFC7303></dd>
+   <dd>Same as for <code>application/xml</code> <ref>RFC7303</ref></dd>
    <dt id="authors-using-xhtml">Published specification:</dt>
    <dd>Labeling a resource with the <code>application/xhtml+xml</code> type asserts that the
    resource is an XML document that likely has a <span>document element</span> from the <span>HTML
    namespace</span>. Thus, the relevant specifications are <cite>XML</cite>, <cite>Namespaces in
-   XML</cite>, and this specification. <ref spec=XML> <ref spec=XMLNS></dd>
+   XML</cite>, and this specification. <ref>XML</ref> <ref>XMLNS</ref></dd>
    <dt>Applications that use this media type:</dt>
-   <dd>Same as for <code>application/xml</code> <ref spec=RFC7303></dd>
+   <dd>Same as for <code>application/xml</code> <ref>RFC7303</ref></dd>
    <dt>Additional information:</dt>
    <dd>
     <dl>
      <dt>Magic number(s):</dt>
-     <dd>Same as for <code>application/xml</code> <ref spec=RFC7303></dd>
+     <dd>Same as for <code>application/xml</code> <ref>RFC7303</ref></dd>
      <dt>File extension(s):</dt>
      <dd>"<code data-x="">xhtml</code>" and "<code data-x="">xht</code>" are sometimes used as
      extensions for XML resources that have a <span>document element</span> from the <span>HTML
@@ -133264,7 +133294,7 @@ interface <dfn interface>External</dfn> {
 
   <p><span data-x="concept-url-fragment">Fragments</span> used with
   <code>application/xhtml+xml</code> resources have the same semantics as with any
-  <span>XML MIME type</span>. <ref spec=RFC7303></p>
+  <span>XML MIME type</span>. <ref>RFC7303</ref></p>
 
 
   <h3><dfn><code>text/ping</code></dfn></h3>
@@ -133361,15 +133391,15 @@ interface <dfn interface>External</dfn> {
    <dt>Subtype name:</dt>
    <dd>microdata+json</dd>
    <dt>Required parameters:</dt>
-   <dd>Same as for <code>application/json</code> <ref spec=JSON></dd>
+   <dd>Same as for <code>application/json</code> <ref>JSON</ref></dd>
    <dt>Optional parameters:</dt>
-   <dd>Same as for <code>application/json</code> <ref spec=JSON></dd>
+   <dd>Same as for <code>application/json</code> <ref>JSON</ref></dd>
    <dt>Encoding considerations:</dt>
    <dd>8bit (always UTF-8)</dd>
    <dt>Security considerations:</dt>
-   <dd>Same as for <code>application/json</code> <ref spec=JSON></dd>
+   <dd>Same as for <code>application/json</code> <ref>JSON</ref></dd>
    <dt>Interoperability considerations:</dt>
-   <dd>Same as for <code>application/json</code> <ref spec=JSON></dd>
+   <dd>Same as for <code>application/json</code> <ref>JSON</ref></dd>
    <dt>Published specification:</dt>
    <dd>
     Labeling a resource with the <code>application/microdata+json</code> type asserts that the
@@ -133380,7 +133410,7 @@ interface <dfn interface>External</dfn> {
     data-x="">properties</code>" whose value is an object whose entries each have a value consisting
     of an array of either objects or strings, the objects being of the same form as the objects in
     the aforementioned "<code data-x="">items</code>" entry. Thus, the relevant specifications are
-    <cite>JSON</cite> and this specification. <ref spec=JSON>
+    <cite>JSON</cite> and this specification. <ref>JSON</ref>
    </dd>
    <dt>Applications that use this media type:</dt>
    <dd>
@@ -133391,11 +133421,11 @@ interface <dfn interface>External</dfn> {
    <dd>
     <dl>
      <dt>Magic number(s):</dt>
-     <dd>Same as for <code>application/json</code> <ref spec=JSON></dd>
+     <dd>Same as for <code>application/json</code> <ref>JSON</ref></dd>
      <dt>File extension(s):</dt>
-     <dd>Same as for <code>application/json</code> <ref spec=JSON></dd>
+     <dd>Same as for <code>application/json</code> <ref>JSON</ref></dd>
      <dt>Macintosh file type code(s):</dt>
-     <dd>Same as for <code>application/json</code> <ref spec=JSON></dd>
+     <dd>Same as for <code>application/json</code> <ref>JSON</ref></dd>
     </dl>
    </dd>
    <dt>Person &amp; email address to contact for further information:</dt>
@@ -133413,7 +133443,7 @@ interface <dfn interface>External</dfn> {
   <p><span data-x="concept-url-fragment">Fragments</span> used with
   <code>application/microdata+json</code> resources have the same semantics as when used with
   <code>application/json</code> (namely, at the time of writing, no semantics at all).
-  <ref spec=JSON></p>
+  <ref>JSON</ref></p>
 
 
   <h3><dfn><code>text/event-stream</code></dfn></h3>
@@ -133450,7 +133480,7 @@ interface <dfn interface>External</dfn> {
    <dd>
     <p>An event stream from an origin distinct from the origin of the content consuming the event
     stream can result in information leakage. To avoid this, user agents are required to apply CORS
-    semantics. <ref spec=FETCH></p>
+    semantics. <ref>FETCH</ref></p>
 
     <p>Event streams can overwhelm a user agent; a user agent is expected to apply suitable
     restrictions to avoid depleting local resources because of an overabundance of information from
@@ -133504,7 +133534,7 @@ interface <dfn interface>External</dfn> {
   <h3><dfn><code data-x="scheme-web">web+</code> scheme prefix</dfn></h3>
 
   <p>This section describes a convention for use with the IANA URI scheme registry. It does not
-  itself register a specific scheme. <ref spec=RFC7595></p>
+  itself register a specific scheme. <ref>RFC7595</ref></p>
 
   <dl>
    <dt>Scheme name:</dt>
@@ -134438,8 +134468,8 @@ interface <dfn interface>External</dfn> {
          <span data-x="Embedded content">embedded</span>;
          <span data-x="Palpable content">palpable</span></td>
      <td><span data-x="Phrasing content">phrasing</span></td>
-     <td>per <ref spec=MATHML></td>
-     <td>per <ref spec=MATHML></td>
+     <td>per <ref>MATHML</ref></td>
+     <td>per <ref>MATHML</ref></td>
      <td><code>Element</code></td>
     </tr>
 
@@ -134924,8 +134954,8 @@ interface <dfn interface>External</dfn> {
          <span data-x="Embedded content">embedded</span>;
          <span data-x="Palpable content">palpable</span></td>
      <td><span data-x="Phrasing content">phrasing</span></td>
-     <td>per <ref spec=SVG></td>
-     <td>per <ref spec=SVG></td>
+     <td>per <ref>SVG</ref></td>
+     <td>per <ref>SVG</ref></td>
      <td><code>SVGSVGElement</code></td>
     </tr>
 
@@ -136061,7 +136091,7 @@ interface <dfn interface>External</dfn> {
      <th> <code data-x="">integrity</code>
      <td> <code data-x="attr-link-integrity">link</code>;
           <code data-x="attr-script-integrity">script</code>
-     <td> Integrity metadata used in <cite>Subresource Integrity</cite> checks <ref spec=SRI>
+     <td> Integrity metadata used in <cite>Subresource Integrity</cite> checks <ref>SRI</ref>
      <td> <a href="#attribute-text">Text</a>
     <tr>
      <th> <code data-x="">is</code>
@@ -136247,7 +136277,7 @@ interface <dfn interface>External</dfn> {
     <tr>
      <th> <code data-x="">nonce</code>
      <td> <span data-x="attr-nonce">HTML elements</span>
-     <td> Cryptographic nonce used in <cite>Content Security Policy</cite> checks <ref spec=CSP>
+     <td> Cryptographic nonce used in <cite>Content Security Policy</cite> checks <ref>CSP</ref>
      <td> <a href="#attribute-text">Text</a>
     <tr>
      <th> <code data-x="">novalidate</code>
@@ -137985,19 +138015,19 @@ INSERT INTERFACES HERE
 
   <dl>
    <dt><dfn><code>application/atom+xml</code></dfn></dt>
-   <dd>Atom <ref spec=ATOM></dd>
+   <dd>Atom <ref>ATOM</ref></dd>
 
    <dt><dfn><code>application/json</code></dfn></dt>
-   <dd>JSON <ref spec=JSON></dd>
+   <dd>JSON <ref>JSON</ref></dd>
 
    <dt><dfn data-x-href="https://www.rfc-editor.org/rfc/rfc2046#section-4.5.1"><code>application/octet-stream</code></dfn></dt>
-   <dd>Generic binary data <ref spec=RFC2046></dd>
+   <dd>Generic binary data <ref>RFC2046</ref></dd>
 
    <dt><code>application/microdata+json</code></dt>
    <dd>Microdata as JSON
 
    <dt><dfn><code>application/rss+xml</code></dfn></dt>
-   <dd>RSS <!--<ref spec=RSS>-->
+   <dd>RSS <!--<ref>RSS</ref>-->
 
    <dt><code>application/x-www-form-urlencoded</code></dt>
    <dd>Form submission</dd>
@@ -138006,48 +138036,48 @@ INSERT INTERFACES HERE
    <dd>HTML</dd>
 
    <dt><dfn><code>application/xml</code></dfn></dt>
-   <dd>XML <ref spec=XML> <ref spec=RFC7303></dd>
+   <dd>XML <ref>XML</ref> <ref>RFC7303</ref></dd>
 
    <dt><dfn><code>image/gif</code></dfn></dt>
-   <dd>GIF images <ref spec=GIF></dd>
+   <dd>GIF images <ref>GIF</ref></dd>
 
    <dt><dfn><code>image/jpeg</code></dfn></dt>
-   <dd>JPEG images <ref spec=JPEG></dd>
+   <dd>JPEG images <ref>JPEG</ref></dd>
 
    <dt><dfn><code>image/png</code></dfn></dt>
-   <dd>PNG images <ref spec=PNG></dd>
+   <dd>PNG images <ref>PNG</ref></dd>
 
    <dt><dfn><code>image/svg+xml</code></dfn></dt>
-   <dd>SVG images <ref spec=SVG></dd>
+   <dd>SVG images <ref>SVG</ref></dd>
 
    <dt><dfn><code>multipart/form-data</code></dfn></dt>
-   <dd>Form submission <ref spec=RFC7578></dd>
+   <dd>Form submission <ref>RFC7578</ref></dd>
 
    <dt><dfn><code>multipart/mixed</code></dfn></dt>
-   <dd>Generic mixed content <ref spec=RFC2046></dd>
+   <dd>Generic mixed content <ref>RFC2046</ref></dd>
 
    <dt><code>multipart/x-mixed-replace</code></dt>
    <dd>Streaming server push</dd>
 
    <dt><dfn><code>text/css</code></dfn></dt>
-   <dd>CSS <ref spec=CSS></dd>
+   <dd>CSS <ref>CSS</ref></dd>
 
    <dt><code>text/event-stream</code></dt>
    <dd>Server-sent event streams</dd>
 
    <dt><dfn><code>text/javascript</code></dfn></dt>
-   <dd>JavaScript <ref spec=JAVASCRIPT> <ref spec=RFC9239>
+   <dd>JavaScript <ref>JAVASCRIPT</ref> <ref>RFC9239</ref>
 
    <!--
    <dt><dfn><code>text/javascript;e4x=1</code></dfn></dt>
-   <dd>E4X <ref spec=E4X>
+   <dd>E4X <ref>E4X</ref>
    -->
 
    <dt><dfn><code>text/json</code></dfn></dt>
    <dd>JSON (legacy type)</dd>
 
    <dt><dfn data-x-href="https://www.rfc-editor.org/rfc/rfc2046#section-4.1.3"><code>text/plain</code></dfn></dt>
-   <dd>Generic plain text <ref spec=RFC2046> <ref spec=RFC3676></dd>
+   <dd>Generic plain text <ref>RFC2046</ref> <ref>RFC3676</ref></dd>
 
    <dt><code>text/html</code></dt>
    <dd>HTML</dd>
@@ -138056,22 +138086,22 @@ INSERT INTERFACES HERE
    <dd>Hyperlink auditing</dd>
 
    <dt><dfn><code>text/uri-list</code></dfn></dt>
-   <dd>List of URLs <ref spec=RFC2483>
+   <dd>List of URLs <ref>RFC2483</ref>
 
    <dt><dfn><code>text/vcard</code></dfn></dt>
-   <dd>vCard <ref spec=RFC6350>
+   <dd>vCard <ref>RFC6350</ref>
 
    <dt><dfn><code>text/vtt</code></dfn></dt>
-   <dd>WebVTT <ref spec=WEBVTT></dd>
+   <dd>WebVTT <ref>WEBVTT</ref></dd>
 
    <dt><dfn><code>text/xml</code></dfn></dt>
-   <dd>XML <ref spec=XML> <ref spec=RFC7303></dd>
+   <dd>XML <ref>XML</ref> <ref>RFC7303</ref></dd>
 
    <dt><dfn data-x-href="https://www.rfc-editor.org/rfc/rfc4337#section-3"><code>video/mp4</code></dfn></dt>
-   <dd>MPEG-4 video <ref spec=RFC4337></dd>
+   <dd>MPEG-4 video <ref>RFC4337</ref></dd>
 
    <dt><dfn><code>video/mpeg</code></dfn></dt>
-   <dd>MPEG video <ref spec=RFC2046></dd>
+   <dd>MPEG video <ref>RFC2046</ref></dd>
   </dl>