DevTut

# 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 (opens new window)), for example:

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

For variables, the var element (opens new window) can be used.

For computer output, the samp element (opens new window) can be used.

For user input, the kbd element (opens new window) can be used.

← Marking-up Quotes →