Marusya's School Notes

The <pre> Element

The <pre> tag defines preformatted text, preserving all spaces and line breaks, which is ideal for poetry:

HTML file:	Displayed by browser:	With CSS styling:
<pre> My Bonnie lies over the ocean. My Bonnie lies over the sea. My Bonnie lies over the ocean. Oh, bring back my Bonnie to me. <br /> Chorus: Bring back, bring back, Bring back my Bonnie to me. </pre>	My Bonnie lies over the ocean. My Bonnie lies over the sea. My Bonnie lies over the ocean. Oh, bring back my Bonnie to me. Chorus: Bring back, bring back, Bring back my Bonnie to me.	My Bonnie lies over the ocean. My Bonnie lies over the sea. My Bonnie lies over the ocean. Oh, bring back my Bonnie to me. Chorus: Bring back, bring back, Bring back my Bonnie to me.

HTML file:

Displayed by browser:

With CSS styling:

<pre>
      My Bonnie lies over the ocean.
      My Bonnie lies over the sea.
      My Bonnie lies over the ocean.
      Oh, bring back my Bonnie to me.
<br />
Chorus:
      Bring back, bring back,
      Bring back my Bonnie to me.
</pre>

 
      My Bonnie lies over the ocean. 
      My Bonnie lies over the sea. 
      My Bonnie lies over the ocean. 
      Oh, bring back my Bonnie to me. 

 
Chorus: 
      Bring back, bring back, 
      Bring back my Bonnie to me.

      My Bonnie lies over the ocean. 
      My Bonnie lies over the sea. 
      My Bonnie lies over the ocean. 
      Oh, bring back my Bonnie to me. 

 
Chorus: 
      Bring back, bring back, 
      Bring back my Bonnie to me.

Any text inside a <pre> element is displayed in a fixed-width font, (usually Courier) but do not despair! CSS styling can change that, which we'll learn about later.