<kbd>: Elemento KBD
Última atualização: 2026-10-13
<kbd>Elemento KBD
Marca o texto que o usuário deve digitar via teclado, usado em documentações ou dicas de atalhos.
| Categoria | Formatação |
|---|---|
| Modelo de Conteúdo | Conteúdo de frase (phrasing) |
| Pais Permitidos | Qualquer elemento que aceite conteúdo de frase |
| Tag de Fechamento | Sim — requer fechamento </kbd> tag |
| Status | Padrão |
📝 Sintaxe
<kbd>entrada de teclado</kbd>▶ Exemplo
Edite o código abaixo e veja o resultado em tempo real no playground:
🌐 Suporte de Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <kbd> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Suportado em todos os navegadores principais | |||||
Dica： Para combinações de teclas, envolva cada tecla em seu próprio <kbd> e separe com + para clareza.
❓ Perguntas Frequentes
QPara que serve a tag kbd?
A
<kbd> marca a entrada de teclado (ou voz) do usuário, como <kbd>Ctrl</kbd> + <kbd>C</kbd> para o atalho de copiar. O navegador a exibe em fonte monoespaçada por padrão; é um elemento frequente em documentação de software e tutoriais técnicos.Qkbd pode ser aninhada?
ASim. O aninhamento de
<kbd> distingue níveis de teclas: a externa representa a combinação inteira e as internas, teclas individuais, como em <kbd><kbd>Ctrl</kbd>+<kbd>S</kbd></kbd>; com CSS é possível aplicar borda ao conjunto da combinação.QQual é a diferença entre kbd e code?
A
<code> marca «código de programa exibido», <kbd> marca «o que o usuário digita». Em tutoriais, quando o usuário precisa digitar um comando, use <kbd>npm run dev</kbd>; para exibir um trecho de código, use <code>.🏷️ Tags Relacionadas
💡 Casos Relacionados
📚 Tutoriais Relacionados
