HTML - <kbd> Tag

Quiz

The HTML <kbd> tag is used to define user input from a keyboard, voice input, or any other text entry device. Text enclosed in the <kbd> tag is generally displayed in the browsers default mono-space font. This tag is useful when a document needs to display text that the user enters from their keyboard.

Syntax

Following is the syntax of <kbd> tag −

<kbd>.....</kbd>

Attribute

The HTML <kbd> tag supports both Global and Event attributes.

Example: Implementing <kbd> Tag

In the following example, we are create an HTML document and use the <kbd> tag to display the keyboard input. Below, we will see different examples of <kbd> elements, each illustrating the use casses of the HTML <kbd> tag.

<!DOCTYPE html>
<html>
<body>
   <p>
      Please press <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>R</kbd> to re-render an current page. </p>
</body>
</html>

Example: Styling <kbd> Element

In the following example, we are including CSS properties to make the keyboard input more stylish. This HTML code styles the <kbd> element and instructs users to press "Ctrl + Shift + R" to refresh the current page.

<!DOCTYPE html>
<html>
<head>
   <style>
      kbd {
         background-color: #eee;
         border-radius: 3px;
         border: 1px solid #b4b4b4;
         color: #333;
         display: inline-block;
         font-size: 0.85em;
         font-weight: 700;
         line-height: 1;
         padding: 2px 4px;
         white-space: nowrap;
      }
   </style>
</head>
<body>
   <p>
      Please press <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>R</kbd> 
      to re-render an current page.
   </p>
</body>
</html>

Example: <kbd> along with <Samp>

Consider the following example, where we Nest a <kbd> tag inside a <samp> tag to represent input echoed back to the user by the system. This HTML code displays a message and a block-quote showing the initial command typed if a syntax error occurs.

<!DOCTYPE html>
<html>
<body>
   <p> 
      If a syntax error occurs, the tool will output the initial 
      command you typed for your review: 
   </p>
   <blockquote>
      <samp>
         <kbd>custom-git ad my-new-file.cpp</kbd>
      </samp>
   </blockquote>
</body>
</html>

Supported Browsers

Tag
kbd	Yes	Yes	Yes	Yes	Yes

html_tags_reference.htm

Print Page