Etiqueta kbd en HTML: teclas y entradas del usuario
La etiqueta <kbd> en HTML representa una entrada que debe proporcionar el usuario, como una tecla, un comando escrito o una instrucción de voz. Úsala en una guía que explique qué pulsar o introducir: permite distinguir esas entradas del texto que las describe y de la respuesta de un programa.
Ejemplo mínimo de kbd
<p>Guarda con <kbd><kbd>Ctrl</kbd> + <kbd>S</kbd></kbd>.</p>Verás la frase «Guarda con Ctrl + S», normalmente con las teclas en una fuente monoespaciada. El <kbd> exterior agrupa el atajo y los interiores identifican sus teclas. El signo + indica que se combinan: mantén Ctrl pulsada mientras presionas S; no pide pulsar la tecla del signo más.
Para probarlo, pega el fragmento dentro del <body> de un documento HTML con codificación UTF-8, guarda el archivo y ábrelo en un navegador. El ejemplo documenta el atajo: no registra pulsaciones ni guarda nada. La acción corresponde al programa donde uses esa combinación.
Si retiras las etiquetas <kbd> y sus cierres conservando el texto, la frase seguirá siendo legible, pero perderá el significado de entrada y su presentación habitual. Cambiar la fuente con CSS modifica su apariencia sin cambiar ese significado.
Sintaxis y contexto válido
Escribe una apertura <kbd> y un cierre </kbd>; ninguno se puede omitir. El elemento admite contenido de frase y se coloca donde se acepte ese contenido, por ejemplo dentro de un párrafo, un elemento de lista o un bloque <pre>. No envuelvas párrafos ni listas completas con él.
Puedes usar <kbd>Enter</kbd> para una tecla o <kbd>abrir agenda</kbd> al documentar una orden de voz. Al anidar <kbd> dentro de otro <kbd>, cada elemento interior representa una tecla u otra unidad de entrada del conjunto, según el modelo del HTML Living Standard.
Si la entrada contiene signos que HTML podría interpretar, escápalos: < muestra < y & muestra &. <kbd> no transforma automáticamente las etiquetas escritas dentro de él en texto literal.
Cómo escribir un atajo de teclado
Además de las teclas, indica la acción, el programa y el sistema al que corresponde. Estos fragmentos documentan los atajos predeterminados para guardar el archivo activo en Visual Studio Code:
<p>En VS Code para Windows o Linux, guarda el archivo con
<kbd><kbd>Ctrl</kbd> + <kbd>S</kbd></kbd>.</p>
<p>En VS Code para macOS, guarda el archivo con
<kbd><kbd>Command</kbd> + <kbd>S</kbd></kbd>.</p>Las variantes están contrastadas con la documentación de guardado de VS Code. Una configuración personalizada puede cambiarlas. Escribir el nombre Command evita depender solo del símbolo ⌘ para identificar la tecla. No extrapoles estos atajos a todas las aplicaciones ni a una terminal.
La anidación ayuda a describir cada tecla, pero no es obligatoria para cualquier entrada: <kbd>Ctrl + S</kbd> también representa el conjunto. Una secuencia de pasos distintos necesita palabras como «después»; un signo + sin explicación no distingue una combinación de una secuencia.
Kbd frente a code, samp y pre
Elige según la función del texto, aunque varias etiquetas tengan una apariencia similar:
<kbd>: lo que debe introducir el usuario, por ejemplo un comando que se le pide escribir.<code>: un fragmento de código que estás explicando, como una llamada a una función.<samp>: una muestra de lo que devuelve un programa o sistema, como el resultado de ese comando.<pre>: texto preformateado cuando necesitas conservar espacios y saltos de línea; puede contener entradas y salidas.
Un comando puede ser código y, a la vez, una entrada. En una instrucción de terminal interesa marcar lo que el lector debe escribir con <kbd>. Para estudiar su sintaxis como código, puede corresponder <code>. La fuente monoespaciada por sí sola no determina la elección.
Caso práctico: documentar una operación en la terminal
Esta página explica un flujo completo: escribir un comando, pulsar Enter y leer la respuesta. Para ejecutar el comando necesitas tener Node.js instalado y disponible en la terminal; la página HTML solo muestra las instrucciones.
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Una operación en la terminal</title>
<style>
body {
margin: 1rem;
font-family: system-ui, sans-serif;
line-height: 1.6;
}
.tecla {
padding: 0.1em 0.3em;
border: 1px solid currentColor;
border-radius: 0.2em;
}
</style>
</head>
<body>
<h1>Calcular siete por tres</h1>
<ol>
<li>Abre una terminal y escribe <kbd>node -p "7 * 3"</kbd>.</li>
<li>Pulsa <kbd class="tecla">Enter</kbd> para ejecutar el comando.</li>
<li>La terminal mostrará <samp>21</samp> como resultado.</li>
</ol>
<p>La opción -p de Node.js evalúa la expresión y muestra su resultado.</p>
</body>
</html>Guárdala en UTF-8 como guia-terminal.html y ábrela en el navegador. Verás un encabezado y tres pasos; Enter tendrá un borde por la clase tecla. El comando se prueba en una terminal, siguiendo las instrucciones de la página.
Para comprobar el flujo real, abre una terminal, ejecuta node --version para confirmar que Node.js está disponible y después escribe node -p "7 * 3". Al pulsar Enter, la salida esperada es 21. Si el sistema no encuentra node, instala Node.js o revisa su disponibilidad en la terminal. La referencia de la opción -p de Node.js explica la evaluación y la impresión del resultado.
Si cambias la expresión a 7 * 4, la terminal devolverá 28: actualiza también la muestra <samp> para que la guía coincida. Retirar <kbd> mantiene las instrucciones visibles, pero deja de identificar sus entradas; sustituir <samp> por <kbd> presentaría incorrectamente la respuesta como algo que el usuario debe introducir. Quitar el CSS elimina el borde de Enter y conserva todo el flujo.
Atributos y accesibilidad
<kbd> no tiene atributos específicos. Admite los atributos globales de HTML; en el ejemplo, class="tecla" permite dibujar un borde alrededor de Enter mediante CSS.
Describe el efecto de cada entrada con texto, como «pulsa Enter para ejecutar el comando». Escribe el nombre de las teclas cuando un símbolo pueda resultar ambiguo: el borde y la tipografía ayudan a reconocerlas visualmente, pero no sustituyen esa explicación.
Errores frecuentes y preguntas
¿Kbd sirve solo para teclas? También representa comandos escritos, órdenes de voz y otras entradas del usuario según el contexto. Explica dónde se introduce la orden y qué se espera que ocurra.
¿Por qué el atajo no funciona? Comprueba la aplicación que tiene el foco, el sistema y la configuración de atajos. Después revisa si esa acción existe en el programa. Añadir más etiquetas <kbd> o cambiar sus estilos no habilita el comando.
¿Kbd dibuja una tecla automáticamente? Su presentación habitual es monoespaciada; un borde o una sombra requieren CSS. Para texto decorativo sin significado de entrada, elige un contenedor apropiado y aplica estilos.
Compatibilidad y fuentes
<kbd> está ampliamente disponible en los navegadores actuales, según la referencia y compatibilidad de MDN. El soporte del elemento no garantiza que una combinación de teclas esté disponible en una aplicación o sistema.
Fuentes consultadas el 3 de octubre de 2026: HTML Living Standard para significado, sintaxis y atributos; MDN para presentación y compatibilidad; VS Code para las variantes de guardado; Node.js para el comando del ejemplo.