#30DaysofHTML Day 12: < code > and < pre >

Formatting code and other fixed-space items online

and

Apr 12, 2021

⛔️ ⛔️ ⛔️ ERROR CORRECTION: Yesterday’s discussion of <ins> and <del> made reference to a timedate attribute. While we were very consistent in its usage, we were mistaken. This should be the datetime attribute. Many thanks to Fynn Becker for pointing this out! We have corrected it in the blog post and the CodePen example. ⛔️ ⛔️ ⛔️

If you want your code to star on the page instead of behind the scenes, then hitch your wagon to the <code> and <pre> tags.

By default, your browser will ignore any white space between tags, and condense any white space in text into a single space. This is useful for code, poetry, and code poetry.

<p>   
An amoeba named Max and his brother
     Were sharing a drink with each other;
In the midst of their quaffing,
     They split themselves laughing,
And each of them now is a mother. 
</p>

Even if we were to add <br> tags at the end of each line, an appropriate use of the break tag, the zig-zaggy tabbing effect would be gone.

<pre> for pre-formatted text

If we want to preserve white space, then wrapping our content in <pre> keeps the formatting -- that includes blank lines, tabs and more than one space in a line.

<pre> is useful for displaying:

💻 computer code where the spacing is important

📧 written communication with specific white space formatting, like an email, poem or letter

🎨 all of your totally rad ASCII art

<pre>
          .,-;-;-,. /'_\
        _/_/_/_|_\_\) /
      '-<_><_><_><_>=/\
 jgs    `/_/====/_/-'\_\
         ""     ""    "" 
</pre>

Accessibility and images

You know about the importance of alt attributes with images. This provides a text-based description of the image. So what happens when we have ASCII art in a <pre> element? Well, we still need a text equivalent. MDN suggests using the <figure> element for this. (We'll discuss <figure> in the Multimedia Extravaganza unit towards the end of the month.)

<figure role="img" aria-labelledby="turtle-caption">
<pre>
          .,-;-;-,. /'_\
        _/_/_/_|_\_\) /
      '-<_><_><_><_>=/\
 jgs    `/_/====/_/-'\_\
         ""     ""    "" 
</pre>  
<figcaption id="turtle-caption">
       The raddest baddest turtle ever seen in ASCII art.                     </figcaption> 
</figure>

<code> for inline code

The more semantic <code> element can be used in two ways. First, use it inline within other lines of text:

<p><code>turtle</code> is a Python library that enables users to command a turtle to draw pictures on a virtual canvas. We can use functions like <code>turtle.forward()</code> and <code>turtle.right</code> which can move the turtle around.</p>

If you have multiple lines of code to display, <code> may be nested in <pre>:

<pre>
 <code>
 # Python Turtle program to draw star
 import turtle
 star = turtle.Turtle()
 for i in range(50):
     star.forward(50)
     star.right(144)
 turtle.done() 
 </code>
</pre>

By default, both of these tags are rendered in your browser in a monospace font, meaning each character takes up the same width on the screen. This is how code is usually displayed, so you can just leave it as is, or adjust using CSS, depending on your content.

We’re running a little long

👀 If your <pre> content lines are long, you might run into an issue with the content being cut off in narrow views. Example 4 in the CodePen demo models these options.

Option 1: Do nothing

The content will get cut off if the window is too narrow.

Option 2: Wrap the content

CSS-Tricks points out that we could add:

pre { white-space: pre-wrap; }

Pre-wrap will wrap the content and helpfully preserves pre-formatted whitespace.

Option 3: Add a scrollbar

Or alternatively, allow content to be accessed by a horizontal scrollbar:

pre { overflow-x: auto; }

For more helpful tips for formatting wide content, including an easy way to add color formatting to your code snippets using a lightweight JS library called Prism, see CSS-Trick's Considerations for Styling the pre Tag.

An interesting attribute

If your <code> contains computer code, there isn't a readily available attribute to indicate the coding language. The main recommendation, encouraged by WHATWG, but not mentioned by MDN, is to use a class with a prefix of "language-".

<pre>
 <code class="language-python">
 # Python Turtle program to draw a Rainbow Benzene
 import turtle
 colors = ['red', 'purple', 'blue', 'green', 'orange', 'yellow']
 t = turtle.Pen()
 turtle.bgcolor('black')
 for x in range(360):
     t.pencolor(colors[x%6])
     t.width(x/100 + 1)
     t.forward(x)
     t.left(59) 
 </code>
</pre>

Erika thinks this goes against what CSS is used for, unless your Python code happens to be styled differently than your JavaScript code on the page. Erika would be more likely to use a data element as in <pre data-language="python"> because most screen readers will read out the text of a data- attribute. If you have insights on this, please comment in the discussion.

❤️ 🐢 Much love to Turtle Programming in Python for all of the examples in today's newsletter 🐢 ❤️