<samp>, <kbd>, <code> tags

You already know about some HTML tags like abbr, cite, bdo, and their purposes. Along with these, there is a variety of tags available in HTML, which makes the text displayed in the browser look different from the normal text in HTML; for example, the <samp> tag, the <kbd> tag, etc. You'll learn about these tags and their use in this topic.

<samp>

The HTML <samp> tag is a phrase tag that indicates sample or output text from the computer program. This output is displayed to the user when they are running an application. Typically, browsers render the content inside a <samp> tag in a default monospaced font.

Here is the <samp> syntax:

<samp>Sample Output</samp>

The <samp> tag doesn't have specific attributes, but it supports global attributes in HTML. The example below shows the use of the <samp> tag in HTML.

<p>The computer answered <samp>Error: command not found</samp></p>

And here is the output:

<kbd>

The HTML <kbd> tag indicates the text that represents the user's keyboard input. A tag is used when there is a need to take the information from the keyboard and display the text the user enters. Like the <samp> tag, the <kbd> tag also falls into the category of phrase tags.

Here is the <kbd> syntax:

<kbd>Ctrl</kbd>

Here is an example of its use:

<p>Normal text on the screen</p>
<span>The kbd element:</span>
<kbd>Ctrl + C</kbd>

And here is the output:

<code>

The <code> tag in HTML represents the computer code. The <code> tag shows specific coding terms when creating web pages with programming-related content. This tag is also one of the phrase tags. Browsers often display the text embedded in <code> tags in a monospaced font.

Here is the <code> syntax:

<code>Some text</code>

Here is an example:

<span>Font size can be set using:</span>
<code>font-size: 10px;</code>

And here is the output:

Overriding the default CSS

Most browsers use the CSS settings below by default for the content inside the <samp>, <kbd> and <code> tags. However, you can also override the settings according to your needs.

samp,
kbd,
code {
    font-family: monospace;
}

Conclusion

Now you know that the <samp> tag is used to display the sample output text from the computer program, and the <kbd> tag helps render the input from the keyboard. You can embed the content inside the <code> tag if you want to include code-related content on your web page. Note that the browsers render the content inside these tags in a default monospaced font unless you choose to override the settings.