Mastering HTML Preformatted Text

Introduction

In HTML, the <pre> tag is used to display preformatted text. It is exactly present on the web page as it is present in an HTML file. The whitespace used inside this tag is displayed as written. The text is written between <pre> tags is displayed in a fixed-width font. It is recommended to use the <pre> tag in case of unusual formatting or if you want to write a piece of computer code.

In this lab, you will learn how to use the <pre> tag to display preformatted text in a web page.

Note: You can practice coding in index.html and learn How to Write HTML in Visual Studio Code. Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("`HTML`")) -.-> html/BasicStructureGroup(["`Basic Structure`"]) html(("`HTML`")) -.-> html/TextContentandFormattingGroup(["`Text Content and Formatting`"]) html(("`HTML`")) -.-> html/AdvancedElementsGroup(["`Advanced Elements`"]) html/BasicStructureGroup -.-> html/basic_elems("`Basic Elements`") html/BasicStructureGroup -.-> html/head_elems("`Head Elements`") html/TextContentandFormattingGroup -.-> html/text_head("`Text and Headings`") html/AdvancedElementsGroup -.-> html/inter_elems("`Interactive and Dynamic Elements`") subgraph Lab Skills html/basic_elems -.-> lab-70817{{"`HTML Preformatted Text`"}} html/head_elems -.-> lab-70817{{"`HTML Preformatted Text`"}} html/text_head -.-> lab-70817{{"`HTML Preformatted Text`"}} html/inter_elems -.-> lab-70817{{"`HTML Preformatted Text`"}} end

Creating the HTML file

Create an index.html file in a text editor of your choice and add the following basic HTML code.

<!doctype html>
<html>
  <head>
    <title>Using the HTML Pre Tag</title>
  </head>
  <body>
    <h1>Using the HTML Pre Tag</h1>
  </body>
</html>

Adding content to the web page

Add the following code between the <body> tags to create a preformatted text block using the <pre> tag.

<pre>
This text
will be
displayed
in a
fixed-width font
</pre>

Using the cols attribute

Add the following code between the <pre> tags to set the preferred number of characters a line should have in the preformatted text block using the cols attribute.

<pre cols="20">
This text will be
displayed in a
fixed-width font
</pre>

Using the width attribute

Add the following code between the <pre> tags to set the preferred number of characters a line should have in the preformatted text block using the width attribute.

<pre width="20">
This text will be
displayed in a
fixed-width font
</pre>

Using the wrap attribute

Add the following code between the <pre> tags to indicate that the text should wrap to the next line using wrap attribute.

<pre wrap="hard">
This text will wrap to the
next line in the
preformatted text block
</pre>

Adding computer code to the web page

Add the following code between the <pre> tags to display a piece of computer code in the preformatted text block.

<pre>
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Using the HTML Pre Tag&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;h1&gt;Using the HTML Pre Tag&lt;/h1&gt;
  &lt;/body&gt;
&lt;/html&gt;
</pre>

Styling the preformatted text block

Add the following CSS code between the <head> tags to style the preformatted text block.

<style>
  pre {
    display: block;
    font-family: monospace;
    white-space: pre;
    margin: 1em 0;
    border: 1px solid black;
    padding: 10px;
  }
</style>

Save the changes made to the index.html file and open it in a web browser to preview the results.

Summary

Congratulations, you have successfully completed the lab and learned how to use the <pre> tag to display preformatted text in a web page. You have learned how to set the preferred number of characters a line should have in the preformatted text block using the cols and width attributes, and how to indicate that the text should wrap to the next line using the wrap attribute. You have also learned how to add a piece of computer code to the preformatted text block, and how to style the preformatted text block using CSS.

HTML Preformatted Text