#30DaysofHTML Day 13: < kbd > and < samp >
Displaying information in and out of the computer
Yesterday we talked about displaying your code and other pre-formatted text on the website using <code> and <pre>. Today, we're all about the documentation - what happens when someone runs your code? What do they press on the keyboard or say via voice interface, and what is the output?
<kbd>: Program Input
If there are keys to be pressed on the keyboard, or commands to be said by voice, they should be marked up. There's a few ways of doing this, though.
Keys marked up individually
<p>Windows users will use the keyboard shortcuts using <kbd>Ctrl</kbd>, while Mac users will use <kbd>Command</kbd> instead.</p> Pretty straightforward. You can also use this same markup if the keys are to be pressed together:
<p>On Windows, press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy.</p> However, if you check today’s CodePen demo, you’ll see that the + may look a bit different than the Ctrl and C above. That’s because via browser default styling, <kbd> uses a monospace font. It’s likely the rest of that paragraph does not, so you’ll see differences in size and styling.
Grouping keys
You may also group keys together in a unit. This fixes that styling problem mentioned above, and it may better communicate that the keys are pressed as a unit.
<p>On Windows, press <kbd><kbd>Ctrl</kbd> + <kbd>C</kbd></kbd> to copy.</p> Voice commands
They're more and more common these days. If you have a voice command, you can mark that up with <kbd> too, since that is your interface with the device.
<p>Just say <kbd>Alexa, what's the weather like?</kbd> to get a weather report for your area.</p> <samp>: What did the computer say?
When reporting computer-generated messages, use the <samp> element.
<p>I tried to install WordPress, but the screen said <samp>500 Internal Server Error</samp>.</p> Combining elements
🥪 It may also be helpful to combine several of these elements while writing documentation. Both <code> and <samp> in the below example will render within the <pre> box. In this case, we're looking at our code plus the output generated from that code.
<pre>
<code class="language-javascript">
console.log("Hello, world!");
</code>
<samp>
Hello, world!
</samp>
</pre>Like peanut butter and jelly
🥪 <kbd> and <samp> go together like peanut butter and jelly — they were made for each other. CSS-Tricks has a great article on how these elements work together, as well as other hard-working element teams (like <abbr> and <dfn>, or <cite> and <blockquote>, covered earlier).
<kbd> and <samp> demo
🖥 View the <kbd> and <samp> demo on CodePen.
Challenge: Using <kbd> and <samp>
👩🏽💻 Try today’s CodePen Challenge about the use of <kbd> and <samp>. When you’ve completed it, post your answer in our discussion in Substack.
More information and examples
📚 CSS-Tricks: HTML elements, unite! The Voltron-like powers of combining elements