<code> - The Inline Code Element

The `<code>` Element

Inline HTML 2.0

The inline code element represents a fragment of computer code, such as a variable name, function name, or short code snippet displayed within running text.

Quick Example

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

Result

Interactive code playground requires JavaScript. Here's the code:

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

Syntax

<code>code fragment</code>

The <code> element is typically rendered in a monospace font to distinguish it from regular text.

Common Use Cases

Function Names

<p>Call the <code>getElementById()</code> method to access an element.</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>Call the <code>getElementById()</code> method to access an element.</p>

Variable Names

<p>The <code>userName</code> variable stores the user's name.</p>
<p>Set <code>isActive</code> to <code>true</code> to enable the feature.</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>The <code>userName</code> variable stores the user's name.</p>
<p>Set <code>isActive</code> to <code>true</code> to enable the feature.</p>

HTML Elements

<p>The <code>&lt;div&gt;</code> element is a container for other elements.</p>
<p>Use <code>&lt;p&gt;</code> for paragraphs and <code>&lt;span&gt;</code> for inline content.</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>The <code>&lt;div&gt;</code> element is a container for other elements.</p>
<p>Use <code>&lt;p&gt;</code> for paragraphs and <code>&lt;span&gt;</code> for inline content.</p>

File Names and Paths

<p>Save the file as <code>index.html</code> in your project directory.</p>
<p>The configuration is stored in <code>/etc/config.json</code>.</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>Save the file as <code>index.html</code> in your project directory.</p>
<p>The configuration is stored in <code>/etc/config.json</code>.</p>

Command Line Examples

<p>Run <code>npm install</code> to install dependencies.</p>
<p>Use <code>git status</code> to check the repository status.</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>Run <code>npm install</code> to install dependencies.</p>
<p>Use <code>git status</code> to check the repository status.</p>

CSS Properties

<p>Set the <code>display</code> property to <code>flex</code> for flexbox layout.</p>
<p>Use <code>margin: 0 auto;</code> to center elements.</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>Set the <code>display</code> property to <code>flex</code> for flexbox layout.</p>
<p>Use <code>margin: 0 auto;</code> to center elements.</p>

Short Code Snippets

<p>In JavaScript, use <code>const x = 10;</code> to declare a constant.</p>
<p>The expression <code>x > 5</code> evaluates to a boolean.</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>In JavaScript, use <code>const x = 10;</code> to declare a constant.</p>
<p>The expression <code>x > 5</code> evaluates to a boolean.</p>

For Multi-Line Code

For longer code blocks, combine <code> with <pre>:

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

greet('World');</code></pre>

Result

Interactive code playground requires JavaScript. Here's the code:

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

greet('World');</code></pre>

Technical Text Elements

<!-- General computer code -->
<p>The <code>Array.map()</code> method creates a new array.</p>

<!-- Keyboard input -->
<p>Press <kbd>Ctrl</kbd>+<kbd>C</kbd> to copy.</p>

<!-- Computer output -->
<p>Output: <samp>Process completed successfully</samp></p>

<!-- Mathematical variables -->
<p>The formula is <var>E</var> = <var>mc</var><sup>2</sup></p>

Styling

Customize the appearance with CSS:

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

<p>Use the <code>fetch()</code> API to make HTTP requests.</p>

Result

Interactive code playground requires JavaScript. Here's the code:

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

<p>Use the <code>fetch()</code> API to make HTTP requests.</p>

Syntax Highlighting Style

<style>
.code-keyword { color: #d73a49; }
.code-string { color: #032f62; }
.code-function { color: #6f42c1; }
</style>

<p>
<code>
  <span class="code-keyword">const</span>
  <span class="code-function">greet</span> =
  <span class="code-string">"Hello"</span>
</code>
</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.code-keyword { color: #d73a49; }
.code-string { color: #032f62; }
.code-function { color: #6f42c1; }
</style>

<p>
<code>
  <span class="code-keyword">const</span>
  <span class="code-function">greet</span> =
  <span class="code-string">"Hello"</span>
</code>
</p>

With Documentation

API Documentation

<dl>
<dt><code>getElementById(id)</code></dt>
<dd>Returns the element with the specified ID.</dd>

<dt><code>querySelector(selector)</code></dt>
<dd>Returns the first element that matches the CSS selector.</dd>
</dl>

Result

Interactive code playground requires JavaScript. Here's the code:

<dl>
<dt><code>getElementById(id)</code></dt>
<dd>Returns the element with the specified ID.</dd>

<dt><code>querySelector(selector)</code></dt>
<dd>Returns the first element that matches the CSS selector.</dd>
</dl>

Parameter Lists

<p>
<strong>Parameters:</strong>
</p>
<ul>
<li><code>name</code> (string): The user's name</li>
<li><code>age</code> (number): The user's age</li>
<li><code>isActive</code> (boolean): Account status</li>
</ul>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>
<strong>Parameters:</strong>
</p>
<ul>
<li><code>name</code> (string): The user's name</li>
<li><code>age</code> (number): The user's age</li>
<li><code>isActive</code> (boolean): Account status</li>
</ul>

Accessibility

Screen readers typically don’t announce <code> differently, but the monospace font provides visual distinction for sighted users.

Provide Context

Make sure the purpose of the code is clear:

Unclear
Clear

<p>Use <code>npm install</code>.</p>

<p>Install dependencies by running <code>npm install</code> in your terminal.</p>

Escaping Special Characters

Always escape HTML special characters in code examples:

<!-- Correct -->
<code>&lt;div class="container"&gt;</code>

<!-- Wrong (will be interpreted as HTML) -->
<code><div class="container"></code>

<!-- Use <code> for inline code -->
<p>The <code>return</code> statement exits the function.</p>

<!-- Use <pre><code> for code blocks -->
<pre><code>function example() {
  return true;
}</code></pre>

Browser Support

Browser	Version	Notes
Chrome	1+	Full support
Firefox	1+	Full support
Safari	1+	Full support
Edge	12+	Full support
IE	3+	Full support

The <code> element has been supported since the earliest browsers.

For preformatted text and multi-line code blocks. Learn more →

For keyboard input and shortcuts. Learn more →

For sample computer output. Learn more →

For mathematical or programming variables. Learn more →

<code> - The Inline Code Element

The <code> Element

Quick Example

Syntax

Common Use Cases

Function Names

Variable Names

HTML Elements

File Names and Paths

Command Line Examples

CSS Properties

Short Code Snippets

For Multi-Line Code

Technical Text Elements

Styling

Syntax Highlighting Style

With Documentation

API Documentation

Parameter Lists

Accessibility

Screen Reader Behavior

Provide Context

Escaping Special Characters

Inline vs Block Code

Browser Support

Related Elements

Specifications

The `<code>` Element