An eraser deleting the word <pre>

Time for de<pre>cation?

The <pre> element

The semantics problem

  • if it appears with <code>, it is code;
  • if it appears with <samp> it is a sample or output;
  • if it appears with <kbd> it is a keyboard input...
pre {
display: block;
font-family: monospace;
white-space: pre;
margin: 1em 0px;

Arguments supporting <pre>

  • <pre> has semantic value
  • <pre> doesn't have a semantic alternative
  • <pre> provides key accessibility information
  • <pre> is shorter than the CSS alternative
  • <pre> is useful for debugging

<pre> has semantic value

<pre> provides key accessibility information

  1. At the moment, no screen reader interprets <pre> differently. It is read how any paragraph or <div> is read. There's nothing special about it.
  2. Screen readers consider CSS when reading elements: display, opacity, visibility, etc. The screen readers could read white-space: pre differently, too.

<pre> is shorter than the CSS alternative

.pre {
font-family: monospace;
white-space: pre;
<article class="pre">

<pre> is useful for debugging

  1. <pre> is not the best semantic element for the job: <samp> or <output> would be more fit.
  2. We can style any element to respect white spaces (if that’s what we really need).
  3. The lack of debugging features in a language should not condition another language.

The precedents

  • <center>: used to center its content.
  • <big>: to indicate segments with larger font size.
  • <font>: that defined the font size, color, and face for the content.




Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Alvaro Montoro

Alvaro Montoro

Full-Stack Software Engineer, Mobile Developer, Web technologies enthusiast. CSS aficionado. Twitter: @alvaro_montoro