Preserving indentation in the <⁠pre⁠>

One typically indents HTML code when writing it to visualize the hierarchy of nested elements and for the sake of organization.

<div>
  <h1>hello</h1>
  <div>
    <span>world</span>
  </div>
<div>

<div>
<h1>hello</h1>
<div>
<span>world</span>
</div>
<div>

However, with <pre> tags, this indented whitespace is preserved in the displayed text:

<div>
  <pre>
    From the bells, bells, bells, bells,
    Bells, bells, bells—
  </pre>
  <small>- Edgar Allan Poe</small>
</div>

    From the bells, bells, bells, bells,
    Bells, bells, bells—

- Edgar Allan Poe

A typical solution is to sacrifice hierarchy by removing the indentation from the content of the <pre>.

<div>
  <pre>
From the bells, bells, bells, bells,
Bells, bells, bells—
  </pre>
  <small>- Edgar Allan Poe</small>
</div>

From the bells, bells, bells, bells,
Bells, bells, bells—

- Edgar Allan Poe

Better solution: the CSS property white-space: pre-line :

<div>
  <pre style="white-space: pre-line;">
    From the bells, bells, bells, bells,
    Bells, bells, bells—
  </pre>
  <small>- Edgar Allan Poe</small>
</div>

From the bells, bells, bells, bells,
Bells, bells, bells—

- Edgar Allan Poe

edgar allan poe - the bells