HTML & CSS reference

<kbd>, <samp>, <var>

Keyboard input (`<kbd>`), program output (`<samp>`) and a variable in a formula (`<var>`).

Syntax

<kbd>Ctrl</kbd> + <kbd>C</kbd>

Examples

Keys, program output and a formula:

<p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save.</p>
<p>The program answers: <samp>File saved.</samp></p>
<p>The area is <var>a</var> × <var>b</var>.</p>

Keys styled like buttons:

<style>
  kbd { border: 1px solid #999; border-bottom-width: 3px; border-radius: 4px; padding: 0 5px; font-size: 13px; }
</style>
 
<p>Undo: <kbd>Ctrl</kbd> + <kbd>Z</kbd></p>

Notes

<kbd> and <samp> are shown in a monospace font, <var> in italics. They clarify meaning for search engines and screen readers; the look can always be changed in CSS.

In the tutorial

Text formatting — Inline tags for text — strong and em, mark, del and ins, sub and sup, code, kbd and pre, abbr and q.

Thanks for reading!