HTML5 – The code element

As a techie, I often want to post excerpts of code on a webpage. Generally in publishing code fragments are printed in a monotype font to distinguish from the main body of text and also to more closely resemble how the code appears in the IDE. The <code> element is used in this way to highlight content that is a code fragment.

Here’s a quick example both as the text and then in use:
Use the JQuery <code> click() </code> function to bind an event handler to the javascript click event to perform an action when the user mouse clicks a given element

Use the JQuery click() function to bind an event handler to the javascript click event to perform an action when the user mouse clicks a given element

Browsers typically render the contents of <code> as a monotype font, but there’s no reason this should be the case (remember HTML = semantics and content, CSS = presentation) and CSS can be used to control the styling as the author prefers. To identify which language a code sample is using, a class attribute should be added, with a language- prefix e.g. class=”language-pascal”. I’ve had a look, but can’t seem to find a canonical list of these. The idea though is this class can be used by scripts to add language appropriate syntax highlighting.

In order to preserve formatting in a larger block of code e.g. indentation, it should be used within a <pre> block which renders the contents exactly as entered

Leave a Reply

Your email address will not be published. Required fields are marked *