HTML Element: code

Example

Syntax

1

<p>First set a constant variable <code>const name = "Jane";</code></p>

Result

Browser Support

The <code> tag is supported in all modern browsers. Read more on caniuse.com.

Attributes

The <code> tag supports Global Attributes in HTML. Global Attributes are common to all HTML elements and can be used on all of them (though they may not have much of an effect on some of them).

Related HTML Elements

• The pre element is sometimes confused with the code element, and they’re often rendered in a similar way. However, the pre tag is for preformatted text, and tells the browser “the whitespace (new lines and spaces) should be preserved”. The code tag is purely for representing inline code.

Content

The <code> element accepts phrasing content.

Code Syntax Highlighting Libraries

While native HTML doesn’t offer any type of built in appearance customizations for the code element you can reach for traditional CSS or a third-party library that leverages JavaScript and CSS to make code look beautiful when sharing more complex snippets. Many of these libraries assume there’s a pre tag surrounding the code tag so be sure to account for that. Below are some options to consider for your next project.

• Highlight.js
• Prism.js
• Rainbow.js
• Torchlight

Learn More

• Official W3C specification <code>

• 

  HTML & CSS for Beginners (MEGA Free Course!)

  

  Adi Purdila

  08 Sep 2022