Scaler
Academy
Data Science
Neovarsity
New
Skill Test
Free Masterclass
Search for Articles, Topics
kbd Tag in HTML

kbd Tag in HTML

By Tiya Bansal
5 mins read
Last updated: 4 May 2023
150 views
Learn via video course
FREE
View all courses
JavaScript Course With Certification: Unlocking the Power of JavaScript
JavaScript Course With Certification: Unlocking the Power of JavaScript
by Mrinal Bhattacharya
1000
4.8
Start Learning
Start Learning View all courses
JavaScript Course With Certification: Unlocking the Power of JavaScript
JavaScript Course With Certification: Unlocking the Power of JavaScript
by Mrinal Bhattacharya
1000
4.8
Start Learning
Topics Covered

Overview

The <kbd> tag in HTML helps to identify text that is specified as user input from the keyboard such as Enter or Ctrl keys. It stands for the Keyboard Input element.

It is generally used whenever there is a need to display text entered by the user through their keyboard. In HTML, the <kbd> element is classified as a phrase tag.

It is also an inline element. The font style of the text included inside the <kbd> tag is typically set to the browser's default monospace font.

The <kbd> tag is used in pairs. The content is written between the opening <kbd> tag and closing </kbd> tags.

Syntax

To learn more about HTML tags, head over to HTML Tags!

Attributes

There are no specific attributes associated with the <kbd> tag in HTML. It supports global attributes and key event attributes which are connected to the action events that is, mouse clicks, mouse hovering, etc.

How to use <kbd> tag in HTML?

The <kbd> tag in HTML is one of the most useful tags for a number of reasons. The <kbd> element denotes the portion of the inline text that represents the user's keyboard input, voice input, or other text entry device input. The <kbd> tag is mostly used in user manuals. It is used when a document must show the exact text that a user inputs from the keyboard. To write any keyboard command anywhere on a website, for example, to save the page press CTRL + S, CTRL and S must be keyboard inputs and must be placed within the <kbd> element.

The <kbd> tag is not obsolete, but with little styling, <kbd> components may be made much more useful and communicative.

Note: Browsers have traditionally used a monospace typeface to format text inside the <kbd> element. This behavior can be modified with the help of CSS.

Examples

Let’s have a look at some examples related to the <kbd> tag in HTML.

Example 1: Basic Example

The kbd element is used here to specify which keys to press:

Output

kbd-tag-example

We can inspect the HTML element and see the kbd tag used as shown in the output below-

kbd-tag-example1

Example 2: Representing keystrokes within an input

Whenever a <kbd> tag is nested inside of another <kbd> tag in HTML Document, an actual key or another kind of input unit is represented as a subset of a larger input.

The outer <kbd> element denotes a block of input, while the inner <kbd> elements identify each individual step of the input. This wraps the whole key sequence in an outer <kbd> element, then each individual key inside its own, to indicate the various parts of the key sequence.

Output

kbd-tag-nested-inside-another-kbd-tag

Note: Keystroke representation doesn't need this level of accuracy. The external <kbd> element may be removed to make the above code simpler. <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>N</kbd>

Note: Nesting <kbd> tags may be advantageous depending on the stylistic preferences.

Example 3: Using <kbd> tag with CSS styling

The following are several CSS attributes that may be used to alter how the text styled within the kbd tag in HTML looks:

  • The text’s font style within <kbd> can be changed to bold, italic, initial, etc. by using CSS font-style property as it is set to monospace by default.
  • To display text in a bold or thick style, modify the font weight of the text using the CSS font-weight property.

There are many CSS attributes that may be used to handle the text layout style of the kbd tag:

  • CSS white-space can be used to handle the white spaces from the text.
  • CSS text-overflow can be used to display the overflowed text to the user.
  • CSS text-shadow can be used to give shadow to the text within <kbd> tags.
  • CSS word-spacing can be used to define the space in between the words.

Output

kbd-tag-with-css-styling

Example 4: Echoed Input

When a <kbd> tag is nested within a <samp> tag, it indicates that the system has echoed back the user's input.

Output

kbd-tag-nested-within-samp-tag

Note: In HTML, the <samp> tag specifies the inline text that depicts a sample output from a computer program.

Example 5: Representing onscreen input options

Input that is dependent on text supplied by the system, such as the names of menus and menu items or the names of buttons seen on the screen, is represented by nesting a <samp> element within a <kbd> tag in HTML.

For example, describing how to save an existing file via “Save As” option in the "File" menu using HTML would look like this:

Output

samp-element-within-kbd-tag

Accessibility concerns

The effect of the HTML <kbd> element may also be produced with the <code> tag. That is why it sometimes gets mixed up with the <code> tag.

Since the <code> tag is meant to represent snippets or chunks of code in documentation, using <kbd> to denote keyboard inputs is semantically correct.

Lets’s understand via an example:

Output:

kbd-element-with-code-tag

Given that both tags are utilizing the monospace font style, it is possible that the default styling might not make any difference based on the code output. But they are classified differently in terms of semantics.

To make the webpage content readable by sighted viewers and easily used by assistive technology like screen readers, using semantically accurate HTML is necessary which makes websites readily accessible.

Note: To indicate different types of input or output based on visual signals, the <kbd> tag is nested in various combinations with the <samp> element.

Browser Compatibility

The kbd tag in HTML is supported by various browsers:

  • Google Chrome 103.0
  • Microsoft Edge 12.0
  • Internet Explorer 11.0
  • Firefox 2.0
  • Safari 15.5
  • Opera 86.0
  • Samsung Internet 17.0

Note for advanced reader: Prior to Firefox 4, creating a <kbd> element produced an HTMLSpanElement object rather than the intended HTMLElement.

HTMLSpanElement is an interface which represents a <span> element and inherits the properties of HTMLElement without implementing any additional attributes.

Conclusion

  • <kbd> tag is defined as the Keyboard input of the HTML elements.
  • It is a phrase tag used when a document needs to display the text that the user should enter from their keyboard.
  • The font for the <kbd> tag is set to monospace, but it can be changed as per requirement.
  • <kbd> tag supports Global and Event attributes.
  • Although the <kbd> tag in HTML is not yet deprecated, it is feasible to produce greater effects using CSS properties like font style and border-radius.
  • <code>
  • <samp>
  • <em>
  • <pre>
  • <strong>