Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > HTML/XHTML

  • Print
  • + Share This
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 red-a.jpg, though you can also use it for text (hello, ASCII art!).

red-a.jpg 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

  1. Type <pre>.
  2. 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.
  3. Type </pre>.

Click to view larger image

red-b.jpg Notice that the indentation and line breaks are maintained in the pre content.

  • + Share This
  • 🔖 Save To Your Account