Etiqueta HTML kbd - Aprende HTML

La etiqueta HTML <kbd> marca la entrada del usuario — texto que el lector debe escribir, pronunciar o introducir de alguna otra forma en un dispositivo. El nombre proviene de "keyboard input" (entrada de teclado), pero la especificación la utiliza para cualquier entrada proporcionada por el usuario, incluidos los comandos de voz y otros métodos de entrada, no solo las pulsaciones de teclas físicas.

Esta página explica qué significa <kbd> semánticamente, cómo combinarlo con <samp> para expresar escenarios más específicos, cómo envolver combinaciones de teclas, cómo darle estilo para que parezca una tecla real y qué significa (y qué no significa) para la accesibilidad.

¿Por qué usar `<kbd>`?

<kbd> es un elemento semántico: le indica al navegador, a los motores de búsqueda y a otras herramientas que un fragmento de texto representa algo que el usuario introduce, en lugar de prosa ordinaria. Es especialmente útil en guías de usuario, tutoriales y documentación de atajos de teclado, donde se desea que los atajos y comandos destaquen.

Por defecto, los navegadores renderizan <kbd> con una fuente monoespaciada (todos los caracteres tienen el mismo ancho). Dado que eso también es el comportamiento predeterminado del elemento <code>, ambos pueden verse idénticos de forma nativa — lo cual es una razón por la que <kbd> se usa poco. Utiliza <kbd> cuando el texto sea algo que el usuario introduce, y <code> cuando sea código fuente. Para una variable o marcador de posición dentro de esa entrada, consulta el elemento <var>.

Sintaxis

<kbd> es un elemento en línea que se escribe como un par de etiquetas, con el texto de entrada entre ellas:

<p>Press <kbd>Enter</kbd> to submit the form.</p>

La etiqueta de cierre </kbd> es técnicamente opcional en algunos contextos, pero siempre inclúyela — mantiene el marcado sin ambigüedades y más fácil de leer.

Ejemplo básico

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>To copy the selected text, press <kbd>Ctrl</kbd> and <kbd>C</kbd>.</p>
  </body>
</html>

Pruébalo tú mismo »

Marcar combinaciones de teclas

Para representar un atajo de varias teclas, envuelve la combinación completa en un <kbd> externo y cada tecla individual en su propio <kbd> anidado. El elemento externo representa la entrada combinada como una unidad; cada elemento interno representa una pulsación de tecla:

<p>
  Save the document with
  <kbd><kbd>Ctrl</kbd>+<kbd>S</kbd></kbd>.
</p>

Este anidamiento es una convención, no un requisito — un único <kbd> por tecla también funciona —, pero hace explícita la estructura de un atajo y te proporciona puntos de enganche precisos para dar estilo a cada tecla por separado.

Combinar `<kbd>` con `<samp>`

Puedes anidar <kbd> y <samp> (salida de muestra del sistema) para expresar significados más específicos definidos por la especificación HTML:

<kbd> dentro de <samp> — entrada que el sistema devuelve al usuario, como un comando mostrado en una terminal tal como el sistema lo recibió.
<samp> dentro de <kbd> — entrada que se basa en texto que el sistema muestra en pantalla, como cuando el usuario hace clic en un elemento de menú cuya etiqueta el sistema renderizó.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <!-- Input echoed back by the system -->
    <p>The console showed <samp><kbd>npm start</kbd></samp> after I typed it.</p>

    <!-- Input that comes from on-screen text -->
    <p>To open the menu, choose <kbd><samp>File</samp></kbd>.</p>
  </body>
</html>

Dar estilo a `<kbd>` para que parezca una tecla

<kbd> no tiene ninguna apariencia incorporada más allá de la fuente monoespaciada, por lo que añadir CSS hace que los atajos sean mucho más legibles. Un borde, un poco de relleno y un fondo claro hacen que cada tecla se asemeje a una tecla física. Aquí la combinación exterior mantiene el aspecto predeterminado mientras que cada tecla interior recibe estilo con la clase .key:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      kbd.key {
        padding: 2px 6px;
        border-radius: 4px;
        border: 1px solid #b4b4b4;
        background-color: #f7f7f7;
        box-shadow: 0 1px 0 #b4b4b4;
        font-family: monospace;
        font-size: 0.9em;
      }
    </style>
  </head>
  <body>
    <p>
      Create a new document by pressing
      <kbd><kbd class="key">Ctrl</kbd>+<kbd class="key">N</kbd></kbd>.
    </p>
  </body>
</html>

Pruébalo tú mismo »

Consejo

La etiqueta <kbd> no está en desuso. Puedes lograr efectos más elaborados con las propiedades CSS font-family y border, como se muestra arriba.

Accesibilidad

<kbd> no tiene semántica especial para las tecnologías de asistencia — los lectores de pantalla no lo anuncian como "entrada de teclado" y no transmite ningún rol ni estado. Es una sugerencia presentacional y semántica para lectores con visión y para máquinas, no una etiqueta accesible.

Por lo tanto, nunca dependas únicamente de <kbd> para comunicar significado. Si un atajo necesita ser comprendido por todos, exprésalo con palabras en el texto circundante (por ejemplo, "Pulsa Ctrl más C para copiar") en lugar de depender de las teclas visuales con estilo.

Atributos

La etiqueta <kbd> admite los Atributos globales y los Atributos de evento.

Etiquetas relacionadas

<code> — un fragmento de código de computadora.
<samp> — salida de muestra o del sistema.
<var> — una variable o marcador de posición en código o entrada.

Práctica

¿Cuáles afirmaciones sobre la etiqueta HTML kbd son correctas? Selecciona todas las que apliquen.

Marca texto que representa la entrada del usuario, como teclas del teclado.Se utiliza para insertar imágenes en una página web.Se muestra con una fuente monoespaciada de forma predeterminada.Se utiliza para dar formato de texto en cursiva.Anidar un kbd dentro de otro kbd puede representar una tecla dentro de una combinación mayor.Se utiliza para crear hipervínculos.

¿Por qué usar <kbd>?