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

Home > Articles > Web Design & Development > HTML/XHTML

  • Print
  • + Share This
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 (red_circle-a.jpg and red_circle-b.jpg). 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).

red_circle-a.jpg The code element indicates that the text is code or a file name. It also renders as a monospaced font by default gray_circle-b.jpg. If your code needs to display < or > signs, use the &lt; and &gt; 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>&lt;ul id="thumbnail"&gt;</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>
04_19.jpg

red_circle-b.jpg The code element’s text even looks like code because of the monospaced default font.

To mark up code or a file name

  1. Type <code>.
  2. Type the code or file name.
  3. Type </code>.
  • + Share This
  • 🔖 Save To Your Account