<code>, <pre>, <kbd>

Syntax

<code>const x = 5;</code>
<pre><code>function add(a, b) {
  return a + b;
}</code></pre>

Examples

<p>Use the <code>Array.map()</code> method to transform each item in an array.</p>

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

greet("Codectionary");</code></pre>

<p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save your file.</p>

Best practices

• Use <code> for inline references to code, variable names, or file names within regular text
• Combine <pre> and <code> together for multi-line code blocks so both whitespace and code semantics are preserved
• Use <kbd> specifically for keyboard input instructions, not for styling arbitrary text to look like a key
• Add a language-specific class (like class="language-javascript") to <code> blocks if using a syntax highlighter

At a glance

Purpose

Structure and meaning for web content

File extension

.html · .htm

Runs in

Web browsers

Usually used with

CSS and JavaScript

Specifications & further reading

• HTML Living Standard

Related HTML documentation