HTML <code> Element

The <code> element represents a fragment of computer code. It can identify HTML markup, CSS properties, JavaScript statements, commands, filenames, function names, and other code-related text.

Syntax

<code>computer code</code>

The opening and closing tags are both required. The <code> element contains phrasing content and is commonly used within normal text to identify short fragments of code.

Attributes

The <code> element supports the global HTML attributes. It does not have any element-specific attributes.

Example

The following example identifies an HTML element and a CSS property as code within a paragraph:

<p>Use the <code>&lt;p&gt;</code> element to create a paragraph.</p>

<p>The <code>color</code> property changes the text color.</p>

The <code> element identifies the code-related portions of the sentences without separating them from the surrounding text.

Try It Yourself

Edit the text inside the <code> elements to identify different HTML elements, CSS properties, commands, or other code fragments.

Play in Editor

Code Blocks

The <code> element does not preserve spaces or line breaks by itself. For a multiline block of code where formatting should be preserved, place <code> inside a <pre> element:

<pre><code>&lt;h1&gt;Hello, World!&lt;/h1&gt;
&lt;p&gt;This is a paragraph.&lt;/p&gt;</code></pre>

The <pre> element preserves the whitespace and line breaks, while <code> identifies the content as computer code.

Usage Notes

Use <code> for fragments of computer code rather than simply to produce monospaced text. Its purpose is semantic, and its visual appearance can be controlled with CSS.

When HTML markup needs to appear literally as code, reserved characters must be written as character references. For example, use <p> in the HTML source when you want <p> to appear as text rather than be interpreted as an actual paragraph element.

For multiline examples, combine <pre> and <code>. For keyboard input, use <kbd>; for sample output from a computer program, use <samp>; and for variables or placeholders, use <var>.

Browsers commonly display <code> using a monospace font, but the exact appearance is controlled by the browser's default stylesheet and can be changed with CSS.

Accessibility

The <code> element provides semantic meaning that identifies its contents as computer code. Do not rely only on a monospace font or other visual styling when the text represents code.

For longer examples, clear surrounding explanations and properly preserved formatting can make code easier to understand for all users.

Browser Support

Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.

For detailed browser compatibility information, see Can I Use: HTML <code> Element .

<pre> - Represents preformatted text and is commonly combined with <code> for multiline code examples.

<kbd> - Represents user input, such as keyboard commands.

<samp> - Represents sample output from a computer program or system.

<var> - Represents a variable or placeholder value.

Specifications

HTML Living Standard: The <code> Element

HTML <code> Element