Change <pre> examples/guidance to not use <code>

This change updates some examples of <pre> elements to not use <code>
children, and also updates some related non-normative guidance in the
spec to advise that when marking up <pre> elements that contain content
written in a particular programming language, a class attribute+value on
the <pre> element itself can be used to indicate the language — without
the need to always instead add a <code> child with a class attribute+value.

Relates to #3764

source

@@ -17912,10 +17912,18 @@ interface <dfn>HTMLPreElement</dfn> : <span>HTMLElement</span> {};</pre>
   and the like. For cases like ASCII art, it is likely that an alternative presentation, such as a
   textual description, would be more universally accessible to the readers of the document.</p>
 
-  <p>To represent a block of computer code, the <code>pre</code> element can be used with a
-  <code>code</code> element; to represent a block of computer output the <code>pre</code> element
-  can be used with a <code>samp</code> element. Similarly, the <code>kbd</code> element can be used
-  within a <code>pre</code> element to indicate text that the user is to enter.</p>
+  <p>When representing a block of computer code, there is no formal way to indicate the language
+  being marked up. Authors who wish to mark up <code>pre</code> elements with the language used
+  (e.g. so that syntax-highlighting tools can apply the appropriate syntax highlighting) can add a
+  <code data-x="attr-class">class</code> attribute with a particular value (e.g. a class value
+  prefixed with "<code data-x="">language-</code>").</p>
+
+  <p>To mark up a preformatted block that is some combination of computer code, computer output, and
+  user input, the <code>code</code>, <code>samp</code>, and <code>kbd</code> elements can be used
+  within the <code>pre</code> element; the <code>code</code> element can be used to mark up the part
+  of the block that is computer code, the <code>samp</code> element can be used to mark up the part
+  that is computer output, and the <code>kbd</code> element can be used to mark up the part that is
+  user input.</p>
 
   <div w-nodev>
 
@@ -17929,11 +17937,23 @@ interface <dfn>HTMLPreElement</dfn> : <span>HTMLElement</span> {};</pre>
    <p>In the following snippet, a sample of computer code is presented.</p>
 
    <pre>&lt;p>This is the &lt;code>Panel&lt;/code> constructor:&lt;/p>
-&lt;pre>&lt;code>function Panel(element, canClose, closeHandler) {
+&lt;pre>function Panel(element, canClose, closeHandler) {
   this.element = element;
   this.canClose = canClose;
   this.closeHandler = function () { if (closeHandler) closeHandler() };
-}&lt;/code>&lt;/pre></pre>
+}&lt;/pre></pre>
+
+  </div>
+
+  <div class="example">
+
+   <p>In the following snippet, a <code data-x="attr-class">class</code> attribute is used to
+   indicate the language being marked up.</p>
+
+   <pre>&lt;pre ="language-pascal">var i: Integer;
+begin
+   i := 1;
+end.&lt;/pre></pre>
 
   </div>
 
@@ -21358,20 +21378,6 @@ keyword, which is followed by the &lt;code>.&lt;/code> punctuation character
 
   </div>
 
-  <div class="example">
-
-   <p>The following example shows how a block of code could be marked up using the <code>pre</code>
-   and <code>code</code> elements.</p>
-
-   <pre>&lt;pre>&lt;code class="language-pascal">var i: Integer;
-begin
-   i := 1;
-end.&lt;/code>&lt;/pre></pre>
-
-   <p>A class is used in that example to indicate the language used.</p>
-
-  </div>
-
   <p class="note">See the <code>pre</code> element for more details.</p>
 
 
@@ -22084,12 +22090,12 @@ interface <dfn>HTMLSpanElement</dfn> : <span>HTMLElement</span> {};</pre>
 
    <!-- extract from https://www.cs.cmu.edu/~dst/DeCSS/Gallery/vlc-dvd_css-c.txt -->
 
-   <pre>&lt;pre>&lt;code class="lang-c">&lt;span class="keyword">for&lt;/span> (&lt;span class="ident">j&lt;/span> = 0; &lt;span class="ident">j&lt;/span> &amp;lt; 256; &lt;span class="ident">j&lt;/span>++) {
+   <pre>&lt;pre code class="lang-c">&lt;span class="keyword">for&lt;/span> (&lt;span class="ident">j&lt;/span> = 0; &lt;span class="ident">j&lt;/span> &amp;lt; 256; &lt;span class="ident">j&lt;/span>++) {
   &lt;span class="ident">i_t3&lt;/span> = (&lt;span class="ident">i_t3&lt;/span> & 0x1ffff) | (&lt;span class="ident">j&lt;/span> &amp;lt;&amp;lt; 17);
   &lt;span class="ident">i_t6&lt;/span> = (((((((&lt;span class="ident">i_t3&lt;/span> >> 3) ^ &lt;span class="ident">i_t3&lt;/span>) >> 1) ^ &lt;span class="ident">i_t3&lt;/span>) >> 8) ^ &lt;span class="ident">i_t3&lt;/span>) >> 5) & 0xff;
   &lt;span class="keyword">if&lt;/span> (&lt;span class="ident">i_t6&lt;/span> == &lt;span class="ident">i_t1&lt;/span>)
     &lt;span class="keyword">break&lt;/span>;
-}&lt;/code>&lt;/pre></pre>
+}&lt;/pre></pre>
 
   </div>