totn HTML

HTML: <kbd> tag

This HTML tutorial explains how to use the HTML element called the <kbd> tag with syntax and examples.

Description

The HTML <kbd> tag defines text as user input from a keyboard such as the Enter or Ctrl keys. Browsers traditionally render the text found within the <kbd> tag in the default monospace font. This tag is also commonly referred to as the <kbd> element.

Syntax

In HTML, the syntax for the <kbd> tag is:

<body>
<p>Press <kbd>Enter</kbd> to continue</p>
</body>

Sample Output

Attributes

Only the Global Attributes apply to the <kbd> tag. There are no attributes that are specific to the <kbd> tag.

Note

  • The HTML <kbd> element is found within the <body> tag.
  • The <kbd> tag is used to signify a key stroke on the keyboard. Browsers traditionally format the text found within the <kbd> tag as monospace font. You can change this behavior with CSS.

Browser Compatibility

The <kbd> tag has basic support with the following browsers:

  • Chrome
  • Android
  • Firefox (Gecko)
  • Firefox Mobile (Gecko)
  • Internet Explorer (IE)
  • Edge Mobile
  • Opera
  • Opera Mobile
  • Safari (WebKit)
  • Safari Mobile

Example

We will discuss the <kbd> tag below, exploring examples of how to use the <kbd> tag in HTML5, HTML 4.01 Transitional, XHTML 1.0 Transitional, XHTML 1.0 Strict, and XHTML 1.1.

  • HTML5
  • HTML4
  • XHTML

HTML5 Document

If you created a new web page in HTML5, your <kbd> tag might look like this:

<!doctype html>
<html>

<head>
<meta charset="UTF-8">
<title>HTML5 Example by www.techonthenet.com</title>
</head>

<body>
<h1>Heading 1</h1>
<p>Press <kbd>Ctrl</kbd>+<kbd>C</kbd> to copy the text.</p>
</body>

</html>

In this HTML5 Document example, we have created <kbd> tags for Ctrl and C to denote user input on the keyboard. Your browser, by default, will display this text in the default monospace font. You can overwrite this behavior with CSS.

HTML 4.01 Transitional Document

If you created a new web page in HTML 4.01 Transitional, your <kbd> tag might look like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>HTML 4.01 Transitional Example by www.techonthenet.com</title>
</head>

<body>
<h1>Heading 1</h1>
<p>Press <kbd>Ctrl</kbd>+<kbd>C</kbd> to copy the text.</p>
</body>

</html>

In this HTML 4.01 Transitional Document example, we have created <kbd> tags for Ctrl and C to denote user input on the keyboard. Your browser, by default, will display this text in the default monospace font. You can overwrite this behavior with CSS.

XHTML 1.0 Transitional Document

If you created a new web page in XHTML 1.0 Transitional, your <kbd> tag might look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>XHMTL 1.0 Transitional Example by www.techonthenet.com</title>
</head>

<body>
<h1>Heading 1</h1>
<p>Press <kbd>Ctrl</kbd>+<kbd>C</kbd> to copy the text.</p>
</body>

</html>

In this XHTML 1.0 Transitional Document example, we have created <kbd> tags for Ctrl and C to denote user input on the keyboard. Your browser, by default, will display this text in the default monospace font. You can overwrite this behavior with CSS.

XHTML 1.0 Strict Document

If you created a new web page in XHTML 1.0 Strict, your <kbd> tag might look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>XHTML 1.0 Strict Example by www.techonthenet.com</title>
</head>

<body>
<h1>Heading 1</h1>
<p>Press <kbd>Ctrl</kbd>+<kbd>C</kbd> to copy the text.</p>
</body>

</html>

In this XHTML 1.0 Strict Document example, we have created <kbd> tags for Ctrl and C to denote user input on the keyboard. Your browser, by default, will display this text in the default monospace font. You can overwrite this behavior with CSS.

XHTML 1.1 Document

If you created a new web page in XHTML 1.1, your <kbd> tag might look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>XHTML 1.1 Example by www.techonthenet.com</title>
</head>

<body>
<h1>Heading 1</h1>
<p>Press <kbd>Ctrl</kbd>+<kbd>C</kbd> to copy the text.</p>
</body>

</html>

In this XHTML 1.1 Document example, we have created <kbd> tags for Ctrl and C to denote user input on the keyboard. Your browser, by default, will display this text in the default monospace font. You can overwrite this behavior with CSS.

Share on: