Marking up computer 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 <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>

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>
    &lt;p>This is a paragraph.&lt;/p>
    </code>
</pre>

Syntax:

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

Contributors

Topic Id: 1836

Example Ids: 6005,6006

This site is not affiliated with any of the contributors.