Add Kbd Tag to Your Webpage
Working with Text
In this lesson, we will learn how to use the kbd tag in HTML.
What is Kbd Tag in HTML
The kbd tag in HTML is used to indicate that the enclosed text represents user input, such as keyboard shortcuts, button presses, or menu selections. It is a semantic tag that helps to distinguish user input from other content on the page.
The syntax for the kbd tag is straightforward. It requires an opening and closing kbd tag, and the user input text like keyboard shortcuts are placed between these two tags.
Here's an example of how to use <kbd> tag in HTML:
Example
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Kbd Tag Example</title>
</head>
<body>
<p>To start a new line, press <kbd>Enter</kbd></p>
<p>To copy selected text, press <kbd>Ctrl</kbd> + <kbd>C</kbd></p>
<p>To paste copied text, press <kbd>Ctrl</kbd> + <kbd>V</kbd></p>
</body>
</html>Attributes of Kbd Tag
Here are the attributes we can use with the kbd tag:
- id
- class
- style
id
The id attribute is used to assign a unique name to an element on a web page. We can assign an id to the <kbd> tag and use it to apply a specific style to that particular tag.
Example
<p>Click on <kbd id="steps">File</kbd> menu.</p>In the above example, we assign an id attribute to the kbd tag with a value steps. In CSS and JavaScript, we can use the name steps to access the specific kbd tag whose id value is set to the name steps.
Note: The id attribute can be used on any tag to assign a unique tag name. It must be unique for each tag, meaning we can't use the same id name for another tag in an HTML document.
class
The class attribute is used to define a group of elements and to apply a specific style to that group. We can define a class for the kbd tags and use it to apply a specific style to all the kbd tags that belong to a particular class.
Example
<p>Click on <kbd class="info">Print</kbd> menu after that click on <kbd class="info">Main Report</kbd>.</p>In the above example, both kbd tags have the same class name, info. If any CSS style is applied to the class name info, it will be applied on both kbd tags.
Note: The class attribute can be used on any tag to assign a group name to the tag.
style
The style attribute can be used to apply inline css styles to the kbd tag. We will learn how to apply inline css style using the style attribute later in our CSS tutorial.
Example
<p>Click on <kbd style="color: red">File</kbd> menu.</p>The style="color: red" will change the font color of the kbd tag to red.
