HTML 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>