Scroll to top
Read Time: 2 min

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!



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


Browser Support

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


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).

  • 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.


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

Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.