Constructing Content - HTML5 with CSS3 - page 114

The code element can designate any sort of computer code. It's not specific to any programming
language, so its contents could be HTML, CSS, JavaScript, Python, Perl, C#, or any computer language
that needs to be distinguished from surrounding human-language content:
<p>You can declare fonts in CSS with the <code>font-family</code> property.</p>
The kbd element defines text or commands that the user should enter (usually by keyboard, though it
could be a voice or menu command), whereas the samp element illustrates sample output of a program or
script:
<p>At the prompt, enter your username, <kbd>henchman21</kbd> ,
and your password. If it's accepted, the display will read
<samp>ACCESS GRANTED</samp> and the portal will activate.</p>
The var element designates a programming variable or argument, or a variable in a mathematical
expression. You can also use var in normal prose to mark a placeholder term:
<p> <var>Something</var> -Man, <var>Something</var> -Man,
does whatever a <var>something</var> can.</p>
The code , kbd , and samp elements are frequently combined with the pre element to preserve the
formatting of their contents, as you can see in Listing 4-36.
Listing 4-36. A JavaScript function marked up with a code element
<pre> <code>
function helloWorld() {
var button = document.getElementById("button");
if (button) {
button.onclick = function(){
alert("Hello, World!");
}
}
}
</code> </pre>
To aid readability, most browsers display code , kbd , and samp elements in a monospace typeface—one in
which every character is the same width, such as Courier. The var element is usually rendered in an
italicized font. Figure 4-22 shows all the previous examples together.