Code Element Tutorial

<code>

Introductory Text

The code element represents the source code of a programming language that has been included as visible reference in the content of a document; single words and snippets are commonly illustrated. Please note that when long lines of code are illustrated utilizing the pre element, the pre element does not word wrap content (which will cause a horizontal page scroll bar to occur). See Preformatted Element Tutorial for an example of using line breaks.

Start tag:: <code>
End tag:: </code>

Use Examples

Example [Basic]:

img represents an image used.

Code [HTML]:


<p><code>img</code> represents represents an image used.</p>

[Note: Several philosophies exist for the semantic and proper used of the <code> element for single words. And, whereas, it may be semantically proper, it may obfuscate proper use of the abbr element. However, if one were to view the source code of W3C Accessible Rich Internet Applications (WAI-ARIA) 1.0, 5. The Roles Model, textbox section, textbox is set with the code element. Thus, img is recognized as an HTML element as it is abbreviated and common terms, e.g., menu, are common, code elements should used not requiring an abbreviation element set, i.e., <abbr></abbr>.]

Example [Simple (HTML)]:

<cite>Anatole France</cite> — <q>“It is human nature to think wisely and act in an absurd fashion.”</q>

Code [HTML]:


<p><code><cite><Anatole France</cite> — <q>“It is human nature to think wisely »
and act in an absurd fashion.”</q></code></p>

Example [HTML (Preformatted)]:


<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Code Element | HTML Elements | The Elementary Standards</title>
<meta name="description" content="A Web Standards 'Best Practice' tutorial for use »
of the code (code) HTML element.">
</head>
<body>
<p>The <code> HTML element is useful for identifying programming text blocks for »
users of assistive technologies.</p>
</body>
</html>

Code [HTML]:


<pre>
<code>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Code Element | HTML Elements | The Elementary Standards</title>
<meta name="description" content="A Web Standards 'Best Practice' tutorial for »
use of the code (code) HTML element.">
</head>
<body>
<p>The <code> HTML element is useful for identifying programming text blocks for »
users of assistive technologies.</p>
</body>
</html>
</code>
</pre>

[Caveat: Please note the use of <code> with the <pre> element requires the <pre> element precede the <code> for conformance requirements. However, browsers will parse incorrect structural semantics and render the document nonetheless.]

Example [Javascript (Preformatted)]:


<script type="text/javascript"> 
$(document).ready(function() { 
    $('#definitionDisplay').tooltip({
	track: true,
        fade: true,
	delay: 0,
	showURL: false,
	extraClass: "pretty",
	fixPNG: true,
	left: -120
       });
}); 
 </script>

Code [HTML]:


<pre>
<code>
<script type="text/javascript"> 
$(document).ready(function() { 
    $('#definitionDisplay').tooltip({
	track: true,
        fade: true,
	delay: 0,
	showURL: false,
	extraClass: "pretty",
	fixPNG: true,
	left: -120
       });
}); 
 </script>
</code>
</pre>

Content Model/Assigned Attributes

Element-Type:

Text-Level [HTML 4.01]

Phrasing Content [HTML 5]

Attributes:

</code>