CHAPTER 11 ■ SPACING CONTENTCode
Problem You want to identify an element as containing code, and you want to control when it
preserves whitespace, when it breaks across lines, and when it is displayed as a block.
Solution You can use to identify text as computer code. The meaning of this element is well
understood by search engines and document processors. By default, is displayed
inline, does not preserve whitespace, and can be wrapped across lines. When you want to
display a block of code, add the Blocked design pattern. When you want to preserve
whitespace in , add the Preserved design pattern. When you do not want code to
wrap across lines, add the Nowrap design pattern. Note that you cannot use Preserved and
Nowrap at the same time.
HTML Use the element to tag text as code.
Assign blocked, preserved, or nowrap classes to , or assign classes or IDs with names
of your choosing.
CSS Apply styles to your chosen class or ID as follows:
Use white-space:preserve to preserve whitespace in .
Use white-space:nowrap to prevent text in the from wrapping.
Use display:block to display as a block.
Pattern^
HTML CODE ^
CSS .blocked { display:block; }^
.preserved { white-space:pre; }
.nowrap { white-space:nowrap; }
Location This pattern works everywhere inline elements can be used.
Variations HTML provides four additional inline elements that are similar to . They are ,
, , and . identifies its contents as a computer variable.
identifies its contents as sample output from a computer program. identifies a title of
work (e.g., a book, a song, a poem, a film, etc.). identifies its contents as keypresses
that a user should type on a keyboard to accomplish a specific task. This design pattern can
easily be applied to these elements to fine-tune how they are rendered.
Related to Blocked, Nowrap, Preserved; Inline Elements (Chapter 2)