HTML <code> Tag – Inline Code
📌 Introduction
The <code> tag is used to display computer code inside HTML.
It is mainly used to show:
- Programming code
- Commands
- Short code snippets
By default, browsers display <code> text in a monospace font (like a terminal or editor).
🧱 Syntax
<code>your code here</code>
💡 Example
<!DOCTYPE html>
<html>
<head>
<title>Code Example</title>
</head>
<body>
<p>Use the <code>console.log()</code> function to print output.</p>
</body>
</html>
🖥️ Output Explanation
- The text inside
<code>appears in a monospace font - It visually indicates that it is code
- It helps distinguish code from normal text
🎯 When to Use <code>
Use <code> for:
- Short code snippets inside a sentence
- Function names
- Variables
- Commands
Example:
<p>Press <code>Ctrl + S</code> to save the file.</p>
⚡ Best Practice: <pre> + <code>
For multi-line code, combine both:
<pre><code>
function hello() {
console.log("Hello World");
}
</code></pre>
✔ <code> = meaning (this is code)
✔ <pre> = keeps formatting
⚖️ <code> vs <pre>
| Tag | Purpose |
|---|---|
<code> |
Inline code |
<pre> |
Preserves formatting |
<pre><code> |
Full code blocks |
🚫 Common Mistakes
- Using
<code>for normal text ❌ - Not using
<pre>for multi-line code ❌ - Using it for styling only ❌
🎨 Styling <code>
You can customize it:
<code style="background:#eee; padding:2px;">HTML</code>
🧪 Mini Exercise
Create a page that includes:
- A sentence explaining a programming function
- Highlight at least 3 code parts using
<code> - Add one full code block using
<pre><code>