HTML <code> Tag

The HTML <code> tag represents a fragment of computer code.

The code fragment could be an XML element name, a filename, a computer program, or any other string that a computer would recognize.

Browsers usually display <code> content in a monospace font (also called a fixed-width or non-proportional font) such as Courier (unless style sheets have been used to specify a different font).

Syntax

The <code> tag is written as <code></code> with the code fragment inserted between the start and end tags.

Like this:

Examples

Basic tag usage

You can insert short fragments of code within a paragraph or any other text.

Displaying HTML Code

A common usage of the <code> is to display HTML code within a web page. To display HTML code, you need to use the correct HTML entities to ensure the HTML code is actually displayed (and not rendered) by the browser.

Specifically, you need to use < in place of the less-than symbol (<) and > in place of the greater-than symbol (>).

Like this:

Multiple Lines

Multiple lines of code can be marked up by surrounding the <code> tags with <pre> tags.

Without the <pre> Tag

Here's an example of what happens if you don't include the <pre> tag when working with multiple lines.

With the <pre> Tag

And here it is after adding the <pre> tag.

Specifying the Computer Language

There is no formal way to specify the langauge of the computer code contained within the <code> tags. The HTML specification recommends specifying the language using the class attribute. For example, by using a prefix such as language- to the class name.

In this example we use class="language-javascript" to specify the programming language used.

Attributes

Attributes can be added to an HTML element to provide more information about how the element should appear or behave.

The <code> element accepts the following attributes.

Global Attributes

The following attributes are standard across all HTML elements. Therefore, you can use these attributes with the <code> tag , as well as with all other HTML tags.

• accesskey
• autocapitalize
• class
• contenteditable
• data-*
• dir
• draggable
• hidden
• id
• inputmode
• is
• itemid
• itemprop
• itemref
• itemscope
• itemtype
• lang
• part
• slot
• spellcheck
• style
• tabindex
• title
• translate

For a full explanation of these attributes, see HTML 5 global attributes.

Event Handlers

Event handler content attributes enable you to invoke a script from within your HTML. The script is invoked when a certain "event" occurs. Each event handler content attribute deals with a different event.

• onabort
• onauxclick
• onblur
• oncancel
• oncanplay
• oncanplaythrough
• onchange
• onclick
• onclose
• oncontextmenu
• oncopy
• oncuechange
• oncut
• ondblclick
• ondrag
• ondragend
• ondragenter
• ondragexit
• ondragleave
• ondragover
• ondragstart
• ondrop
• ondurationchange
• onemptied
• onended
• onerror
• onfocus
• onformdata
• oninput
• oninvalid
• onkeydown
• onkeypress
• onkeyup
• onlanguagechange
• onload
• onloadeddata
• onloadedmetadata
• onloadstart
• onmousedown
• onmouseenter
• onmouseleave
• onmousemove
• onmouseout
• onmouseover
• onmouseup
• onpaste
• onpause
• onplay
• onplaying
• onprogress
• onratechange
• onreset
• onresize
• onscroll
• onsecuritypolicyviolation
• onseeked
• onseeking
• onselect
• onslotchange
• onstalled
• onsubmit
• onsuspend
• ontimeupdate
• ontoggle
• onvolumechange
• onwaiting
• onwheel

Most event handler content attributes can be used on all HTML elements, but some event handlers have specific rules around when they can be used and which elements they are applicable to.

For more detail, see HTML event handler content attributes.