Publishers of technology books, eBooks, and videos for creative people

Home > Articles

This chapter is from the book

This chapter is from the book

HTML and CSS: Visual QuickStart Guide, 9th EditionHTML and CSS: Visual QuickStart Guide, 9th Edition

Learn More Buy

This chapter is from the book

This chapter is from the book

HTML and CSS: Visual QuickStart Guide, 9th EditionHTML and CSS: Visual QuickStart Guide, 9th Edition

Learn More Buy

Marking Up Code

There are also two HTML tags specifically used for marking up code:

  • <code> is displayed in a monospace font and is used to represent a short snippet of computer code.

  • <pre> is also displayed in a monospace font and represents preformatted text. That means any text, including white spaces, appears exactly as it was typed.

TIP

When using < and > in the <code> element, you should use the HTML entities: &lt; and &gt;, respectively. To learn about HTML entities visit developer.mozilla.org/en-US/docs/Glossary/Entity.

If you need to display multiple lines of code, place the <code> element inside a <pre> element. The only time you should use <code> by itself is for an inline element (CODE 4.2, FIGURE 4.7).

CODE 4.2 Examples of a <code> element inline in a paragraph, and another where it contains several lines of code inside a <pre> element.

<p>If you need to display multiple lines of code, place the <code> &lt;code&gt; </code>element
→inside a <code> &lt;pre&gt;</code> element. </p>
<p>In completely unrelated news, here’s a bit of the code for a table that you’ll encounter
→again in Chapter 8:</p>

<pre><code>
&lt;table border="1"&gt;
    &lt;thead&gt;
        &lt;th colspan="4"&gt;Aaron Judge&lt;/th&gt;
        &lt;th&gt;RF&lt;/th&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
        &lt;tr role="header"&gt;
            &lt;td&gt;Year&lt;/td&gt;
</code></pre>
FIGURE 4.7

FIGURE 4.7 Code 4.2 as rendered in Chrome.

WORKING WITH OTHER LANGUAGES

If you’re working with languages that use a right-to-left (RTL) script like Arabic or Hebrew, then there are two elements that will be helpful to you: <bdi> and <bdo>.

<bdi> is the Bidirectional Isolate element. Place text within it to isolate it from the rest of the text around it to prevent rendering issues. This is helpful if your main text uses a left-to-right (LTR) script but you want to include a quotation or a name written in a right-to-left script.

If you want to override the current directionality of the text (which is generally defined by the browser), you can use the Bidirectional Text Override element (<bdo>) element with the dir attribute. It accepts the values rtl or ltr.

Finally, if the entire direction of the page is RTL, you can apply the dir="rtl" attribute to the <html> element.

There’s a thorough explanation at w3.org: www.w3.org/International/questions/qa-html-dir.

Peachpit Promotional Mailings & Special Offers

I would like to receive exclusive offers and hear about products from Peachpit and its family of brands. I can unsubscribe at any time.