Marking up computer code

Syntax#

<pre>Formatted text</pre>
<code>Inline Code</code>

Remarks#

The code element should be used for any kind of “string that a computer would recognize” (HTML5), for example:

source code
terms from markup/programming languages (element names, function names, etc.)
file names

Related elements

For variables, the var element can be used.

For computer output, the samp element can be used.

For user input, the kbd element can be used.

Inline with


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>
Block with  and 

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 &lt;), so for displaying a block of HTML code (<p>This is a paragraph.</p>), it could look like this:
<pre>
    <code>
    &lt;p>This is a paragraph.&lt;/p>
    </code>
</pre>