HTML <kbd> Tag

In this post, we will cover HTML Tag Kbd and examples. With the aim that it would serve the learning requirements.

The HTML <kbd> tag is used to mark text as keyboard input. This can be useful for indicating keyboard shortcuts, command names, or any other text that represents input from a keyboard.

The <kbd> tag has no required attributes, but it can be styled with CSS to change the appearance of the enclosed text.

Describe some content in a document as keyboard input:


<!DOCTYPE html> <html> <body> <p>Press <kbd>Ctrl</kbd> + <kbd>X</kbd> to cut text (Windows).</p> <p>Press <kbd>Ctrl</kbd> + <kbd>V</kbd> to copy text (Windows).</p> </body> </html>

The <kbd> element is styled with CSS as follows:


<!DOCTYPE html> <html> <head> <style> kbd { border-radius: 3px; padding: 5px; border: 2px dotted blue; } </style> </head> <body> <p>Press <kbd>Ctrl</kbd> + <kbd>X</kbd> to cut text (Windows).</p> <p>Press <kbd>Ctrl</kbd> + <kbd>V</kbd> to copy text (Windows).</p> </body> </html>

Here is an example of the kbd and ins tag together:


<!DOCTYPE html> <html> <head> <title>Mr Examples</title> </head> <body> <h1>Welcome to Mr Examples!</h1> <p>We've recently made some <ins datetime="2022-01-01" cite="John Doe">updates</ins> to our content. Check out the new section on keyboard shortcuts:</p> <ul> <li>To save the document, press <kbd>Ctrl</kbd>+<kbd>S</kbd></li> <li>To open a new window, press <kbd>Ctrl</kbd>+<kbd>N</kbd></li> <li>To close the current window, press <kbd>Ctrl</kbd>+<kbd>W</kbd></li> </ul> <p>Thanks for visiting Mr Examples!</p> </body> </html>

Tag Kbd Usage

Controlling keyboard input is done through the Tag <kbd>. For content shown inside a browser, use monospace fonts by default.

Advice: There is no deprecation for this tag. In contrast, CSS can produce a more impressive effect (for example, see below).

Also look at:


Provide an example of output from a computer program.


Describes preformatted text.


Provides information about a block of computer code.


Create a variable.

Browser Compatibility




The Tag Kbd <kbd> also functions with the Global Attributes in HTML.


The Event Attributes are also compatible with HTML’s Tag <kbd>.

Predefined CSS

The <kbd> element will often be displayed with the following default values:

kbd {
font-family: monospace;

HTML <kbd> Tag Advantages

The HTML <kbd> tag has several advantages when used in web development:

  • The <kbd> tag can help improve the accessibility of a web page by providing additional context for users with screen readers or other assistive technologies. By indicating text as keyboard input, users can more easily understand the purpose of the input and navigate the page more effectively.
  • The <kbd> tag can improve the readability of text that represents keyboard input. By visually distinguishing keyboard input from other text, readers can more easily understand the purpose of the input and follow instructions.
  • Using the <kbd> tag can help maintain a consistent visual style for keyboard input across a web page or application. This can help users quickly identify input fields and navigate the page more efficiently.
  • The <kbd> tag can be styled using CSS to match the design of a web page or application. This can help create a more cohesive and visually appealing user interface.
  • The <kbd> tag is widely supported across modern web browsers, ensuring that keyboard input is consistently displayed regardless of the user’s browser or operating system.
If you find this article informative, then do share this valuable information with your friends by clicking on the links below.
We value your feedback.

Subscribe To Our Newsletter
Enter your email to receive a weekly round-up of our best posts. Learn more!

Leave a Reply

Your email address will not be published. Required fields are marked *