Tag HTML kbd - Aprenda HTML

A tag HTML <kbd> marca entrada do usuário — texto que o leitor deve digitar, falar ou de alguma outra forma fornecer a um dispositivo. O nome vem de "keyboard input" (entrada de teclado), mas a especificação a utiliza para qualquer entrada fornecida pelo usuário, incluindo comandos de voz e outros métodos de entrada, não apenas teclas físicas.

Esta página explica o que <kbd> significa semanticamente, como combiná-la com <samp> para expressar cenários mais específicos, como envolver combinações de teclas, como estilizá-la para parecer uma tecla real e o que ela faz (e não faz) em termos de acessibilidade.

Por que usar `<kbd>`?

<kbd> é um elemento semântico: indica ao navegador, mecanismos de busca e outras ferramentas que um trecho de texto representa algo que o usuário insere, em vez de prosa comum. É especialmente útil em guias do usuário, tutoriais e documentação de atalhos de teclado, onde se deseja que atalhos e comandos se destaquem.

Por padrão, os navegadores renderizam <kbd> com uma fonte monoespaçada (cada caractere tem a mesma largura). Como esse também é o padrão para o elemento <code>, os dois podem parecer idênticos sem estilização adicional — o que é um dos motivos pelo qual <kbd> é subutilizado. Use <kbd> quando o texto for algo que o usuário insere, e <code> quando for código-fonte. Para uma variável ou marcador de posição dentro dessa entrada, consulte o elemento <var>.

Sintaxe

<kbd> é um elemento inline escrito como um par de tags, com o texto de entrada entre elas:

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

A tag de fechamento </kbd> é tecnicamente opcional em alguns contextos, mas sempre a inclua — isso mantém a marcação sem ambiguidades e mais fácil de ler.

Exemplo 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>

Experimente Você Mesmo »

Marcando combinações de teclas

Para representar um atalho com várias teclas, envolva a combinação inteira em um <kbd> externo e cada tecla individual em seu próprio <kbd> aninhado. O elemento externo representa a entrada combinada como uma unidade; cada elemento interno representa o pressionamento de uma tecla:

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

Esse aninhamento é uma convenção, não um requisito — um único <kbd> por tecla também funciona — mas torna a estrutura de um atalho explícita e oferece ganchos precisos para estilizar cada tecla separadamente.

Combinando `<kbd>` com `<samp>`

Você pode aninhar <kbd> e <samp> (saída de amostra/sistema) para expressar significados mais específicos definidos pela especificação HTML:

<kbd> dentro de <samp> — entrada que é ecoada de volta ao usuário pelo sistema, como um comando exibido no terminal da forma como o sistema o recebeu.
<samp> dentro de <kbd> — entrada que é baseada em texto que o sistema exibe na tela, como o usuário clicando em um item de menu cujo rótulo o sistema renderizou.

<!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>

Estilizando `<kbd>` para parecer uma tecla

<kbd> não possui aparência integrada além da fonte monoespaçada, portanto, adicionar CSS torna os atalhos muito mais legíveis. Uma borda, um pequeno preenchimento e um fundo claro fazem cada tecla se assemelhar a uma tecla física. Aqui, a combinação externa mantém a aparência padrão, enquanto cada tecla interna é estilizada com a classe .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>

Experimente Você Mesmo »

Dica

A tag <kbd> não está obsoleta. Você pode obter efeitos mais ricos com as propriedades CSS font-family e border, conforme mostrado acima.

Acessibilidade

<kbd> não possui semântica especial para tecnologias assistivas — leitores de tela não a anunciam como "entrada de teclado" e ela não transmite nenhum papel ou estado. É uma dica apresentacional e semântica para leitores com visão e para máquinas, não um rótulo acessível.

Portanto, nunca dependa apenas de <kbd> para comunicar significado. Se um atalho precisa ser compreendido por todos, explique-o no texto ao redor (por exemplo, "Pressione Ctrl mais C para copiar") em vez de depender dos visuais estilizados das teclas.

Atributos

A tag <kbd> suporta os Atributos Globais e os Atributos de Evento.

Tags relacionadas

<code> — um fragmento de código de computador.
<samp> — saída de amostra ou do sistema.
<var> — uma variável ou marcador de posição em código ou entrada.

Prática

Quais afirmações sobre a tag HTML kbd estão corretas? Selecione todas as que se aplicam.

Ela marca texto que representa entrada do usuário, como teclas do teclado.É usada para inserir imagens em uma página web.É exibida com uma fonte monoespaçada por padrão.É usada para formatação de texto em itálico.Aninhar um kbd dentro de outro kbd pode representar uma tecla dentro de uma combinação maior.É usada para criar hiperlinks.

Por que usar <kbd>?