The <code> element represents a fragment of computer code. This could be any string-based data a computer would recognize. It’s a very useful inline element; I’ve even used it in this opening paragraph!
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
preelement is sometimes confused with thecodeelement, and they’re often rendered in a similar way. However, thepretag is for preformatted text, and tells the browser “the whitespace (new lines and spaces) should be preserved”. Thecodetag 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.
Learn More
HTML Elements
