code element

If you don't know what an element is or how you must use it, I recommend you read the "HTML tags and attributes" tutorial that you can find in the HTML tutorials section.

Description

The code element represents a fragment of computer code, which can be any piece of computer readable text. Among many other examples, you can find inside the code element, a piece of a program in any programming language, an HTML or XML document, a set of CSS declarations, the contents of a configuration file, etc.

The code element is usually placed inside pre to take advantage of its characteristics: spaces and line breaks in the code are respected and rendered in the document.

Examples

Our first example shows a basic inline usage of the code element.

<p>You should declare the function as follows: <code>function changeColor(element, event) { ... }</code>, where the content of the function is represented by the ellipsis.</p>

You should declare the function as follows: function changeColor(element, event) { ... }, where the content of the function is represented by the ellipsis.

The second example contains a piece of text in which a full Javascript function is shown. The function is properly wrapped with the code element, which provides semantic information about what it represents (computer code).

Additionally, the function code is also wrapped with the pre element to include the benefits of this element when writting the function: the spaces and line breaks in the code will be respected and rendered in the document. Using these two elements together is a very common practice when creating documents with code fragments.

<p>...and this is the function that changes the color of the element or its parent when the event is fired:</p>
<pre><code>function changeColor(element, event) {
  if (typeof event != 'undefined') event.preventDefault();
  if (typeof $(element).data('transparentBackground') == 'undefined' || $(element).data('transparentBackground')) {
    $(element).css({backgroundColor: '#a3cd52'});
    $(element).data('transparentBackground', 0);
  } else {
    $(element).css({backgroundColor: 'transparent'});
    $(element).data('transparentBackground', 1);
  }
}
</code></pre>

...and this is the function that changes the color of the element or its parent when the event is fired:

function changeColor(element, event) {
  if (typeof event != 'undefined') event.preventDefault();
  if (typeof $(element).data('transparentBackground') == 'undefined' || $(element).data('transparentBackground')) {
    $(element).css({backgroundColor: '#a3cd52'});
    $(element).data('transparentBackground', 0);
  } else {
    $(element).css({backgroundColor: 'transparent'});
    $(element).data('transparentBackground', 1);
  }
}

Note how the code element is contained by the pre element. This is because the first one is a phrasing element (formerly inline) and can't contain flow elements (previously block-level) like pre.

Attributes

Global attributes

For information about global attributes refer to this list of global attributes in HTML5.

Events

Global events

For information about global events refer to this list of global events in HTML5.