Lesson 24: Preformatted Text

Overview

In this HTML lesson, we demonstrate how the pre element is used to maintain formatting within text. We begin with a simple example and a comparison between the paragraph and pre elements. Since preformatted text is ideal for programming, we give an example of a C++ program in a pre element and explain the potential pitfalls. Finally, we demonstrate how the other elements can be used within a pre element and show that text in a pre element does not wrap by default.

A Preformatted Text Example

This example code demonstrates how the pre element works. Here, we have a biblical excerpt that contains the Magnificat, which is an indented quotation. While we could put such a passage in a blockquote element to get the indentation, it would not maintain the same formatting with respect to each line. However, a pre element maintains all of the whitespace characters, as we see here. All of the prior elements reduced all of the intervening whitespace to a single space character.

Example1.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <pre>
Mary's Song of Praise

	"My soul magnifies the Lord,
	and my spirit rejoices in God my Savior,
	for he has regarded the low estate of his handmaiden.
	For behold, henceforth all generations will call me blessed;
	for he who is mighty has done great things for me,
	and holy is his name.
	And his mercy is on those who fear him
	from generation to generation.
	He has shown strength with his arm,
	he has scattered the proud in the imagination of their hearts,
	he has put down the mighty from their thrones,
	and exalted those of low degree;
	he has filled the hungry with good things,
	and the rich he has sent empty away.
	He has helped his servant Israel,
	in remembrance of his mercy,
	as he spoke to our fathers,
	to Abraham and to his posterity for ever."

And Mary remained with her about three months, and returned to her home.
    </pre>
  </body>
</html>

Output

A Comparison

For comparison, we have the same stanza of poetry inside a paragraph element and a pre element. As we can see, the text inside the paragraph element gets jammed into one line, while the pre element maintains the format of the original text.

Also, notice that the font is different for the paragraph element versus the pre element. Paragraphs are rendered in times new roman by default. Pre elements are rendered, by default, in courier new. Paragraphs are meant to be read as large blocks of text, which is appropriate for times new roman. The pre element is designed to display code. So, the pre element uses a monospaced font to keep the text characters aligned. Monospaced fonts maintain the same width for every character, from the wider m and w characters to the narrower i and l characters. All of them are modified to take up the same space.

Example2.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <p>
        Whither, 'midst falling dew,
While glow the heavens with the last steps of day,
Far, through their rosy depths, dost thou pursue
        Thy solitary way?
    </p>
    <pre>
        Whither, 'midst falling dew,
While glow the heavens with the last steps of day,
Far, through their rosy depths, dost thou pursue
        Thy solitary way?
    </pre>
  </body>
</html>

Output

A C++ Code Example

The primary purpose of the pre element is to display code. However, we need to be careful with code because all of the content in a pre element is parsed just like regular HTML. So, when code looks like an HTML tag, it can cause problems. To prevent this, we can encode less than and greater than characters, as well as some others, via HTML entities as we do here. The second example shows how the code appears without entities. Notice that the inclusion for iostream looks like an HTML tag, and, for this reason, it is not displayed by the browser when the characters are not encoded as entites.

Example3.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <pre>
#include &lt;iostream&gt;

int main(int argc, const char* argv[]) {
    for (int i = 0; i &lt; argc; ++i) {
        std::cout &lt;&lt; argv[i] &lt;&lt; std::endl;
    }
    return 0;
}
    </pre>
  </body>
</html>

Output

Output Without Entities

Elements Within Pre Elements

We can use other elements inside a pre element to alter text, just we have done with the paragraph element. In this example, we demonstrate this in both a paragraph element and a pre element for comparison. Notice that the br element can be used in the pre element and it functions just like an endline character.

Example4.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <p>
The Hind and the Panther
<hr />
A milk-white Hind, <em>immortal</em> and <strong>unchang'd</strong>,
Fed on the lawns, and in the forest rang'd;
Without unspotted, innocent within,
She fear'd no danger, for she knew no sin.
Yet had she oft been chas'd with <del>horns</del> and hounds,
And <ins>Scythian</ins> shafts; and many winged wounds
Aim'd at Her heart; was often forc'd to fly,
And <mark>doom'd to death, though fated not to dy</mark>.<br />
Entities: &pi; &naturals; &cong; &int; &part; &sum; &hArr; &forall; &infin; &Int;
    </p>
    <pre>
