# Marking up computer code

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

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

# 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

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.