The <pre> Element
As defined in the HTML Living Standard, the <pre> (preformatted text) element represents a block of preformatted text. It preserves both spaces and line breaks.
Visual Example:
Line 1: This space is preserved.
Line 2:
Line 3: Indentation is also kept.
<pre>\n This text\n preserves whitespace.\n</pre>
View HTML Living Standard: The pre element
Pre vs. Code
The <pre> and <code> elements are often used together.
- <code>: A phrasing element used for short fragments of computer code.
- <pre>: A block element used for multi-line code blocks or ASCII art.
- Best Practice: Wrap a
<code>element inside a<pre>element for multi-line code snippets.
A11y Tip: Overflow and Scrolling
Because <pre> blocks can be very wide, always ensure they have overflow-x: auto in CSS. This prevents the entire page from scrolling horizontally, which is a major accessibility barrier for mobile users and those using zoom.