15DaysOfCSS (was 30DaysOfHTML)

Share this post
#30DaysofHTML Day 13: < kbd > and < samp >
jen4web.substack.com

#30DaysofHTML Day 13: < kbd > and < samp >

Displaying information in and out of the computer

Jen Kramer
and
Erika Lee
Apr 13, 2021
Share this post
#30DaysofHTML Day 13: < kbd > and < samp >
jen4web.substack.com

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?

#30DaysofHTML: Science and Geekery unit

<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.

View the CodePen example

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.

Take the CodePen Challenge

More information and examples

📚 MDN: <kbd> and <samp>

📚 WHATWG: <kbd> and <samp>

📚 CSS-Tricks: HTML elements, unite! The Voltron-like powers of combining elements

Share this post
#30DaysofHTML Day 13: < kbd > and < samp >
jen4web.substack.com
Comments

Create your profile

0 subscriptions will be displayed on your profile (edit)

Skip for now

Only paid subscribers can comment on this post

Already a paid subscriber? Sign in

Check your email

For your security, we need to re-authenticate you.

Click the link we sent to , or click here to sign in.

TopNewCommunity

No posts

Ready for more?

© 2022 Jen Kramer and Erika Lee
Privacy ∙ Terms ∙ Collection notice
Publish on Substack Get the app
Substack is the home for great writing