HTML <kbd> Tag

Beginner
⏱️ 5 min read
📚 Updated: Jun 2026
🎯 3 Examples
Keyboard Shortcuts
HTML kbd tag tutorial — marking keyboard input and shortcuts
Overview

What You’ll Learn

By the end of this tutorial, you’ll mark up keyboard keys and shortcuts clearly in tutorials, docs, and help content.

01

Core Syntax

Wrap keys and key names in <kbd> opening and closing tags.

02

Single Keys

Represent keys like Enter, Esc, and Tab in prose.

03

Key Combinations

Show shortcuts such as Ctrl+C with one kbd per key.

04

kbd vs code & samp

Distinguish keyboard input from source code and program output.

05

CSS Styling

Style keys like physical buttons with borders, shadows, and fonts.

06

Accessibility

Write shortcuts that screen readers and all users can follow.

Fundamentals

What Is the <kbd> Tag?

The keyboard input element (<kbd>) represents text the user enters via a keyboard — including individual keys, key names, and combinations used as shortcuts. Browsers typically render it in a monospace font with a subtle button-like appearance.

💡
Semantic, not decorative

Use <kbd> when you mean keys the user presses. Do not use it for source code (<code>) or program output (<samp>).

The element is inline, so it fits naturally inside paragraphs, list items, and table cells. It is ideal for software tutorials, keyboard shortcut references, and accessibility documentation.

Foundation

📝 Syntax

Wrap the key name or combination between opening and closing <kbd> tags:

syntax.html
<kbd>Enter</kbd>

Syntax Rules

  • <kbd> is an inline phrasing element — it nests inside paragraphs and lists.
  • For combinations, wrap each key in its own <kbd> tag.
  • Place + or the word then between keys as plain text.
  • Use CSS classes for styling — avoid inline style attributes in production HTML.
Cheat Sheet

⚡ Quick Reference

Use CaseCode SnippetResult
Single key<kbd>Enter</kbd>Enter
Two-key shortcut<kbd>Ctrl</kbd> + <kbd>C</kbd>Ctrl + C
Styled key<kbd class="key">Esc
Source code<code>console.log()</code>console.log() Use code, not kbd
Program output<samp>Hello</samp>Use samp, not kbd
Mac shortcut<kbd>Cmd</kbd> + <kbd>S</kbd>Cmd + S
Comparison

⚖️ <kbd>, <code>, and <samp>

These inline elements look similar but communicate different meaning:

ElementRepresentsExample
<kbd>Keyboard input the user typesCtrl + V
<code>Source code or programmatic textgit commit -m
<samp>Sample output from a programFile saved successfully.
TogetherPress kbd, run code, see sampTutorial flow
Reference

🧰 Attributes

The <kbd> element has no unique attributes. Use global attributes for styling and extra context:

class Global

CSS hook for consistent key styling across your documentation site.

class="key key--primary"
title Global

Optional tooltip with extra detail, such as the full shortcut name.

title="Copy to clipboard"
id Global

Unique identifier when linking to a specific shortcut definition.

id="shortcut-copy"
lang Global

Language of the key label when documenting localized keyboard layouts.

lang="en"
attributes.html
<kbd
  class="key"
  title="Copy to clipboard"
>Ctrl</kbd> + <kbd class="key">C</kbd>

Prefer CSS classes over inline styles for reusable keyboard key design.

Hands-On

Examples Gallery

Styled keys, single-key instructions, and multi-key shortcuts with copy-ready code and live previews.

Live Preview

Common shortcuts in a documentation sentence:

Save your work with Ctrl + S or open the command palette with Ctrl + Shift + P.

Styled Keyboard Key

Combine class with CSS to make keys look like physical buttons.

styled-key.html
<p>Press the key: <kbd class="key">Space</kbd></p>
Try It Yourself

📚 Common Use Cases

Use <kbd> in software tutorials, keyboard shortcut cheat sheets, accessibility guides, and inline help text wherever users need to know which keys to press.

Single Key

Mark one key when instructing users to press Enter, Tab, or Escape.

single-key.html
<p>Press the <kbd>Enter</kbd> key to submit the form.</p>
Try It Yourself

Key Combination

Wrap each key separately so screen readers and parsers understand the full shortcut.

key-combination.html
<p>To copy text, press <kbd>Ctrl</kbd> + <kbd>C</kbd>.</p>
Try It Yourself
Design

Styling <kbd> with CSS

Browsers give kbd a default monospace look. Customize it to match your docs design system:

border Button-like key cap
box-shadow Raised key effect
font-family Monospace key labels
gap Space between combo keys
kbd-styles.css
/* Keyboard key styling */
kbd {
  font-family: ui-monospace, monospace;
  font-size: 0.875em;
  padding: 0.15rem 0.45rem;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  background: #f8fafc;
  box-shadow: 0 1px 0 #e2e8f0;
  color: #0f172a;
}

kbd.key--accent {
  background: #eff6ff;
  border-color: #93c5fd;
  color: #1e40af;
}

.shortcut {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

Live styled shortcut

Undo with Ctrl + Z

A11y

♿ Accessibility

Clear keyboard markup helps every user follow your instructions:

  • One kbd per key — split combinations so assistive tech reads each key separately.
  • Spell out ambiguous keys — use Enter, not a symbol alone, when meaning matters.
  • Document platform differences — note when Mac uses Cmd instead of Ctrl.
  • Do not rely on color alone — key labels must remain readable with sufficient contrast.

🧠 How <kbd> Works

1

Author marks keyboard input

Wrap key names in kbd inside tutorials or help text.

Markup
2

Browser applies default styling

User-agent styles render keys in monospace with a subtle inset or border.

Rendering
3

CSS enhances readability

Custom classes make shortcuts look like physical keys in your design system.

Design
=

Clear shortcut instructions

Readers instantly recognize which keys to press in your documentation.

Compatibility

Universal Browser Support

The <kbd> element is fully supported in all browsers, including legacy Internet Explorer.

✓ Baseline · Since HTML 4

Keyboard markup that works everywhere

From legacy Internet Explorer to the latest mobile browsers — the kbd element is fully supported for documenting shortcuts.

100% Core tag support
Google Chrome All versions · Desktop & Mobile
Full support
Mozilla Firefox All versions · Desktop & Mobile
Full support
Apple Safari All versions · macOS & iOS
Full support
Microsoft Edge All versions · Chromium & Legacy
Full support
Internet Explorer IE 6+ · Legacy environments
Full support
Opera All modern versions
Full support
<kbd> tag 100% supported

Bottom line: Ship keyboard shortcut docs with confidence. The <kbd> element is safe to use in every production environment today.

Wrap Up

Conclusion

Mastering the <kbd> tag helps you document keyboard input accurately in HTML. Whether writing software tutorials, help articles, or accessibility guides, semantic key markup makes instructions clearer and more professional.

Remember to use one kbd per key, distinguish kbd from code, and style keys with CSS classes for a consistent look across your site.

View Examples Gallery Try key combinations
Pro Tips

💡 Best Practices

✅ Do

  • Use kbd for keys the user physically presses
  • Wrap each key in its own <kbd> for combinations
  • Style keys with reusable CSS classes
  • Pair with code when showing commands to run

❌ Don’t

  • Use kbd for source code snippets
  • Put an entire shortcut inside one kbd tag
  • Rely on inline styles for every key
  • Confuse kbd with samp program output
Summary

Key Takeaways

Knowledge Unlocked

Six truths every developer should know about <kbd>

Bookmark these before you ship — they’ll keep your shortcut docs semantic and readable.

6
Core concepts
⌨ 01

Keyboard Input

<kbd> marks keys the user types or presses.

Foundation
📝 02

One Key Per Tag

Split Ctrl + C into separate elements.

Syntax
⚖️ 03

Not for Code

Use code for source code, not keyboard keys.

Comparison
🎨 04

CSS Key Caps

Borders and shadows make shortcuts easy to scan.

Design
♿ 05

Platform Notes

Document Cmd vs Ctrl for Mac and Windows users.

Accessibility
✓ 06

Universal Support

Works in every browser, including legacy IE.

Compatibility
🎯 You’re ready to document keyboard shortcuts in HTML
Review Quick Reference →

❓ Frequently Asked Questions

It represents keyboard input — keys or text the user types, such as Enter or Ctrl+C in tutorials.
kbd is for keys the user presses. code is for source code, commands, or programmatic text.
Wrap each key in its own <kbd> and place + between them: <kbd>Ctrl</kbd> + <kbd>C</kbd>.
No unique attributes. Use global attributes like class for styling and title for optional tooltips.
Prefer CSS classes. Inline styles are harder to maintain and break design consistency across pages.
Yes. The kbd element has universal support in all modern and legacy browsers.

Practice Keyboard Shortcuts

Try styled keys, single-key instructions, and Ctrl+C combinations in the interactive editor.

Try It Yourself →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

6 people found this page helpful

HTML isindex Tag HTML keygen Tag