The Hind and the Panther
<hr />
A milk-white Hind, <em>immortal</em> and <strong>unchang'd</strong>,
Fed on the lawns, and in the forest rang'd;
Without unspotted, innocent within,
She fear'd no danger, for she knew no sin.
Yet had she oft been chas'd with <del>horns</del> and hounds,
And <ins>Scythian</ins> shafts; and many winged wounds
Aim'd at Her heart; was often forc'd to fly,
And <mark>doom'd to death, though fated not to dy</mark>.<br />
Entities: &pi; &naturals; &cong; &int; &part; &sum; &hArr; &forall; &infin; &Int;
    </pre>
  </body>
</html>

Output

Wrapping Text

By default, text within a pre element does not wrap at the end of the line. So, we should always be aware of this when using pre elements. Of course, this behavior makes sense for writing and reading code, as we usually do in a pre element.

Example5.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <p>
Jesus, when he began his ministry, was about thirty years of age, being the son (as was supposed) of Joseph, the son of Heli, the son of Matthat, the son of Levi, the son of Melchi, the son of Jan'na-i, the son of Joseph, the son of Mattathi'as, the son of Amos, the son of Nahum, the son of Esli, the son of Nag'ga-i, the son of Ma'ath, the son of Mattathi'as, the son of Sem'e-in, the son of Josech, the son of Joda, the son of Jo-an'an, the son of Rhesa, the son of Zerub'babel, the son of She-al'ti-el, the son of Neri, the son of Melchi, the son of Addi, the son of Cosam, the son of Elma'dam, the son of Er, the son of Joshua, the son of Elie'zer, the son of Jorim, the son of Matthat, the son of Levi, the son of Simeon, the son of Judah, the son of Joseph, the son of Jonam, the son of Eli'akim, the son of Me'le-a, the son of Menna, the son of Mat'tatha, the son of Nathan, the son of David, the son of Jesse, the son of Obed, the son of Bo'az, the son of Sala, the son of Nahshon, the son of Ammin'adab, the son of Admin, the son of Arni, the son of Hezron, the son of Perez, the son of Judah, the son of Jacob, the son of Isaac, the son of Abraham, the son of Terah, the son of Nahor, the son of Serug, the son of Re'u, the son of Peleg, the son of Eber, the son of Shelah, the son of Ca-i'nan, the son of Arphax'ad, the son of Shem, the son of Noah, the son of Lamech, the son of Methu'selah, the son of Enoch, the son of Jared, the son of Maha'lale-el, the son of Ca-i'nan, the son of Enos, the son of Seth, the son of Adam, the son of God.
    </p>
    <pre>
Jesus, when he began his ministry, was about thirty years of age, being the son (as was supposed) of Joseph, the son of Heli, the son of Matthat, the son of Levi, the son of Melchi, the son of Jan'na-i, the son of Joseph, the son of Mattathi'as, the son of Amos, the son of Nahum, the son of Esli, the son of Nag'ga-i, the son of Ma'ath, the son of Mattathi'as, the son of Sem'e-in, the son of Josech, the son of Joda, the son of Jo-an'an, the son of Rhesa, the son of Zerub'babel, the son of She-al'ti-el, the son of Neri, the son of Melchi, the son of Addi, the son of Cosam, the son of Elma'dam, the son of Er, the son of Joshua, the son of Elie'zer, the son of Jorim, the son of Matthat, the son of Levi, the son of Simeon, the son of Judah, the son of Joseph, the son of Jonam, the son of Eli'akim, the son of Me'le-a, the son of Menna, the son of Mat'tatha, the son of Nathan, the son of David, the son of Jesse, the son of Obed, the son of Bo'az, the son of Sala, the son of Nahshon, the son of Ammin'adab, the son of Admin, the son of Arni, the son of Hezron, the son of Perez, the son of Judah, the son of Jacob, the son of Isaac, the son of Abraham, the son of Terah, the son of Nahor, the son of Serug, the son of Re'u, the son of Peleg, the son of Eber, the son of Shelah, the son of Ca-i'nan, the son of Arphax'ad, the son of Shem, the son of Noah, the son of Lamech, the son of Methu'selah, the son of Enoch, the son of Jared, the son of Maha'lale-el, the son of Ca-i'nan, the son of Enos, the son of Seth, the son of Adam, the son of God.
    </pre>
  </body>
</html>