HTML <code> Element

Publish in HTML Tutorial el 23/05/2025 20:29

The <code> element is used to define a fragment of computer code in your HTML document. It renders the enclosed text in the browser's default monospace font, making it perfect for displaying code snippets, variable names, or any technical content that should be distinguished from regular text.

While <code> handles the visual presentation, remember it doesn't automatically preserve whitespace or line breaks. For multi-line code blocks, you'll typically combine it with the <pre> element.

Basic Syntax

Here's how the <code> element looks in HTML:

And here's how it renders:

Your code goes here

Examples of <code> Usage

Example 1: Inline Code in Paragraph

This example shows how to use <code> within regular text to highlight code-related terms.

Play Code

<p>In JavaScript, you can use <code>console.log()</code> to output messages to the browser's console. The <code>var</code> keyword declares a variable.</p>

Example 2: Multi-line Code Block

This demonstrates combining <code> with <pre> for better formatting of code blocks.

Play Code

<pre><code>function greet(name) {
  return `Hello, ${name}!`;
}

console.log(greet('World'));
</code></pre>

Example 3: Styled Code Element

This shows how to apply CSS to make your code snippets stand out.

Play Code

<style>
  .custom-code {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 2px 4px;
    color: #d63384;
  }
</style>

<p>The CSS property <code class="custom-code">background-color</code> sets the background color of an element.</p>

Example 4: Interactive Code with JavaScript

This example demonstrates copying code to clipboard using JavaScript.

Play Code

<div>
  <code id="copyTarget">npm install package-name</code>
  <button onclick="copyCode()">Copy</button>
</div>

<script>
  function copyCode() {
    const code = document.getElementById('copyTarget');
    navigator.clipboard.writeText(code.textContent)
      .then(() => alert('Code copied!'))
      .catch(err => console.error('Failed to copy: ', err));
  }
</script>

Example 5: Syntax Highlighting Simulation

This advanced example shows how you might implement basic syntax highlighting.

Play Code

<pre><code id="highlightMe">function example() {
  // This is a comment
  const message = "Hello, world!";
  return message;
}</code></pre>

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const code = document.getElementById('highlightMe');
    const html = code.innerHTML
      .replace(/\/\/.*/g, '<span style="color:green">$&</span>')
      .replace(/".*"/g, '<span style="color:red">$&</span>')
      .replace(/\b(function|const|return)\b/g, '<span style="color:blue">$&</span>');
    code.innerHTML = html;
  });
</script>

Tips and Tricks

Accessibility: For screen readers, consider adding aria-label="code snippet" to your code blocks.
Semantic Use: Reserve <code> for actual code, not just monospace text. Use CSS for general monospace needs.
Escaping: Remember to escape HTML characters within code blocks using < and >.
Line Numbers: For complex code blocks, consider adding line numbers with CSS counters.
Responsive Design: Make sure your code blocks are horizontally scrollable on mobile devices.