HTML5: How to define keyboard input?
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
Yes | Yes | Yes | Yes | Yes |
What is the difficulty level of this exercise?
Test your Programming skills with w3resource's quiz.
It will be nice if you may share this link in any developer community or anywhere else, from where other developers may find this content. Thanks.
https://www.w3resource.com/html-css-exercise/basic/kbd-answer.php
- Weekly Trends and Language Statistics
- Weekly Trends and Language Statistics