Etiqueta HTML `<kbd>`

La etiqueta <kbd> define una entrada de teclado. Se utiliza cuando es necesario mostrar un texto que el usuario debe escribir en el teclado (por cualquier motivo). Este elemento suele estar poco utilizado, pero es muy útil para escribir cualquier tipo de documentación para el usuario.

En el navegador, el contenido de la etiqueta se muestra en una fuente monoespaciada (todos los caracteres tienen el mismo ancho). Una de las razones por las que <kbd> está poco utilizado es que una fuente monoespaciada es el estilo predeterminado, lo que la hace indistinguible de un elemento <code>. Sin embargo, agregar algo de estilo a los elementos <kbd> puede hacerlos más comunicativos y útiles.

Puedes usar otros elementos con <kbd> para añadir especificidad:

Si insertas un elemento <kbd> dentro de otro <kbd>, una unidad de entrada se representará como parte de una unidad mayor.
Si insertas un elemento <kbd> en un elemento <samp>, representará una entrada devuelta al usuario por el sistema.
Si insertas un elemento <samp> en un elemento <kbd>, representará una entrada basada en un texto que es representado por el sistema.

Sintaxis

La etiqueta <kbd> se escribe en pares. El contenido se escribe entre las etiquetas de apertura (<kbd>) y cierre (</kbd>). Sin embargo, la etiqueta de cierre (</kbd>) no es obligatoria.

Ejemplo de la etiqueta HTML `<kbd>`:

La combinación de teclas para guardar el documento|Ejemplo de la etiqueta HTML <kbd>|W3Docs

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>Use the combination of these keys to save the document
      <kbd>
        <kbd>Ctrl</kbd>+<kbd>S</kbd>
      </kbd>
    </p>
  </body>
</html>

Try it Yourself »

Resultado

ejemplo de la etiqueta kbd

éxito
La etiqueta <kbd> aún no está obsoleta, pero es posible lograr efectos más ricos utilizando las propiedades CSS font-family o border.

Ejemplo de la etiqueta HTML `<kbd>` utilizada con propiedades CSS:

La combinación de teclas para crear un nuevo documento|Ejemplo de la etiqueta HTML <kbd>|W3Docs

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      kbd.key {
        padding: 1px 2px 0;
        border-radius: 3px;
        border: 1px solid #666;
        border-color: #990000;
        font-family: monospace;
      }
    </style>
  </head>
  <body>
    <p>
      Save the document by pressing
      <kbd>
         <kbd>Ctrl</kbd>+<kbd>S</kbd>
      </kbd>.
    </p>
    <p>
      Create a new document by pressing
      <kbd>
         <kbd class="key">Ctrl</kbd>+<kbd class="key">N</kbd>
      </kbd>.
    </p>
  </body>
</html>

Try it Yourself »

Atributos

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

Cómo dar estilo a una etiqueta HTML <kbd>

json

{
    "tag_name": "kbd"
}

Práctica

¿Cuál es el propósito y el uso de la etiqueta HTML <kbd>?

Se utiliza para definir una entrada del usuario.Se utiliza para insertar imágenes en una página web.Se muestra normalmente en la fuente monoespaciada predeterminada del navegador.Se utiliza para el formato de texto en cursiva.Se utiliza para definir una parte del texto que debe ser ingresada por el usuario.Se utiliza para crear hipervínculos.

Etiqueta HTML <kbd> ​

Sintaxis ​

Ejemplo de la etiqueta HTML <kbd>: ​

Resultado ​

Ejemplo de la etiqueta HTML <kbd> utilizada con propiedades CSS: ​

Atributos ​