Keyboard Input Elements using HTML kbd Tag

Introduction

HTML <kbd> tag is used to create keyboard input elements for users on a webpage. This tag represents a span of inline text that denotes input in the format of text from the keyboard, voice input, or any other text entry by the keyboard.

In this lab, you will learn how to use the HTML kbd tag to create keyboard input elements in your web pages.

Note: You can practice coding in index.html and learn How to Write HTML in Visual Studio Code. Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("`HTML`")) -.-> html/BasicStructureGroup(["`Basic Structure`"]) html(("`HTML`")) -.-> html/TextContentandFormattingGroup(["`Text Content and Formatting`"]) html(("`HTML`")) -.-> html/AdvancedElementsGroup(["`Advanced Elements`"]) html/BasicStructureGroup -.-> html/basic_elems("`Basic Elements`") html/BasicStructureGroup -.-> html/head_elems("`Head Elements`") html/TextContentandFormattingGroup -.-> html/para_br("`Paragraphs and Line Breaks`") html/AdvancedElementsGroup -.-> html/inter_elems("`Interactive and Dynamic Elements`") subgraph Lab Skills html/basic_elems -.-> lab-70783{{"`HTML Keyboard Input`"}} html/head_elems -.-> lab-70783{{"`HTML Keyboard Input`"}} html/para_br -.-> lab-70783{{"`HTML Keyboard Input`"}} html/inter_elems -.-> lab-70783{{"`HTML Keyboard Input`"}} end

Set up the HTML file

Create a new HTML file named index.html and set up the basic structure of an HTML document.

Add the following code to your index.html file to set up the document structure:

<!doctype html>
<html>
  <head>
    <title>Keyboard Input Elements using HTML kbd Tag</title>
  </head>
  <body>
    <!-- Add content here -->
  </body>
</html>

Add Keyboard Input Elements using `tag`

Add keyboard input elements using the <kbd> tag wherever you want to denote a keyboard input element on your webpage.

Add the following code inside the <body> tag to define a keyboard input element with the <kbd> tag for the "CTRL + V" command:

<p>To paste text press <kbd>Ctrl</kbd> + <kbd>V</kbd></p>

Now, add the following code inside the <body> tag to define a keyboard input element with the <kbd> tag for the "Shift + Enter" command:

<p>To create a new line press <kbd>Shift</kbd> + <kbd>Enter</kbd></p>

Nesting `<kbd>` tag inside `<samp>` tag

If you want to specify that the input has been responded to the user by the system, you can nest the <kbd> tag inside <samp> tag.

Add the following code inside the <body> tag to nest the <kbd> tag inside the <samp> tag to specify a responded input by a system:

<p>
  The entered value is:<samp><kbd>Enter Value</kbd>:</samp>
</p>

Summary

In this lab, you learned how to use the HTML <kbd> tag to create keyboard input elements in web pages. You can use this tag anywhere you want to denote a keyboard input element on your webpage. The <kbd> tag could be nested inside <samp> tag to specify responded input back to the user by a system.

HTML Keyboard Input

Introduction

Skills Graph

Set up the HTML file

Add Keyboard Input Elements using tag

Nesting <kbd> tag inside <samp> tag

Summary

Other HTML Tutorials you may like

Add Keyboard Input Elements using `tag`

Nesting `<kbd>` tag inside `<samp>` tag