Hero

HTML Code Tag Learn how to display programming code, keyboard inputs, and variables perfectly on your website using semantic computer code tags. Learning Outcomes: Master the <code>, <kbd>, <samp>, and <var> elements. Prerequisites: Basic understanding of HTML text formatting. Reading Time: 3 min read Difficulty: Beginner

Introduction

If you are building a blog about programming (like Learn with Himanshu), you need a way to show snippets of code to your readers. If you just type code into a normal paragraph, it blends in with the text and looks unprofessional. HTML provides specific tags to format computer code so it stands out visually and semantically.

Why This Matters

For a developer portfolio or technical blog, presenting code cleanly is a non-negotiable requirement. Using the <code> tag ensures your snippets are rendered in a monospace font by default, making them instantly recognizable as programming instructions.

Core Concepts

HTML offers several specialized tags for different types of computer output:

<code>: Used for a generic piece of computer code.
<kbd>: Used to represent user input from a keyboard (e.g., telling someone to press "Ctrl + C").
<samp>: Used to represent sample output from a computer program.
<var>: Used to represent a variable in programming or a mathematical expression.

Syntax

These are inline tags, meaning you can place them directly inside a paragraph without breaking the line.

<p>To copy text, press <kbd>Ctrl</kbd> + <kbd>C</kbd>.</p>
<p>The <code>console.log()</code> function is heavily used in JavaScript.</p>

Real World Example

Let's build a small documentation snippet for a new Himubey CLI tool.

<section class="docs">
  <h2>Installing Himubey CLI</h2>
  <p>To install the tool globally, run the following command in your terminal:</p>
  
  <!-- We wrap the code inside a <pre> tag to preserve the spacing! -->
  <pre><code>npm install -g @himubey/cli</code></pre>
  
  <p>If the installation is successful, you will see this output: <samp>Success: Himubey CLI v1.0 installed.</samp></p>
  
  <p>To exit the terminal at any time, press <kbd>Ctrl</kbd> + <kbd>D</kbd>.</p>
</section>

Best Practices

Combine with <pre>: The <code> tag is an inline element, meaning it doesn't preserve line breaks or extra spaces. If you have a massive block of code spanning multiple lines, you should wrap your <code> tag inside a <pre> (preformatted) tag!
Use for Semantics, not just Style: Don't use the <code> tag just because you want text to look like a typewriter. Only use it when you are actually displaying computer code.

Common Mistakes

Mistake: Trying to write HTML code inside a <code> tag directly.

<!-- WRONG: The browser thinks you are trying to render a paragraph, it will hide the tags! -->
<code><p>Hello World</p></code>

Correct Approach: You must escape the brackets using HTML entities (< for < and > for >).

<!-- CORRECT: The browser will actually display the literal text "<p>Hello World</p>" -->
<code>&lt;p&gt;Hello World&lt;/p&gt;</code>

💡 Himubey Tip

When you use a library like Prism.js or Highlight.js to add syntax highlighting (beautiful colors) to your code blocks, they almost always look for the <pre><code>...</code></pre> structure. Stick to this standard pattern!

Interview Questions

What is the difference between the <kbd> tag and the <code> tag?
Why is the <code> tag often nested inside a <pre> tag?
How does the browser change the default font family when you use the <code> tag?

Mini Challenge

Task: Write a software instruction.

Create a paragraph.
Tell the user to declare a JavaScript variable using the <var> tag for the variable name.
Tell the user to save their file by pressing "Cmd + S", wrapping the keys in <kbd> tags.

Summary

Whether you are writing a tutorial or documenting an API, HTML provides the perfect tools for the job. By using <code>, <kbd>, <samp>, and <var>, your technical writing becomes clear, semantic, and highly professional.

Next Lesson

Next Lesson: HTML Semantic Tags