The <pre> html tag
Overview
HTML tags are good at the job they do, but often there are limitations. In normal copy there is often a double space after a full stop, if you try this in HTML you will see the extra space is ignored when displayed to screen. the <pre> HTML tag is displays text using a fixed spaced font, which also has the advantage of retaining spaces and line breaks. In short using the <pre> tag will allow you to keep double spaces in your copy. When text is put between the opening and closing <pre> tag it is displayed as a Preformatted text. By default the font will be Courier, but this can be changed.
Basic Usage
<pre>Some Preformatted text in here</pre>
Any text between the opening and closing tag will be displayed as a Preformatted text.
Advance Usage
It is possible to style and add functionality to the <pre> tag, this is done by adding an attribute to after the pre in the opening <pre> tag
Attributes allowed for the <pre>tag include :-class, dir, id, lang, style and title.
In most cases class and id are used and its basic usage is shown below
<pre id=”header”>Some Preformatted text</pre>
With all attributes there is a space after the initial p then the attribute name, then an equal’s sign and the identifier of the attribute in double quotes.
Both id and class attributes refer to CSS styling of the element and is either stored in the <head> of the webpage on in an external file.
With id this usually refers to a single instance on a page where as class usually refers to a repeating element on a page, it is for this reason for the <pre> tag the class attribute is nearly always used over the id attribute.
The attribute style allows you to include css style information for a single <pre> tag.
The dir attribute allows for left reading and right reading text, lang allows you to specify a language for the tag and title allows you to include extra information for a tag.
It is possible to attach scripts to tags, as well adding functionality to a webpage, these scripts tend to be written in Javascript and therefore outside the scope of this document.
Examples
<pre>Some Preformatted text</pre> – basic usage example.
<pre id=”header>Some Preformatted text</pre> – Preformatted text which is styled by the id header.
<pre class=”headerclass”> Some Preformatted text </pre> – Preformatted text which is styled by the class headerclass.
<pre id =”header” class=”headerclass”> Some Preformatted text </pre> – Preformatted text which is styled by the class headerclass and the id header.
<pre style="color:#F00">Some Preformatted text</pre> – Preformatted text which has a custom colour of red.
<pre dir="rtl">Some Preformatted text</pre> – Preformatted text where the text reads from right to left.
<pre lang="uk">Some Preformatted text</pre> – Preformatted text where the language has been tagged as UK.
<pre title="ptitle">Some Preformatted text</pre> – Preformatted text where the tag has been titled ptitle.
Final Thoughts
Touching on just the surface of the <pre> HTML tag it is easy to see how versatile it is. To take full advantage of it an understanding of CSS is an advantage.