Editorial: make serialize/parse roundtrip examples linkable

I've had occasion to link to these a few times, and so making them more easily linkable seems like a good idea.

Also fix some wrapping and use modern Infra syntax for code points while in the area.

Author: domenic

source

@@ -136868,37 +136868,34 @@ document.body.appendChild(text);
    <li><p>Return <var>s</var>.</p></li>
   </ol>
 
-  <p class="warning">It is possible that the output of this algorithm, if parsed with an <span>HTML
-  parser</span>, will not return the original tree structure. Tree structures that do not roundtrip
-  a serialize and reparse step can also be produced by the <span>HTML parser</span> itself, although
-  such cases are typically non-conforming.</p>
-
-  <div class="example">
+  <p class="warning" id="warning-html-serializer-roundtrip">It is possible that the output of this
+  algorithm, if parsed with an <span>HTML parser</span>, will not return the original tree
+  structure. Tree structures that do not roundtrip a serialize and reparse step can also be produced
+  by the <span>HTML parser</span> itself, although such cases are typically non-conforming.</p>
 
+  <div class="example" id="example-html-serializer-roundtrip-comments-and-script">
    <p>For instance, if a <code>textarea</code> element to which a <code data-x="">Comment</code>
    node has been appended is serialized and the output is then reparsed, the comment will end up
    being displayed in the text control. Similarly, if, as a result of DOM manipulation, an element
-   contains a comment that contains "<code data-x="">--&gt;</code>", then when
-   the result of serializing the element is parsed, the comment will be truncated at that point and
-   the rest of the comment will be interpreted as markup. More examples would be making a
-   <code>script</code> element contain a <code>Text</code> node with the text string "<code
+   contains a comment that contains "<code data-x="">--&gt;</code>", then when the result of
+   serializing the element is parsed, the comment will be truncated at that point and the rest of
+   the comment will be interpreted as markup. More examples would be making a <code>script</code>
+   element contain a <code>Text</code> node with the text string "<code
    data-x="">&lt;/script></code>", or having a <code>p</code> element that contains a
    <code>ul</code> element (as the <code>ul</code> element's <span data-x="syntax-start-tag">start
    tag</span> would imply the end tag for the <code>p</code>).</p>
 
    <p>This can enable cross-site scripting attacks. An example of this would be a page that lets the
    user enter some font family names that are then inserted into a CSS <code>style</code> block via
-   the DOM and which then uses the <code data-x="dom-element-innerHTML">innerHTML</code> IDL attribute to get
-   the HTML serialization of that <code>style</code> element: if the user enters
+   the DOM and which then uses the <code data-x="dom-element-innerHTML">innerHTML</code> IDL
+   attribute to get the HTML serialization of that <code>style</code> element: if the user enters
    "<code data-x="">&lt;/style>&lt;script>attack&lt;/script></code>" as a font family name, <code
-   data-x="dom-element-innerHTML">innerHTML</code> will return markup that, if parsed in a different context,
-   would contain a <code>script</code> node, even though no <code>script</code> node existed in the
-   original DOM.</p>
-
+   data-x="dom-element-innerHTML">innerHTML</code> will return markup that, if parsed in a different
+   context, would contain a <code>script</code> node, even though no <code>script</code> node
+   existed in the original DOM.</p>
   </div>
 
-  <div class="example">
-
+  <div class="example" id="example-html-serializer-roundtrip-nested-form">
    <p>For example, consider the following markup:</p>
 
    <pre><code class="html">&lt;form id="outer">&lt;div>&lt;/form>&lt;form id="inner">&lt;input></code></pre>
@@ -136915,11 +136912,9 @@ document.body.appendChild(text);
    <pre><code class="html">&lt;html>&lt;head>&lt;/head>&lt;body>&lt;form id="outer">&lt;div><mark>&lt;form id="inner"></mark>&lt;input>&lt;/form>&lt;/div>&lt;/form>&lt;/body>&lt;/html></code></pre>
 
    <ul class="domTree"><li class="t1"><code>html</code><ul><li class="t1"><code>head</code></li><li class="t1"><code>body</code><ul><li class="t1"><code>form</code> <span class="t2" data-x=""><code class="attribute name" data-x="attr-id">id</code>="<code class="attribute value" data-x="">outer</code>"</span><ul><li class="t1"><code>div</code><ul><li class="t1"><code>input</code></li></ul></li></ul></li></ul></li></ul></li></ul>
-
   </div>
 
-  <div class="example">
-
+  <div class="example" id="example-html-serializer-roundtrip-foster-parenting">
    <p>As another example, consider the following markup:</p>
 
    <pre><code class="html">&lt;a>&lt;table>&lt;a></code></pre>
@@ -136937,17 +136932,16 @@ document.body.appendChild(text);
    <pre><code class="html">&lt;html>&lt;head>&lt;/head>&lt;body>&lt;a><mark>&lt;a></mark>&lt;/a>&lt;table>&lt;/table>&lt;/a>&lt;/body>&lt;/html></code></pre>
 
    <ul class="domTree"><li class="t1"><code>html</code><ul><li class="t1"><code>head</code></li><li class="t1"><code>body</code><ul><li class="t1"><code>a</code></li><li class="t1"><code>a</code></li><li class="t1"><code>table</code></li></ul></li></ul></li></ul>
-
   </div>
 
-  <p>For historical reasons, this algorithm does not round-trip an initial U+000A LINE FEED (LF)
-  character in <code>pre</code>, <code>textarea</code>, or <code>listing</code> elements, even
-  though (in the first two cases) the markup being round-tripped can be conforming. The <span>HTML
-  parser</span> will drop such a character during parsing, but this algorithm does <em>not</em>
-  serialize an extra U+000A LINE FEED (LF) character.</p>
+  <p>For historical reasons, this algorithm does not round-trip an initial U+000A (LF) character in
+  <code>pre</code>, <code>textarea</code>, or <code>listing</code> elements, even though (in the
+  first two cases) the markup being round-tripped can be conforming. The <span>HTML parser</span>
+  will drop such a character during parsing, but this algorithm does <em>not</em> serialize an extra
+  U+000A (LF) character.</p>
   <!-- https://github.com/whatwg/html/issues/944 -->
 
-  <div class="example">
+  <div class="example" id="example-html-serializer-roundtrip-linefeed">
    <p>For example, consider the following markup:</p>
 
    <pre><code class="html">&lt;pre>
@@ -136968,9 +136962,10 @@ Hello.&lt;/pre></code></pre>
   <span data-x="concept-element-is-value"><code data-x="">is</code> value</span> is preserved
   through serialize-parse roundtrips.</p>
 
-  <div class="example">
-   <p>When creating a <span>customized built-in element</span> via the parser, a developer uses the <code
-   data-x="attr-is">is</code> attribute directly; in such cases serialize-parse roundtrips work fine.</p>
+  <div class="example" id="example-html-serializer-roundtrip-is-attribute">
+   <p>When creating a <span>customized built-in element</span> via the parser, a developer uses the
+   <code data-x="attr-is">is</code> attribute directly; in such cases serialize-parse roundtrips
+   work fine.</p>
 
    <pre><code class="html">&lt;script>
 window.SuperP = class extends HTMLParagraphElement {};