HTML <code> Tag

The <code> tag in HTML is used to define a fragment of computer code. It's an inline element, meaning it flows within the text, and it is typically rendered using a monospace font to distinguish it from regular text. This tag is essential for accurately displaying code examples in tutorials, documentation, or any web page where you need to show programming syntax.

Syntax

<code class="language-name">
  Your code here
</code>

Attributes

Example

<p>Here's a simple JavaScript alert:</p>
<code>
  alert("Hello, world!");
</code>

More Examples

Basic Code Snippet

<p>The <code>&lt;h1&gt;</code> tag is used for the main heading.</p>

This simple example demonstrates how to use the <code> tag to display a single HTML tag within a paragraph. The tag will be displayed in a monospace font.

Multiline Code Block with Proper Indentation

For multi-line blocks of code, <code> is typically used in conjunction with <pre>, which preserves whitespace:

<pre>
  <code>
    function greet(name) {
      console.log("Hello, " + name + "!");
    }
  </code>
</pre>

Here, the <pre> tag preserves the newlines and spaces (indentation) of the code, making it more readable. Without it, all lines will appear in a single line.

Code Snippet with Syntax Highlighting

To get nice syntax highlighting we use class attribute with name of the programming language. It requires external CSS libraries for syntax highlight.

<pre><code class="language-javascript">
  function greet(name) {
    console.log(`Hello, ${name}!`);
  }
  greet("World");
</code></pre>

This example shows how you can prepare HTML code for syntax highlighting, a common and powerful way to improve the readability of code blocks. Libraries like Prism.js or Highlight.js can apply syntax highlighting based on the class attribute applied in the <code> tag.

Inlining with Other Text

<p>To define a variable in JavaScript, use the <code>let</code>, <code>const</code>, or <code>var</code> keyword.</p>

You can use the <code> tag inline with regular text, which is useful for referring to code elements within larger sentences.

Displaying HTML Elements

<p>Use the <code>&lt;span&gt;</code> tag for inline elements and <code>&lt;div&gt;</code> for block-level elements.</p>

The <code> tag is excellent for showcasing HTML tags as you see here, avoiding them being interpreted as HTML and instead displayed as text.

Browser Support

The <code> tag is supported by all major browsers.

Notes and Tips

• Always use the <code> tag to mark up code snippets. It helps assistive technologies recognize code and render it appropriately.
• For multiline code blocks, wrap the <code> tag with a <pre> tag to preserve formatting.
• To get proper syntax highlighting, use the class attribute with the language name and integrate a syntax highlighting library (like Prism.js or Highlight.js).
• The <code> tag displays the code in a monospace font. If you want to customize the look, you can add styling via CSS.
• Avoid using the <code> tag to style things that are not code. For general text styling use CSS classes or relevant tags.
• When displaying HTML code, always encode the HTML entities (< as <, > as >, & as &) to ensure they are displayed correctly.