w3resource

HTML5: How to define keyboard input?

Go to Exercise page

Solution:

HTML Code:

<!DOCTYPE html><!-- Declares the document type and version of HTML -->
<html>
<head>
<meta charset="utf-8"><!-- Specifies the character encoding for the document -->
<title>How to define keyboard input</title><!-- Sets the title of the document -->
</head>
<body>
<em>It is a emphasized text</em><br><!-- Displays text with emphasis -->
<strong>It is a Strong text <!-- Displays text in strong emphasis -->
</strong><br><!-- Provides a line break after the strong text -->
<code>It is a  piece of computer code</code><br><!-- Displays text as computer code -->
<samp>Sample output from a computer program</samp><br><!-- Displays sample output from a computer program -->
<kbd>Keyboard input</kbd><br><!-- Displays text as keyboard input -->
<var>Variable</var><!-- Displays text as variable -->
</body>
</html>

Explanation:

  • The HTML document starts with a declaration of its type and version (<!DOCTYPE html>).
  • The <html> element encloses the entire HTML document.
  • The <head> section contains metadata about the document, including the character encoding (<meta charset="utf-8">) and the title of the document (<title>).
  • Within the <body> section, various elements are used to define different types of text:
    • <em>: Displays text with emphasis.
    • <strong>: Displays text in strong emphasis.
    • <code>: Displays text as computer code.
    • <samp>: Displays sample output from a computer program.
    • <kbd>: Displays text as keyboard input.
    • <var>: Displays text as variable.
  • Each element is followed by a <br> tag to provide a line break after displaying the text.

Live Demo:

See the Pen kbd-answer by w3resource (@w3resource) on CodePen.


See the solution in the browser

Supported browser

Firefox logo Chrome logo Opera logo Safari logo Internet Explorer logo
YesYesYesYesYes

Go to Exercise page

What is the difficulty level of this exercise?

Test your Programming skills with w3resource's quiz.



Follow us on Facebook and Twitter for latest update.