<code>

Definition and Usage

The <code> tag is used to define a piece of computer code. The content inside is displayed in the browser's default monospace font, making it visually distinct from regular text.

This tag provides semantic meaning, indicating that the enclosed text represents computer code, programming syntax, file names, or other computer text. It's an inline element that can be used within paragraphs and other block-level elements.

Default Rendering

Browsers typically display <code> content in a monospace font by default, equivalent to this CSS:

code {
  font-family: monospace;
}

Attributes

The <code> tag only supports HTML global attributes and event attributes.

Examples

Inline Code

Display code inline within text:

<p>
  Use the <code>console.log()</code> function to output
  messages to the browser console.
</p>

Code Block with <pre>

Preserve formatting with pre-formatted text:

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

HTML Code

Displaying HTML markup:

<p>
  To create a heading, use the
  <code>&lt;h1&gt;&lt;/h1&gt;</code> tag.
</p>

JavaScript Code

Multi-line JavaScript example:

<pre><code>const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(n => n * 2);
console.log(doubled); // [2, 4, 6, 8, 10]</code></pre>

CSS Code

Displaying CSS code:

<pre><code>body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
  margin: 0;
  padding: 20px;
}</code></pre>

Syntax Highlighting with CSS

Adding custom styles for syntax highlighting:

<style>
  .keyword { color: #0066cc; font-weight: bold; }
  .string { color: #008800; }
  .comment { color: #888888; font-style: italic; }
</style>

<pre><code><span class="keyword">function</span> greet() {
  <span class="comment">// Say hello</span>
  <span class="keyword">return</span> <span class="string">"Hello!"</span>;
}</code></pre>

Multiple Languages

Code examples in different programming languages:

<h3>Python</h3>
<pre><code>def hello(name):
    print(f"Hello, {name}!")</code></pre>

<h3>Java</h3>
<pre><code>public void hello(String name) {
    System.out.println("Hello, " + name + "!");
}</code></pre>

Try it Yourself

const numbers = [1, 2, 3, 4, 5];
const squared = numbers.map(x => x * x);
console.log(squared); // [1, 4, 9, 16, 25]

Code vs <pre> vs <samp> vs <kbd>

Styling Code Blocks with CSS

Common CSS properties for enhancing code display:

<style>
  code {
    font-family: 'Courier New', monospace;
    background-color: #f4f4f4;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.95em;
    color: #c7254e;
  }

  pre code {
    display: block;
    padding: 16px;
    background-color: #282c34;
    color: #abb2bf;
    border-radius: 8px;
    overflow-x: auto;
    line-height: 1.6;
  }

  pre code::-webkit-scrollbar {
    height: 8px;
  }

  pre code::-webkit-scrollbar-thumb {
    background: #4a5568;
    border-radius: 4px;
  }
</style>

Best Practices for Displaying Code

• Use semantic HTML: Always use <code> for code snippets to provide semantic meaning
• Combine with <pre>: For multi-line code blocks, wrap <code> inside <pre> to preserve formatting
• Escape HTML characters: Use < for < and > for > when displaying HTML code
• Add syntax highlighting: Use CSS classes or JavaScript libraries for better readability
• Consider accessibility: Ensure sufficient color contrast for code examples
• Provide context: Include language identifiers or comments to clarify code purpose
• Use monospace fonts: Stick with monospace fonts for better code alignment
• Make it responsive: Ensure code blocks are scrollable on small screens
• Add copy buttons: Consider adding a "copy to clipboard" feature for code blocks
• Use proper indentation: Maintain consistent indentation in code examples

Common Use Cases

Related Tags

• <pre>

  Defines preformatted text

• <samp>

  Defines sample output from a program

• <kbd>

  Defines keyboard input

• <var>

  Defines a variable in programming