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.
Table of contents
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.
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.