Creating Preformatted Text and Code

From time to time, we need to display some sort of preformatted text on the web. Preformatted text uses whitespace to align and move around characters. The most ubiquitous example of this is displaying code snippets. Since HTML collapses whitespace into a single character, we can't just put the code into the page and expect all of our spacing and alignment to follow. For example, let's consider the following code:

$cool = true;
 
if ($cool) {
    print("You should learn to code");
    foreach ($languages as $language) {
        learn($language);
        print($language + " learned!");
    }
}

Exiting code block.

If we were to wrap it in a paragraph element, it would display in a web browser as the following:

$cool = true;   if ($cool) { print("You should learn to code"); foreach ($languages as $language) { learn($language); print($language + " learned!"); } }

Notice how all the white space has collapsed. Instead, we can wrap the code in a <pre> element to indicate to the browser that it is preformatted text and all the whitespace should be preserved. Using the <pre> element, our code snippet would render in the browser as the following:

$cool = true;
 
if ($cool) {
    print("You should learn to code");
    foreach ($languages as $language) {
    learn($language);
        print($language + " learned!");
    }
}

Notice how now the whitespace is preserved. The code to maintain the whitespace in this snippet is:

<pre>$cool = true;
 
if ($cool) {
    print("You should learn to code");
    foreach ($languages as $language) {
        learn($language);
        print($language." learned!");
    }
}</pre>

Exiting code block.

An important thing to keep in mind is that every bit of whitespace is preserved. This includes the spaces following and preceding the opening and closing tags. Notice in the example how the content is right next to the tags. The same goes for any sort of code indentation for formatting in the markup.

Let's make this happen now.

Step1. If necessary, activate samples.html in the code editor.

Step2. To add some preformatted text, type the code in bold below [Region 30]:

<div class="row">
        <div class="full-width band jumbo">
            <h2>Perl Associative Array Example</h2>
            <p>If we were to create an associative array of dog names and breeds, it would look like this:</p>
<pre>
%dogs = ("Mona", "Husky",
        "Ciara", "Labrador",
        "Auggie", "Elkhound",
        "Ditka", "St. Bernard Mix",
        "Jarrard", "Jack Russel/Whippet",
        "Katie", "Border Collie",
        "Zoey", "Austrailian Shepherd");
</pre>
        </div> 
    </div>

Exiting code block.

The text in the <pre> element is aligned directly on the left side of the code editor. Any white space used to create indentation will be reflected in the display of the content in the web browser. Let's take a look at this in the browser.

Step3. Save and refresh samples.html.

We see the preformatted code:

Step4. If necessary, adjust the spacing in your code editor, save, and preview the page again.

Since this text isn't just preformatted, but it's also code, we can identify it as such using the <code> element. This adds more meaning to the markup and allows screen readers to treat the content appropriately.

Let's mark our preformatted text as code, too.

Step5. If necessary, activate samples.html in the code editor.

Step6. To identify the text as code, type the code in bold below [Region 31]:

<div class="row">
        <div class="full-width band jumbo">
            <h2>Perl Associative Array Example</h2>
            <p>If we were to create an associative array of dog names and breeds, it would look like this:</p>
<pre><code>
%dogs = ("Mona", "Husky",
        "Ciara", "Labrador",
        "Auggie", "Elkhound",
        "Ditka", "St. Bernard Mix",
        "Jarrard", "Jack Russel/Whippet",
        "Katie", "Border Collie",
        "Zoey", "Austrailian Shepherd");
</code></pre>
        </div> 
    </div>

Exiting code block.

NOTE: swipe.txt contains the entire <pre> element.

Now our code is semantically labeled as code. This doesn't really change the display of the code, but we can look at it anyway.

Step7. Save and refresh samples.html.

There shouldn't be a change in appearance.

Let's take a look at how to create more meaningful structure in a table.