HTML <code> Tag

By Jonathan Griffin. Editor, SEO Consultant, & Developer.

· 2 min read


The <code> element is used to define a fragment or piece of computer code. It will display any text wrapped by <code> tags in the browser’s default monospace font.


<p>The <code>&lt;code&gt;</code> element denotes a piece of code.</p>


  • The <code> element is used to mark up a piece of computer code. This could be an XML element name, file name, computer program, or any other string recognizable by a computer.
  • To display a single line of code, you can just use the code tags.
  • To show multiple lines of code, you should wrap the <code> element with <pre> tags. For example:
    <pre><code class="language-pascal">var i: Integer;
        i := 1;
  • You must use a starting and closing tag.


The Code element only supports the Global Attributes.

Best Practices

  • It is recommended to use a syntax highlighting script to automatically mark up the code’s styling to make it easier to read. Most scripts allow you to set a specific language, such as HTML, CSS, or JavaScript.

    You can find several syntax highlighting plugins for WordPress here. This website uses Chroma.

  • When displaying the results of any code snippets on your page, you will need to escape characters such as ", &, <, and > as they are reserved in HTML.

    You should replace them with their corresponding HTML entities so that the browser does not interpret them. This HTML Escape / Unescape tool can help.


Browser Support




Android WebviewChrome AndroidFirefox AndroidOpera AndroidiOS SafariSamsung Internet