<kbd>

The HTML <kbd> element signifies user input, such as keyboard entries, and is presented in a monospace font to represent typed commands or text.

kbd tag

The <kbd> HTML tag is used to indicate keyboard input or text entered by the user. It is usually displayed in a monospaced font to differentiate user input from regular text. This tag is commonly found in documentation, tutorials, and instructional content where distinguishing user input is necessary.

Syntax

index.html

<kbd>Keyboard Input</kbd>

Example

Onscreen Input

Onscreen Input

Select ⇒ .

Click to confirm.

index.html

<p>
  Select <kbd><samp>File</samp></kbd> ⇒ <kbd><samp>New Document</samp></kbd>.
</p>
<p>
  Click <kbd><samp>OK</samp></kbd> to confirm.
</p>

Use <kbd> with <samp> to display onscreen input and system output:

The <kbd> element is useful for displaying keyboard shortcuts and user inputs, making instructions clearer and easier to follow.

Key Points

Semantic Purpose: The <kbd> element semantically highlights keyboard input for better clarity.
Styling: By default, it uses a monospace font but can be customized with CSS.
Accessibility: Enhances readability by clearly indicating expected keyboard interactions.

Usage Notes

Nesting <kbd>: Can be used to represent multiple keys in a sequence, e.g., <kbd>Ctrl</kbd> + <kbd>N</kbd> for shortcuts.
With <samp>: Used to display system responses, e.g., <kbd>git add my-new-file.cpp</kbd>.

Conclusion

The <kbd> tag is a key element for representing keyboard input in HTML, helping to distinguish user actions from regular text. It is especially useful in tutorials, guides, and documentation where showing user-typed input or keyboard shortcuts is essential. By displaying input in a monospaced font, it maintains readability. Additionally, when combined with other elements like <samp>, it effectively illustrates both input and system output, making it a valuable tool for enhancing user understanding and accessibility in web content.

<ins>

The HTML <ins> element indicates content that has been added to a document, often shown with an underline to highlight recent modifications or updates.

<mark>

The HTML <mark> element is used to highlight text, usually with a yellow background, to signify relevance or importance, like for search results or essential information.