La Etiqueta KBD

Se utiliza para representar entradas del teclado o comandos que el usuario debe ingresar.

La etiqueta <kbd> (abreviatura de "keyboard") se utiliza para representar entradas del teclado o comandos que el usuario debe ingresar. Es una etiqueta semántica que ayuda a los navegadores, motores de búsqueda y lectores de pantalla a entender que el texto dentro de ella se refiere a una acción del teclado.

Casos de uso comunes

  • Mostrar teclas individuales (ej: <kbd>Enter</kbd>).

  • Combinaciones de teclas (ej: <kbd>Ctrl</kbd> + <kbd>C</kbd>).

  • Secuencias de comandos en aplicaciones o sistemas.

Ejemplos básicos

Tecla individual

Para mostrar una tecla suelta:

<p>Presiona la tecla <kbd>Enter</kbd> para continuar.</p>

Resultado:
Presiona la tecla Enter para continuar.

Combinación de teclas

Usa múltiples etiquetas <kbd> para combinaciones:

<p>Para copiar texto, usa <kbd>Ctrl</kbd> + <kbd>C</kbd>.</p>

Resultado:

Para copiar texto, usa Ctrl + C.

Comandos en secuencia

Indica pasos que requieren múltiples entradas:

<p>En Photoshop, ve a <kbd>Archivo</kbd> → <kbd>Abrir</kbd>.</p>

Resultado:
En Photoshop, ve a Archivo → Abrir.

Estilizar <kbd> con CSS

Por defecto, los navegadores muestran <kbd> en fuente monospace, pero puedes personalizarla.
Ejemplo de CSS:

kbd {
  background-color: #f7f7f7;
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 2px 6px;
  font-family: 'Courier New', monospace;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

kbd:hover {
  background-color: #e0e0e0;
  cursor: pointer;
}

Resultado con estilos:

Presiona F5 para recargar la página.

Ejemplo avanzado: Menú de comandos

<p>En Visual Studio Code:</p>
<ul>
  <li>Abrir la paleta de comandos: <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd></li>
  <li>Buscar archivos: <kbd>Ctrl</kbd> + <kbd>P</kbd></li>
</ul>

Resultado:

En Visual Studio Code:

  • Abrir la paleta de comandos: Ctrl + Shift + P

  • Buscar archivos: Ctrl + P

Mejores prácticas

  1. Usa <kbd> solo para entradas de teclado: No la uses para otros elementos como botones de mouse.

  2. Mantén la claridad: Separa las teclas con símbolos como + o → para indicar combinaciones o secuencias.

  3. Combina con <code> si es necesario: Si el comando también es código, anídalos:

<p>En la terminal, escribe <code><kbd>git commit</kbd></code>.</p>

Accesibilidad

  • Los lectores de pantalla reconocen <kbd> como una entrada de teclado.

  • Si usas símbolos como +, añade aria-label para mayor claridad:

<kbd aria-label="Control">Ctrl</kbd> + <kbd aria-label="C">C</kbd>

Casos de uso reales

  • Documentación técnica: Explicar atajos de software.

  • Tutoriales: Guiar al usuario en pasos que requieren interacción con el teclado.

  • Formularios: Indicar teclas para acciones específicas (ej: <kbd>Tab</kbd> para navegar).

Con este conocimiento, podrás integrar la etiqueta <kbd> de manera efectiva en tus proyectos HTML. ¡Experimenta con estilos y combinaciones!