{"id":537,"date":"2018-03-05T07:00:00","date_gmt":"2018-03-05T14:00:00","guid":{"rendered":"https:\/\/coreassistance.com\/tips\/?p=537"},"modified":"2018-02-15T12:39:10","modified_gmt":"2018-02-15T19:39:10","slug":"html-for-keyboard-shortcuts","status":"publish","type":"post","link":"https:\/\/coreassistance.com\/tips\/2018\/03\/05\/html-for-keyboard-shortcuts\/","title":{"rendered":"HTML for Keyboard Shortcuts"},"content":{"rendered":"

If you’re writing technical instructions, documentation, or educational material that includes keyboard shortcuts, make sure you use the <kbd><\/code> element where appropriate.<\/p>\n

Here’s what the HTML5 specification has this to say about the <kbd><\/code> element<\/a>:<\/p>\n

\n

The <kbd><\/code> element represents user input (typically keyboard input, although it may also be used to represent other input, such as voice commands).<\/p>\n<\/blockquote>\n

There are two things that make this element really great:<\/p>\n

    \n
  1. It provides a clean, semantic way to define keyboard input.<\/li>\n
  2. It makes it very easy to visually style keyboard input in a distinct way.<\/li>\n<\/ol>\n

    By default, text inside a <kbd><\/code> element is rendered with a monospace font, but it’s very easy to style this element to suit your own needs. Here on Core Assistance, for example, I often use the <kbd><\/code> element when I talk about keyboard shortcuts<\/a>, so I wrote some CSS that makes <kbd><\/code> elements look like actual keyboard keys. Here’s an example: If you’re on a Mac, you can press Command<\/kbd> + R<\/kbd> to reload this page.<\/p>\n

    Here’s the CSS I use for <kbd><\/code> elements on Core Assistance. I’ve added some comments to explain what each declaration does. Feel free to use this CSS as-is on your own site or as a jumping-off point for your own <kbd><\/code> styles:<\/p>\n

    kbd {\r\n    \/* It all begins with a solid border. *\/\r\n    border-style: solid;\r\n\r\n    \/* Make the border 1px thick on the top and both sides, but 3px thick on the bottom.  This gives these elements a nice raised appearance. *\/\r\n    border-width: 1px 1px 3px;\r\n\r\n    \/* Round the corners a bit.  I'm using the em unit because I want the rounding of the corners to scale with the text. *\/\r\n    border-radius: .25em;\r\n\r\n    \/* Use the same font-family as the surrounding text. *\/\r\n    font-family: inherit;\r\n\r\n    \/* Give the text inside the borders a little breathing room. *\/\r\n    padding: .1em .25em;\r\n}<\/code><\/pre>\n
    You may also need to adjust the line-height<\/code> of your text so these styles don’t interfere with other text.<\/p>\n","protected":false},"excerpt":{"rendered":"
    Want to talk about keyboard shortcuts or other input on the web?  Wow, have I got the element for you!<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-537","post","type-post","status-publish","format-standard","hentry","category-htmlcss"],"_links":{"self":[{"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/posts\/537","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/comments?post=537"}],"version-history":[{"count":14,"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/posts\/537\/revisions"}],"predecessor-version":[{"id":563,"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/posts\/537\/revisions\/563"}],"wp:attachment":[{"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/media?parent=537"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/categories?post=537"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/tags?post=537"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}