- Starting a New Paragraph
- Adding Author Contact Information
- Creating a Figure
- Specifying Time
- Marking Important and Emphasized Text
- Indicating a Citation or Reference
- Quoting Text
- Highlighting Text
- Explaining Abbreviations
- Defining a Term
- Creating Superscripts and Subscripts
- Noting Edits and Inaccurate Text
- Marking Up Code
- Using Preformatted Text
- Specifying Fine Print
- Creating a Line Break
- Creating Spans
- Other Elements
This chapter is from the book
This chapter is from the book
This chapter is from the book
Marking Up Code
If your content contains code samples, file names, or program names, the code element is for you (
and 
). To show a standalone block of code (outside of a sentence), wrap the code element with a pre element to maintain its formatting (see “Using Preformatted Text” for an example).
The code element indicates that the text is code or a file name. It also renders as a monospaced font by default 
. If your code needs to display < or > signs, use the < and > character entities instead, respectively. Here, the second instance of code demonstrates this. If you did use < and >, the browser would treat your code as an HTML element, not text.
... <body> <p>The<code>showPhoto()</code>function displays the full-size photo of the thumbnail in our<code><ul id="thumbnail"></code>carousel list.</p> <p>This CSS shorthand example applies a margin to all sides of paragraphs:<code>p { margin: 20px; }</code>.Take a look at<code>base.css</code>to see more examples.</p> </body> </html>
The code element’s text even looks like code because of the monospaced default font.
To mark up code or a file name
- Type <code>.
- Type the code or file name.
- Type </code>.
TIP
You can change the default monospaced font applied to code
with CSS (see Chapter 10).