HTML Code, Pre, and KBD Tags

ADVERTISEMENT

When you’re writing tutorials, developer documentation, or even simple how-to guides, you need a way to show code clearly and display keyboard instructions. HTML has tags made just for that.

Let’s break them down.

🧾 1. <code> – Code Snippets

Use this tag to mark up inline code (like HTML, CSS, JavaScript, etc.).

✅ Syntax:

<p>To create a paragraph, use the <code>&lt;p&gt;</code> tag.</p>
  • It’s inline, not block-level
  • You can use it inside <p>, <li>, etc.
  • Combine with <pre> for multi-line blocks (see below)

🧑‍💻 2. <pre> – Preformatted Text

This tag preserves whitespace, line breaks, and indentation — great for displaying code blocks.

✅ Syntax:

<pre>
function greet() {
  console.log("Hello, world!");
}
</pre>
  • Content inside is rendered exactly as written
  • Often used with <code> for better semantics

✅ Best Practice:

<pre><code>
function greet() {
  console.log("Hello, world!");
}
</code></pre>

⌨️ 3. <kbd> – Keyboard Input

Use this to show user input via keyboard. Ideal for shortcuts, button presses, or typing instructions.

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

✅ Syntax:

  • Displays text in a keyboard-style font
  • Useful for UI instructions

🧪 Try This in Your HTML

<p>Use the <code>&lt;strong&gt;</code> tag to make text bold.</p>

<pre><code>
&lt;ul&gt;
  &lt;li&gt;HTML&lt;/li&gt;
  &lt;li&gt;CSS&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>To open a new tab, press <kbd>Ctrl</kbd> + <kbd>T</kbd>.</p>

💡 Quick Recap

TagPurpose
<code>Inline code snippets
<pre>Preserve formatting, for code blocks
<kbd>Keyboard input display

Use them together for a clean, semantic experience:

<pre><code>// Your code here</code></pre>

👉 Coming Up Next:

We’ll now explore more inline tags for time, marking, superscript, and subscript — great for timestamps, highlighting, formulas, and more.

📚 Next: HTML Mark, Time, Sup & Sub

ADVERTISEMENT