Code display markup
Use pre, code, br, kbd, and samp when a page needs to show technical text clearly.
Inline code
Short names belong in a sentence, such as the
getElementById method or the class attribute.
Inline code keeps the surrounding paragraph flowing while marking a technical term.
Multiline pre and code
Show a whole snippet with preserved line breaks and spaces:
<div class="sample-block">
<p id="title" class="note">First paragraph</p>
<p class="note">Second paragraph</p>
</div>
Escape < and > in the source text so the browser shows tags instead of creating them.
Forced line breaks with br
Try value: title
Method: getElementById
Result: one element or null
Use br for short stacked lines of related text, not for page layout.
kbd and samp
Press Enter after typing a selector. Sample console output: Found 2 matches
kbd marks keys. samp marks sample output from a program.