Inspect the working example
The lesson displays the source-looking text <h2>Workshop notes</h2> & examples. The source uses character references so those angle brackets and the ampersand are parsed as text rather than markup.
| Case | Input or inspection | Result and meaning |
|---|---|---|
| Stored source | Inspect < and > | Parsed as < and > characters in the text node |
| Rendered code text | Read code.textContent | <h2>Workshop notes</h2> & examples |
| Descendant headings | Count code h2 elements | Zero; no heading was created |
Follow the browser mechanism
code marks a fragment as computer code but does not change the HTML parser into a plain-text mode. Character references provide the literal special characters. pre supplies preformatted-text semantics; the local lesson stylesheet lets long source text wrap for reading. Rendering text this way is distinct from validating arbitrary HTML.
Raw tags inside code are parsed as elements
The counterexample places a raw h2 tag inside code. code is not an escaping boundary. The example is deliberately isolated so its malformed code content does not affect the lesson page.
<pre><code><h2>Workshop notes</h2> & examples</code></pre>The counterexample creates one actual h2 descendant and its code.textContent lacks the literal opening and closing tags. The working fixture creates zero h2 descendants and retains both tag strings.
Try the repair
To display the text “A & B” in this HTML code block, should the source contain A & B or should you create an element named amp?
Show the worked answer
Write A & B as text source. & is a character reference that becomes one ampersand character; it is not an element.
- Compare source, textContent and descendant element count.
- Keep the full text readable at narrow frame widths without clipping.