The <code> element marks a short piece of inline code — a variable name, a command, a tag name — set apart semantically from the surrounding prose.
Syntax
<code>inline code</code>Basic Example
<p>Use the <code>fetch()</code> function to make a network request.</p>Browser output: "fetch()" renders in a monospace font inline within the sentence — visually distinct from the surrounding regular text.
How It Works
The browser applies a monospace font-family by default. On its own, <code> does not preserve whitespace or line breaks — for a multi-line code block, it's combined with <pre> (see below).
Important Attributes
| Attribute | Purpose |
|---|---|
| — none — | Only universal global attributes apply |
Real-World Example
<p>Every HTML document should start with a <code><!DOCTYPE html></code> declaration.</p>This is exactly the pattern used throughout this notes site — referencing a tag or piece of syntax by name inside a normal sentence.
Comparison: pre vs code
<code> | <pre> | |
|---|---|---|
| Display | Inline — flows within a sentence | Block-level — starts on its own line |
| Whitespace | Collapsed, like normal text | Preserved exactly as written |
| Meaning | "This is code," regardless of length | "Keep this formatting exactly as-is" |
| Typical use | A single function name, tag, or short command | A full, multi-line code block — almost always combined as <pre><code> |
Common Mistakes
- Using
<code>purely for monospace font styling on non-code text — for pure styling, use CSSfont-familyinstead - Forgetting to escape
<,>, and&when the code itself contains HTML or XML — exactly the mistake this entire notes site is careful to avoid throughout every example
Best Practices
- Wrap multi-line code blocks in
<pre><code>...</code></pre>together - Keep standalone inline
<code>usage short — a name or a snippet, not a full paragraph
Accessibility Considerations
Monospace announcement behavior varies by screen reader, but this isn't usually an issue for short inline snippets — the bigger accessibility concern is making sure code content is still readable and correctly escaped.
SEO Considerations
Minimal direct effect on ranking.
Browser & Modern HTML Notes
Extremely common and stable across every modern browser — a staple of technical documentation and blog sites everywhere.
Mini Practice
- Reference an HTML tag name inline in a sentence using
<code>. - Combine
<pre>and<code>to display a 3-line code snippet, with all angle brackets properly escaped.
Module 2 Practice Lab
Quick Practice
Write a short "About Me" paragraph using at least five different tags from this module (for example <strong>, <em>, <mark>, <sup>, <small>) — each one used for its correct semantic meaning, not just for looks.
Challenge
Build a "Terms Update" mini page: quote the old and new refund policy sentence using <blockquote> with attribution, show the specific number that changed using <del>/<ins>, and add a <small> disclaimer at the bottom.
Mini Project — Product Update Log
Build a single page titled "What's New," using: an <h1> title and an <h2> per dated update; paragraphs describing each change; <mark> around the word "New" in the most recent entry; <del>/<ins> showing an old price crossed out next to the new one; a <blockquote> customer reaction with a cite attribute; a <pre><code> block showing a one-line config change; and a <small> disclaimer in the footer.
