Page 97 - HTML5 Notes for Professionals

Chapter 34: Marking up computer code

Section 34.1: Block with <pre> and <code>

If the formatting (white space, new lines, indentation) of the code matters, use the pre element in combination with
the code element:

<pre>
<code>
x = 42
if x == 42:
print "x is … … 42"
</code>
</pre>

You still have to escape characters with special meaning in HTML (like < with <), so for displaying a block of HTML
code (<p>This is a paragraph.</p>), it could look like this:

<pre>
<code>
<p>This is a paragraph.</p>
</code>
</pre>

Section 34.2: Inline with <code>

If a sentence contains computer code (for example, the name of an HTML element), use the code element to mark it
up:

<p>The <code>a</code> element creates a hyperlink.</p>

GoalKicker.com – HTML5 Notes for Professionals 90