HTML <pre> Tag - HTML Tag

The <pre> HTML 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 monospaced, font. Whitespace inside this element is displayed as written.

Definition and Usage

The <pre> tag defines preformatted text.

Text in a <pre> element is displayed in a fixed-width font, and the text preserves both spaces and line breaks. The text will be displayed exactly as written in the HTML source code.

Also look at:

Tag	Description
<code>	Defines a piece of computer code
<samp>	Defines sample output from a computer program
<kbd>	Defines keyboard input
<var>	Defines a variable

Browser Support

Global Attributes

The <pre> tag also supports the Global Attributes in HTML.

Event Attributes

The <pre> tag also supports the Event Attributes in HTML.

How to add HTML <pre> Tag

It is Preformatted a text.

index.html

Example: HTML

<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both      spaces and
line breaks
</pre>

Output should be:

How to create a pre-formatted text with a fixed width (with CSS)

See the Example and Learn More.

index.html

Example: HTML

<h2>Standard pre</h2>
<pre>This is a standard pre. It will use as much space as it needs.</pre>

<h2>Fixed width pre</h2>
<div style="width:200px;overflow:auto">
<pre>This is a pre with a fixed width. It will use as much space as specified.</pre>
</div>

Output should be:

How to set Default CSS Settings on HTML pre Tag

Most browsers will display the <pre> element with the following default values.

index.html

Example: HTML

<style>
pre {
  display: block;
  font-family: monospace;
  white-space: pre;
  margin: 1em 0;
} 
</style>
<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both      spaces and
line breaks
</pre>

Output should be:

html pre

HTML <!--...--> Tag	HTML Tag
HTML <!DOCTYPE> Declaration	HTML Tag
HTML Elements and Doctypes	HTML Tag
HTML <a> Tag	HTML Tag
HTML <abbr> Tag	HTML Tag
HTML <acronym> Tag	HTML Tag
HTML <address> Tag	HTML Tag
HTML <applet> Tag	HTML Tag
HTML <area> Tag	HTML Tag
HTML <article> Tag	HTML Tag
HTML <aside> Tag	HTML Tag
HTML <audio> Tag	HTML Tag
HTML <b> Tag	HTML Tag
HTML <base> Tag	HTML Tag
HTML <basefont> Tag	HTML Tag
HTML <bdi> Tag	HTML Tag
HTML <bdo> Tag	HTML Tag
HTML <big> Tag	HTML Tag
HTML <blockquote> Tag	HTML Tag
HTML <body> Tag	HTML Tag
HTML <br> Tag	HTML Tag
HTML <button> Tag	HTML Tag
HTML <canvas> Tag	HTML Tag
HTML <caption> Tag	HTML Tag
HTML <center> Tag	HTML Tag
HTML <cite> Tag	HTML Tag
HTML <code> Tag	HTML Tag
HTML <col> Tag	HTML Tag
How to create HTML <colgroup> Tag	HTML Tag
HTML <data> Tag	HTML Tag
HTML <datalist> Tag	HTML Tag
HTML <dd> Tag	HTML Tag
HTML <del> Tag	HTML Tag
HTML <details> Tag	HTML Tag
HTML <dfn> Tag	HTML Tag
HTML <dialog> Tag	HTML Tag
HTML <dir> Tag	HTML Tag
HTML <div> Tag	HTML Tag
HTML <dl> Tag	HTML Tag
HTML <dt> Tag	HTML Tag
HTML <em> Tag	HTML Tag
HTML <embed> Tag	HTML Tag
HTML <fieldset> Tag	HTML Tag
HTML <figcaption> Tag	HTML Tag
HTML <figure> Tag	HTML Tag
HTML <font> Tag	HTML Tag
HTML <footer> Tag	HTML Tag
HTML <form> Tag	HTML Tag
HTML <frame> Tag	HTML Tag
HTML <frameset> Tag	HTML Tag
HTML <h1> to <h6> Tags	HTML Tag
HTML <head> Tag	HTML Tag
HTML <header> Tag	HTML Tag
HTML <hgroup> Tag	HTML Tag
HTML <hr> Tag	HTML Tag
HTML <html> Tag	HTML Tag
HTML <i> Tag	HTML Tag
HTML <iframe> Tag	HTML Tag
HTML <img> Tag	HTML Tag
HTML <input> Tag	HTML Tag
HTML <ins> Tag	HTML Tag
HTML <kbd> Tag	HTML Tag
HTML <label> Tag	HTML Tag
HTML <legend> Tag	HTML Tag
HTML <li> Tag	HTML Tag
HTML <link> Tag	HTML Tag
HTML <main> Tag	HTML Tag
HTML <map> Tag	HTML Tag
HTML <mark> Tag	HTML Tag
HTML <menu> Tag	HTML Tag
HTML <meta> Tag	HTML Tag
HTML <meter> Tag	HTML Tag
HTML <nav> Tag	HTML Tag
HTML <noframes> Tag	HTML Tag
HTML <noscript> Tag	HTML Tag
HTML <object> Tag	HTML Tag
HTML <ol> Tag	HTML Tag
HTML <optgroup> Tag	HTML Tag
HTML <option> Tag	HTML Tag
HTML <output> Tag	HTML Tag
HTML <p> Tag	HTML Tag
HTML <param> Tag	HTML Tag
HTML <picture> Tag	HTML Tag
HTML <pre> Tag	HTML Tag
HTML <progress> Tag	HTML Tag
HTML <q> Tag	HTML Tag
HTML <rp> Tag	HTML Tag
HTML <rt> Tag	HTML Tag
HTML <ruby> Tag	HTML Tag
HTML <s> Tag	HTML Tag
HTML <samp> Tag	HTML Tag
HTML <script> Tag	HTML Tag
HTML <search> Tag	HTML Tag
HTML <section> Tag	HTML Tag
HTML <select> Tag	HTML Tag
HTML <small> Tag	HTML Tag
HTML <source> Tag	HTML Tag
HTML <span> Tag	HTML Tag
HTML <strike> Tag	HTML Tag
HTML <strong> Tag	HTML Tag
HTML <style> Tag	HTML Tag
HTML <sub> Tag	HTML Tag
HTML <summary> Tag	HTML Tag
HTML <sup> Tag	HTML Tag
HTML <svg> Tag	HTML Tag
HTML <table> Tag	HTML Tag
HTML <tbody> Tag	HTML Tag
HTML <td> Tag	HTML Tag
HTML <template> Tag	HTML Tag
HTML <textarea> Tag	HTML Tag
HTML <tfoot> Tag	HTML Tag
HTML <th> Tag	HTML Tag
HTML <thead> Tag	HTML Tag
HTML <time> Tag	HTML Tag
HTML <title> Tag	HTML Tag
HTML <tr> Tag	HTML Tag
HTML <track> Tag	HTML Tag
HTML <tt> Tag	HTML Tag
HTML <u> Tag	HTML Tag
HTML <ul> Tag	HTML Tag
HTML <var> Tag	HTML Tag
HTML <video> Tag	HTML Tag
How to add HTML <wbr> Tag	HTML Tag

Single Articles

How to add HTML <pre> Tag	HTML Tag
How to create a pre-formatted text with a fixed width (with CSS)	HTML Tag
How to set Default CSS Settings on HTML pre Tag	HTML Tag

Type:	Develop
Category:	Web Tutorial
Sub Category:	HTML Tag
Uploaded by:	Admin

Reffered: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre