1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
|
<header><h1><pre>: The Preformatted Text element</h1></header><div class="section-content"><p>The <code><pre></code> <a href="../index">HTML</a> element represents preformatted text which is to be presented exactly as written in the HTML file. The text is typically rendered using a non-proportional, or <a href="https://en.wikipedia.org/wiki/Monospaced_font" target="_blank">monospaced</a>, font. Whitespace inside this element is displayed as written.</p></div>
<h2 id="try_it">Try it</h2>
<div class="section-content">
<iframe class="interactive is-tabbed-standard-height" height="200" src="https://interactive-examples.mdn.mozilla.net/pages/tabbed/pre.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe> <p>If you have to display reserved characters such as <code><</code>, <code>></code>, <code>&</code>, and <code>"</code> within the <code><pre></code> tag, the characters must be escaped using their respective <a href="https://developer.mozilla.org/en-US/docs/Glossary/Entity">HTML entity</a>.</p>
</div>
<h2 id="attributes">Attributes</h2>
<div class="section-content">
<p>This element only includes the <a href="../global_attributes">global attributes</a>.</p> <dl> <dt id="cols">
<a href="#cols"><code>cols</code></a> <abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr>
</dt> <dd> <p>Contains the <em>preferred</em> count of characters that a line should have. It was a non-standard synonym of <a href="#width"><code>width</code></a>. To achieve such an effect, use CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/width"><code>width</code></a> instead.</p> </dd> <dt id="width">
<a href="#width"><code>width</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> <abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr>
</dt> <dd> <p>Contains the <em>preferred</em> count of characters that a line should have. Though technically still implemented, this attribute has no visual effect; to achieve such an effect, use CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/width"><code>width</code></a> instead.</p> </dd> <dt id="wrap">
<a href="#wrap"><code>wrap</code></a> <abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr>
</dt> <dd> <p>Is a <em>hint</em> indicating how the overflow must happen. In modern browser this hint is ignored and no visual effect results in its present; to achieve such an effect, use CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/white-space"><code>white-space</code></a> instead.</p> </dd> </dl>
</div>
<h2 id="accessibility_concerns">Accessibility concerns</h2>
<div class="section-content">
<p>It is important to provide an alternate description for any images or diagrams created using preformatted text. The alternate description should clearly and concisely describe the image or diagram's content.</p> <p>People experiencing low vision conditions and browsing with the aid of assistive technology such as a screen reader may not understand what the preformatted text characters are representing when they are read out in sequence.</p> <p>A combination of the <a href="figure"><code><figure></code></a> and <a href="figcaption"><code><figcaption></code></a> elements, supplemented by the <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA">ARIA</a> <code>role</code> and <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label"><code>aria-label</code></a> attributes on the <code>pre</code> element allow the preformatted <a href="https://developer.mozilla.org/en-US/docs/Glossary/ASCII">ASCII</a> art to be announced as an image with alternative text, and the <code>figcaption</code> serving as the image's caption.</p>
</div>
<h3 id="example">Example</h3>
<div class="section-content">
<div class="code-example">
<p class="example-header"><span class="language-name">html</span></p>
<pre data-signature="B5YQB9OgIEPWVPXxsTuXL2miUqASlopw2LLCKbutcpc=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>figure</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>pre</span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>img<span class="token punctuation">"</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ASCII COW<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
___________________________
<span class="token entity named-entity">&lt;</span> I'm an expert in my field. <span class="token entity named-entity">&gt;</span>
---------------------------
\ ^__^
\ (oo)\_______
(__)\ )\/\
||----w |
|| ||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>pre</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>figcaption</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>cow-caption<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
A cow saying, "I'm an expert in my field." The cow is illustrated using
preformatted text characters.
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>figcaption</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>figure</span><span class="token punctuation">></span></span>
</pre>
</div> <ul> <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.1_%E2%80%94_providing_text_alternatives_for_non-text_content">MDN Understanding WCAG, Guideline 1.1 explanations</a></li> <li><a href="https://www.w3.org/TR/WCAG20-TECHS/H86.html" target="_blank">H86: Providing text alternatives for ASCII art, emoticons, and leetspeak | W3C Techniques for WCAG 2.0</a></li> </ul>
</div>
<h2 id="examples">Examples</h2>
<h3 id="basic_example">Basic example</h3>
<div class="section-content">
<h4 id="html">HTML</h4> <div class="code-example">
<p class="example-header"><span class="language-name">html</span></p>
<pre data-signature="iIQd1jZopQJdpu+WHzSH6n5jyMjDI5+WBXiveyKwjEk=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Using CSS to change the font color is easy.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>pre</span><span class="token punctuation">></span></span>
body {
color: red;
}
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>pre</span><span class="token punctuation">></span></span>
</pre>
</div> <h4 id="result">Result</h4>
<div class="code-example" id="sect1">
<iframe class="sample-code-frame" title="Basic example sample" id="frame_basic_example" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/pre/runner.html?id=basic_example" loading="lazy"></iframe>
</div>
</div>
<h3 id="escaping_reserved_characters">Escaping reserved characters</h3>
<div class="section-content">
<h4 id="html_2">HTML</h4> <div class="code-example">
<p class="example-header"><span class="language-name">html</span></p>
<pre data-signature="6tKQNA302zYigID+/jL3rLMNftHbaURc1QMq1nXNeOc=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>pre</span><span class="token punctuation">></span></span>
let i = 5;
if (i <span class="token entity named-entity">&lt;</span> 10 <span class="token entity named-entity">&amp;</span><span class="token entity named-entity">&amp;</span> i <span class="token entity named-entity">&gt;</span> 0)
return <span class="token entity named-entity">&quot;</span>Single Digit Number<span class="token entity named-entity">&quot;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>pre</span><span class="token punctuation">></span></span>
</pre>
</div> <h4 id="result_2">Result</h4>
<div class="code-example" id="sect2">
<iframe class="sample-code-frame" title="Escaping reserved characters sample" id="frame_escaping_reserved_characters" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/pre/runner.html?id=escaping_reserved_characters" loading="lazy"></iframe>
</div>
</div>
<h2 id="technical_summary">Technical summary</h2>
<div class="section-content"><figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th scope="row"><a href="../content_categories">Content categories</a></th> <td>
<a href="../content_categories#flow_content">Flow content</a>, palpable content.</td> </tr> <tr> <th scope="row">Permitted content</th> <td>
<a href="../content_categories#phrasing_content">Phrasing content</a>.</td> </tr> <tr> <th scope="row">Tag omission</th> <td>None, both the starting and ending tag are mandatory.</td> </tr> <tr> <th scope="row">Permitted parents</th> <td> Any element that accepts <a href="../content_categories#flow_content">flow content</a>. </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><code><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/generic_role">generic</a></code></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td>Any</td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLPreElement"><code>HTMLPreElement</code></a></td> </tr> </tbody> </table></div></figure></div>
<h2 id="specifications">Specifications</h2>
<div class="_table"><table class="standard-table">
<thead><tr><th scope="col">Specification</th></tr></thead>
<tbody><tr><td><a href="https://html.spec.whatwg.org/multipage/grouping-content.html#the-pre-element">HTML Standard <br><small># the-pre-element</small></a></td></tr></tbody>
</table></div>
<h2 id="browser_compatibility">Browser compatibility</h2>
<div class="_table"><table>
<thead>
<tr id="bct-browser-type">
<th></th>
<th colspan="6">Desktop</th>
<th colspan="6">Mobile</th>
</tr>
<tr id="bct-browsers">
<th></th>
<th>Chrome</th>
<th>Edge</th>
<th>Firefox</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
<th>WebView Android</th>
<th>Chrome Android</th>
<th>Firefox for Android</th>
<th>Opera Android</th>
<th>Safari on IOS</th>
<th>Samsung Internet</th>
</tr>
</thead>
<tbody>
<tr>
<th><code>pre</code></th>
<td class="bc-supports-yes">1</td>
<td class="bc-supports-yes">12</td>
<td class="bc-supports-yes">1</td>
<td class="bc-supports-yes">Yes</td>
<td class="bc-supports-yes">15</td>
<td class="bc-supports-yes">≤4</td>
<td class="bc-supports-yes">4.4</td>
<td class="bc-supports-yes">18</td>
<td class="bc-supports-yes">4</td>
<td class="bc-supports-yes">14</td>
<td class="bc-supports-yes">≤3.2</td>
<td class="bc-supports-yes">1.0</td>
</tr>
<tr>
<th><code>cols</code></th>
<td class="bc-supports-no">No</td>
<td class="bc-supports-no">No</td>
<td class="bc-supports-no">1–29</td>
<td class="bc-supports-no">No</td>
<td class="bc-supports-no">No</td>
<td class="bc-supports-no">No</td>
<td class="bc-supports-no">No</td>
<td class="bc-supports-no">No</td>
<td class="bc-supports-no">4–29</td>
<td class="bc-supports-no">No</td>
<td class="bc-supports-no">No</td>
<td class="bc-supports-no">No</td>
</tr>
<tr>
<th><code>width</code></th>
<td class="bc-supports-yes"><details><summary>1</summary>Specifying the <code>width</code> attribute has no layout effect.</details></td>
<td class="bc-supports-yes"><details><summary>12</summary>Specifying the <code>width</code> attribute has no layout effect.</details></td>
<td class="bc-supports-yes"><details><summary>1</summary>Since Firefox 29, specifying the <code>width</code> attribute has no layout effect.</details></td>
<td class="bc-supports-yes"><details><summary>Yes</summary>Specifying the <code>width</code> attribute has no layout effect.</details></td>
<td class="bc-supports-yes"><details><summary>15</summary>Specifying the <code>width</code> attribute has no layout effect.</details></td>
<td class="bc-supports-yes"><details><summary>3</summary>Specifying the <code>width</code> attribute has no layout effect.</details></td>
<td class="bc-supports-yes"><details><summary>4.4</summary>Specifying the <code>width</code> attribute has no layout effect.</details></td>
<td class="bc-supports-yes"><details><summary>18</summary>Specifying the <code>width</code> attribute has no layout effect.</details></td>
<td class="bc-supports-yes"><details><summary>4</summary>Since Firefox 29, specifying the <code>width</code> attribute has no layout effect.</details></td>
<td class="bc-supports-yes"><details><summary>14</summary>Specifying the <code>width</code> attribute has no layout effect.</details></td>
<td class="bc-supports-yes"><details><summary>2</summary>Specifying the <code>width</code> attribute has no layout effect.</details></td>
<td class="bc-supports-yes"><details><summary>1.0</summary>Specifying the <code>width</code> attribute has no layout effect.</details></td>
</tr>
<tr>
<th><code>wrap</code></th>
<td class="bc-supports-yes">16</td>
<td class="bc-supports-yes">79</td>
<td class="bc-supports-yes">1</td>
<td class="bc-supports-no">No</td>
<td class="bc-supports-yes">15</td>
<td class="bc-supports-yes">6</td>
<td class="bc-supports-yes">4.4</td>
<td class="bc-supports-yes">18</td>
<td class="bc-supports-yes">4</td>
<td class="bc-supports-yes">14</td>
<td class="bc-supports-yes">6</td>
<td class="bc-supports-yes">1.0</td>
</tr>
</tbody>
</table></div>
<h2 id="see_also">See also</h2>
<div class="section-content"><ul> <li>CSS: <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/white-space"><code>white-space</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/word-break"><code>word-break</code></a>
</li> <li><a href="https://developer.mozilla.org/en-US/docs/Glossary/Entity">HTML Entity</a></li> <li>Related element: <a href="code"><code><code></code></a>
</li> </ul></div><div class="_attribution">
<p class="_attribution-p">
© 2005–2023 MDN contributors.<br>Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.<br>
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre</a>
</p>
</div>
|
