- Starting a New Paragraph
- Adding Author Contact Information
- Creating a Figure
- Specifying Time
- Marking Important and Emphasized Text
- Indicating a Citation or Reference
- Quoting Text
- Highlighting Text
- Explaining Abbreviations
- Defining a Term
- Creating Superscripts and Subscripts
- Noting Edits and Inaccurate Text
- Marking Up Code
- Using Preformatted Text
- Specifying Fine Print
- Creating a Line Break
- Creating Spans
- Other Elements
This chapter is from the book
This chapter is from the book
This chapter is from the book
Using Preformatted Text
Usually, browsers collapse all extra returns and spaces and automatically break lines according to the size of the window. Preformatted text lets you maintain and display the original line breaks and spacing that you’ve inserted in the text. It is ideal for computer code examples 
, though you can also use it for text (hello, ASCII art!).
The pre element is ideal for text that contains important spaces and line breaks, like the bit of CSS code shown here. Note, too, the use of the code element to mark up pieces of code or code-related text outside of pre (see “Marking Up Code” for more details).
...a <body> <p>Add this to your style sheet if you want to display a dotted border underneath the<code>abbr</code>element whenever it has a<code>title</code>attribute.</p><pre><code>abbr[title] { border-bottom: 1px dotted #000; }</code></pre></body> </html>
To use preformatted text
- Type <pre>.
- Type or copy the text that you wish to display as is, with all the necessary spaces, returns, and line breaks. Unless it is code, do not mark up the text with any HTML, such as p elements.
- Type </pre>.
TIP
Preformatted text is typically displayed with a monospaced font like Courier or Courier New 
. You can use CSS to change the font, if you like (see Chapter 10).
Notice that the indentation and line breaks are maintained in the pre content.
TIP
pre, like a paragraph, always displays on a new line by default 
.