Semantic code-related elements clarify documentation inside prose.
<code>: short snippet inline.<pre>: preserves whitespace—often wrapscodefor blocks.<kbd>: user input keys.<samp>: sample program output.<var>: variables in formulas.
<p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save.</p>
<p>Shell printed <samp>done in 431ms</samp>.</p>
<p>Equation <var>a</var><sup>2</sup> + <var>b</var><sup>2</sup>.</p>
<pre><code>npm run build</code></pre>Rendered output
Press Ctrl + S to save.
Shell printed done in 431ms.
Equation a2 + b2
npm run buildEscaping characters
Inside HTML text, escape <, >, & as <, >, & when showing literal markup.
Syntax highlighting
Highlight libraries operate on text nodes—ensure templating escapes user-supplied examples to avoid XSS.
Line numbers & wraps
Pair pre with CSS overflow or horizontal scroll for long commands.
XSS reminders
If code samples interpolate user-supplied snippets, sanitize or encode—you are pasting attacker-controlled HTML adjacent to prose.
Syntax tokens
Pair semantic code with highlighters thoughtfully; unreadable neon themes violate contrast guidelines independently of HTML correctness.
Important interview questions and answers
- Q: What is the practical difference between `id` and `class`?
A: `id` must be unique and is used for fragments/labeling; `class` is reusable for styling and behavior grouping. - Q: Why is `defer` commonly preferred for scripts?
A: It preserves HTML parsing, executes after parse, and avoids blocking rendering unlike classic synchronous scripts. - Q: How do `srcset` and `sizes` work together?
A: `srcset` provides candidate files and `sizes` tells expected rendered width so the browser can pick an optimal resource.
Tip: Escape < in code samples with entities or wrap in pre.