Web Programming with HTML5, CSS, and JavaScript

2.9 pre Element

You should use the pre element for text that needs to have its whitespace preserved. Formally, pre stands for “preformatted text.” However, we prefer to pretend that it stands for “preserved whitespace” because that makes more sense. In Figure 2.5, take a look at the bottom haiku (the one that uses a pre container). Note the blank spaces and newlines. Those are whitespace characters from the source code, and we can thank the pre container for preserving them.

Also in Figure 2.5, note the bottom haiku’s monospace font. Monospace font is when each character’s width is uniform. By default, browsers display pre element text with monospace font. If you don’t like the default monospace font, you can use CSS to change the pre element ...