Understanding HTML <kbd> Tag

Understanding HTML <kbd> Tag

Wrap your keyboard command text with `<kbd>`. Great to use especially in documentations! It's more semantically correct & allows you to target it to apply some nice styling. You can also use this tag for other user input such as voice input or text entry device 🙌

Wrap your keyboard command text with <kbd>. Great to use especially in documentations! It's more semantically correct & allows you to target it to apply some nice styling. You can also use this tag for other user input such as voice input or text entry device 🙌

HTML

<kbd>Ctrl</kbd>

Ctrl

Styling

CSS

kbd {
  border: 1px solid lime;
  border-radius: 5px;
  padding: 5px;
}

Output

ctrl

Default Styling

Here's how it looks like without any styling:

<kbd>Ctrl</kbd>

<p>Ctrl</p>

Output

Ctrl

Ctrl

As you can tell, it looks quite plain 😅. It simply just has the monspace font. If you open it up in your dev tools, this is what you will get:

/* Default Style */
kbd {
  font-family: monospace;
}

Auto Styling in GitHub Markdown

But something interesting I discovered. If you use the standard <kbd> in GitHub's markdown. It looks very similar to the style I have in my code tidbit. This is great to add some pizzaz to your README files 💃 Another reason to use the correct HTML tags 😆

Use Case

This is super useful when writing documentations. I remember I use to always just used the <code> tag and then apply some sort of class to target it for styling. But after doing some googling, I found this a more semantic solution, <kbd>. That's why Google is a programmer's best friend 😂

❌ Bad

To copy text, you can use the keyboard shortcut:

<code>Ctrl</code> + <code>c</code>

✅ Good

To copy text, you can use the keyboard shortcut:

<kbd>Ctrl</kbd> + <kbd>c</kbd>

code vs kbd

So I mentioned that I use to use the <code> tag. Let's look at what that does.

<code> <kbd>
Ctrl Ctrl
monospace monospace

From your browser, it might not make any difference with the default styling. They both are using the monospace font-family. But semantically they are identified differently.

<kbd>: Text that indicates user input from a keyboard, voice input, or any other text entry device.

<code>: Text that indicates a short fragment of a computer code.

Originally published at https://www.samanthaming.com

html css web-development

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Hire CSS Developer

Want to develop a website or re-design using CSS Development? We build a website and we implemented CSS successfully if you are planning to **[Hire CSS Developer](https://hourlydeveloper.io/hire-dedicated-css-developer/ "Hire CSS Developer")**...

Hire Web Developer

Looking for an attractive & user-friendly web developer? HourlyDeveloper.io, a leading web, and mobile app development company, offers web developers for hire through flexible engagement models. You can **[Hire Web...

Why Web Development is Important for your Business

With the rapid development in technology, the old ways to do business have changed completely. A lot more advanced and developed ways are ...

Introduction To HTML & CSS: Web Development For Beginners

Introduction To HTML & CSS: Web Development For Beginners - Complete HTML & CSS web developer bootcamp. Learn & practice website design using HTML5 & CSS3 web development resources

Important Reasons to Hire a Professional Web Development Company

    You name the business and I will tell you how web development can help you promote your business. If it is a startup or you seeking some...