How to define keyboard input in HTML5 ?

Last Updated : 21 Oct, 2020

The phrase tag is used to define the keyboard input. The text enclosed by <kbd> tag is typically displayed in the browser’s default monospace font. In this article, we define the keyboard input by using various types of tags like <kbd>, <code>, <em>, <var>, and <samp>.

Syntax:

<kbd> Contents... </kbd>

Example 1:

<!DOCTYPE html> 
<html> 
  
<head> 
    <meta charset="utf-8" /> 
    <title> 
        How to define keyboard input 
    </title> 
</head> 
  
<body> 
    <h2> 
        How to define a various 
        Keyboard input. 
    </h2> 
  
    <kbd>GeeksForGeeks</kbd> 
  
    <em>It is a emphasized text</em> 
    <br /> 
  
    <strong> 
        It is a Strong text 
    </strong> 
    <br /> 
  
    <code> 
        It is a piece of 
        computer code 
    </code> 
    <br /> 
  
    <samp> 
        Sample output from a computer program 
    </samp> 
    <br /> 
  
    <kbd>Keyboard input</kbd><br /> 
    <var>Variable</var> 
</body> 
  
</html> 

Output:

Example 2:

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        How to define keyboard  
        input in HTML5? 
    </title> 
  
    <style> 
        body { 
            text-align: center; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="gfg"> 
        GeeksforGeeks 
    </div> 
  
    <h2> 
        <kbd> 
            HTML5: How to define  
            keyboard input? 
        </kbd> 
    </h2> 
      
    <kbd>A computer</kbd> 
    <kbd>science</kbd> 
    <kbd>portal</kbd> 
</body> 
  
</html>   