- Adding a Paragraph
- Specifying Fine Print
- Marking Important and Emphasized Text
- Creating a Figure
- Indicating a Citation or Reference
- Quoting Text
- Specifying Time
- Explaining Abbreviations
- Defining a Term
- Creating Superscripts and Subscripts
- Adding Author Contact Information
- Noting Edits and Inaccurate Text
- Marking Up Code
- Using Preformatted Text
- Highlighting Text
- 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 of text according to the width of the browser 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).
To use preformatted text
- Type <pre>.
- Type or paste 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 
.