kbd element represents a user input that could be made by keyboard or any other medium, like mouse, touchscreen or voice command.
samp element is containing a
kbd element, it represents a piece of computer sample, where the output includes a command or text that was input by the user.
kbd element is containing a
samp element, it represents a user input that's been made based on a computer output, like for example, a menu command.
The first example, contains instructions to copy and paste some text. The keys that must be pressed are wrapped with they
kbd element, as they represent the input the user should make.
<p>Press <kbd>Ctrl</kbd> and hold it while you press <kbd>C</kbd>. Then move to the second document and press <kbd>Ctrl</kbd> and hold it while you press <kbd>V</kbd>.</p>
Press Ctrl and hold it while you press C. Then move to the second document and press Ctrl and hold it while you press V.
The second example, shows an explanation of the procedure to print a document in a text processor. Here the
kbd element is wrapping some
samp elements that represent the items in a menu provided by the program (this is, an output).
<p>To print your document go to <kbd><samp>File</samp> → <samp>Print...</samp></kbd>, and when the window pops up press <kbd><samp>Ok</samp></kbd>.</p>
To print your document go to File → Print..., and when the window pops up press Ok.
The third and last example, shows an output made by the computer (
samp) that includes text previously entered by the user (
kbd). All the text is wrapped with the
pre element to preserve the output format.
<pre><samp>Enter your name: <kbd>Jhon Doe</kbd> Oh! It's you again! Searching record...</samp></pre>
Enter your name: Jhon Doe Oh! It's you again! Searching record...
For information about global attributes refer to this list of global attributes in HTML5.
For information about global events refer to this list of global events in HTML5.