HTML <pre> Tag
➔ The <pre> element represents the preformatted text where the text preserves both space and line breaks and the text will appear as written in the source code.
➔ To display special characters inside <pre> element, the characters have to escape using their respective HTML entities.
pre tag syntax
<pre>
This text is
preformatted.
with all random
white spaces
and line breaks.
</pre>
Key features of the HTML pre tag.
➔ One behavior of the html p tag is that any multiple spaces are converted to a single space unless entity characters are used for whitespace and line breaks are ignored, while the pre tag preserves whitespace and line breaks as they are.
➔ The pre tag is a block level element which is why by default the pre tag always starts with a new line and occupies the full space available, although this behavior can be customized or changed.
The pre tag example.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML pre tag example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
</head>
<body>
<h1>HTML pre tag example</h1>
<pre>
This text is
preformatted.
with all random
white spaces
and line breaks.
</pre>
</body>
</html>
Copy the code and click on the "Try it Now" button to see how it works.
Common uses of the pre tag.
➔ The pre tag is most useful when the visual layout of the text is difficult to display in its original size and shape.
➔ The pre tag is used to display character-based art or diagrams where character spacing is important for proper display.
➔ To display any raw data, error messages, or output from a system in its original form, including any line breaks, the pre tag works perfectly in this case.
➔ To display random text, such as poetry or songs, preserving all white spaces and line breaks, the pre tag is used.
Supported Global attributes
Global attributes may be applied on all elements, although some elements may have no effect on them.
<accesskey>,
<class>,
<contenteditable>,
<contextmenu>,
<data-*>,
<dir>,
<draggable>,
<dropzone>,
<hidden>,
<id>,
<lang>,
<spellcheck>,
<style>,
<tabindex>,
<title>,
<translate>.
Supported Global Event Handler Attributes
Global Event Handler attributes may be applied on all elements, although some elements may have no effect on them.
<onabort>,
<onautocomplete>,
<onautocompleteerror>,
<onblur>,
<oncancel>,
<oncanplay>,
<oncanplaythrough>,
<onchange>,
<onclick>,
<onclose>,
<oncontextmenu>,
<oncuechange>,
<ondblclick>,
<ondrag>,
<ondragend>,
<ondragenter>,
<ondragleave>,
<ondragover>,
<ondragstart>,
<ondrop>,
<ondurationchange>,
<onemptied>,
<onended>,
<onerror>,
<onfocus>,
<oninput>,
<oninvalid>,
<onkeydown>,
<onkeypress>,
<onkeyup>,
<onload>,
<onloadeddata>,
<onloadedmetadata>,
<onloadstart>,
<onmousedown>,
<onmouseenter>,
<onmouseleave>,
<onmousemove>,
<onmouseout>,
<onmouseover>,
<onmouseup>,
<onmousewheel>,
<onpause>,
<onplay>,
<onplaying>,
<onprogress>,
<onratechange>,
<onreset>,
<onresize>,
<onscroll>,
<onseeked>,
<onseeking>,
<onselect>,
<onshow>,
<onsort>,
<onstalled>,
<onsubmit>,
<onsuspend>,
<ontimeupdate>,
<ontoggle>,
<onvolumechange>,
<onwaiting>.
Learning with HTML Editor "Try it Now"
You can edit the HTML code and view the result using online editor.
Example
<pre>
The pre element represents
the preformatted text where the text
preserves both space and line breaks
and the text will
appear as written
in the source code.
</pre>
Click on the "Try it Now" button to see how it works.