<pre>
The pre element identifies that text enclosed in the tags is “preformatted”. Visual User Agents (UAs)—Generally—leave white space intact, render text with a fixed-pitch font, disable automatic word wrap, and do not disable bidirectional processing. However, by using CSS, all of those UA default renderings may be over-ridden. However, two behaviors must be noted:
- The
preelement does not have word wrap behavior. - No block-level elements may be used.
[Note: This may be translated as whatever content is between the pre tags will be rendered as inserted. However! content will be rendered in a visual user agent, i.e., browser, as it has been visually composed in the source code and! it will be rendered in Assistive Technology devices, e.g., screen readers, as normal text. Further, pre cannot be used in the paragraph (p) element, if the document is expected to pass conformance validation.]
- Start tag:
<pre>- End tag:
</pre>
- Example [Basic]:
-
`Twas brillig, and the slithy toves Did gyre and gimble in the wabe: All mimsy were the borogoves, And the mome raths outgrabe. - Code:
-
<div> <pre> `Twas brillig, and the slithy toves Did gyre and gimble in the wabe: All mimsy were the borogoves, And the mome raths outgrabe. </pre> </div> - [Note: White space has been displayed accordingly (without the use of paragraphs or line breaks or style sheet text-indents) and the default
font-familyhas been rendered.]
- Example [Basic (Word Wrap Issue)]:
-
Browser Rendering
[Note: This may be translated as whatever content is between the
pretags will be rendered as inserted. However! content will be rendered in a visual user agent, i.e., browser, as it has been visually composed in the source code and! it will be rendered in Assistive Technology devices, e.g., screen readers, as normal text. Further,precannot be used in the paragraph (p) element, if the document is expected to pass conformance validation.]Line Break Rendering
[Line breaks marked » —Ed.]
[Note: This may be translated as whatever content is between the
pretags will be rendered as inserted. »
However! content will be rendered in a visual user agent, i.e., browser, as it has been visually composed »
in the source code and! it will be rendered in Assistive Technology devices, e.g., screen readers, as normal »
text. Further,precannot be used in the paragraph (p) element, if the document is expected to pass »
conformance validation.] - Code [Line Breaks]:
-
<pre class="note prePadding">[Note: This may be translated as whatever content is between the <code>pre</code> »
tags will be rendered as inserted. <span class="codeBreak">»</span><br> However! content will be rendered in a visual user agent, i.e., browser, as it has been <strong>visually</strong> »
composed <span class="codeBreak">»</span><br> in the source code and! it will be rendered in Assistive Technology devices, e.g., screen readers, as »
normal <span class="codeBreak">»</span><br> text. Further, <code>pre</code> cannot be used in the paragraph (<code>p</code>) element, if the document »
is expected to pass <span class="codeBreak">»</span><br> conformance validation.]
- Example [Accessibility Useless]:
-
Il Pleut by Guillaume Apollinare
I c e é é l e t c c s o o p t c u u l e t t e v s e e u o t u n s t s u i o d a l m e a g b s u e p e s s l r v s e o i c u l i a t e x q b s u r t d i é a l e l s n i d e f P s i n e l e s s m e m u p q q e t r u u s e e i m n c e n l t o r e e e m v n m e t r r e i e e l à g t s l r i i e h e e u e t n e s n n l e n e e l s i t n e r t s r l e t e e é n o n t c u d a o t é h i n d a e t u a u n r n i t t e n s u e m n p t o d i l r e v e e t e u n e m r r s a s e b n a m v d t s ê i e m e u e v n ô i e d l a g l a n o e n s u s c t i l t a e e e u n l r n s e i e o t c u t u m v e l u e s a s n i i i r q r e u s e - [Note: White space has been displayed accordingly (without the use of paragraphs or line breaks or style sheet text-indents) and the default
font-familyhas been rendered.] - Code:
-
<div> <pre> I c e é é l e t c c s o o p t c u u l e t t e v s e e u o t u n s t s u i o d a l m e a g b s u e p e s s l r v s e o i c u l i a t e x q b s u r t d i é a l e l s n i d e f P s i n e l e s s m e m u p q q e t r u u s e e i m n c e n l t o r e e e m v n m e t r r e i e e l à g t s l r i i e h e e u e t n e s n n l e n e e l s i t n e r t s r l e t e e é n o n t c u d a o t é h i n d a e t u a u n r n i t t e n s u e m n p t o d i l r e v e e t e u n e m r r s a s e b n a m v d t s ê i e m e u e v n ô i e d l a g l a n o e n s u s c t i l t a e e e u n l r n s e i e o t c u t u m v e l u e s a s n i i i r q r e u s e </pre> </div>
This use renders content visually; however, assistive technologies render this content otherwise—
I c e é é l e t c c s o o p t c u u l e t t e v s e e u o t u n s t s u i o d a l m e a g b s u e p e s s l r v s e o i c u l i a t e x q b s u r t d i é a l e l s n i d e f P s i n e l e s s m e m u p q q e t r u u s e e i m n c e n l t o r e e e m v n m e t r r e i e e l à g t s l r i i e h e e u e t n e s n n l e n e e l s i t n e r t s r l e t e e é n o n t c u d a o t é h i n d a e t u a u n r n i t t e n s u e m n p t o d i l r e v e e t e u n e m r r s a s e b n a m v d t s ê i e m e u e v n ô i e d l a g l a n o e n s u s c t i l t a e e e u n l r n s e i e o t c u t u m v e l u e s a s n i i i r q r e u s e
—since the content is read Left-to-Right, white-space—as rendered by the preformatted element—is collapsed and carriage-returns are ignored.
[Note: An example of the pre element used with HTML/CSS for Accessibility rendering, 'Il Pleut' Typography made with CSS.]
Or, as this
I c e é é l e t c c s o o p t c u u l e t t e v s e e u o t u n s t s u i o d a l m e a g b s u e p e s s l r v s e o i c u l i a t e x q b s u r t d i é a l e l s n i d e f P s i n e l e s s m e m u p q q e t r u u s e e i m n c e n l t o r e e e m v n m e t r r e i e e l à g t s l r i i e h e e u e t n e s n n l e n e e l s i t n e r t s r l e t e e é n o n t c u d a o t é h i n d a e t u a u n r n i t t e n s u e m n p t o d i l r e v e e t e u n e m r r s a s e b n a m v d t s ê i e m e u e v n ô i e d l a g l a n o e n s u s c t i l t a e e e u n l r n s e i e o t c u t u m v e l u e s a s n i i i r q r e u s e
</pre>
