<kbd>

Тег <kbd> обозначает пользовательский ввод: с клавиатуры, голосом, указателем или другим образом.

По умолчанию браузеры выводят <kbd> моноширинным шрифтом.

        
          
          <p>  Для вызова справки  нажмите <kbd>?</kbd>.</p>
          <p>
  Для вызова справки
  нажмите <kbd>?</kbd>.
</p>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

При создании справочной информации по компьютерной тематике, часто бывает необходимо показать пользователю, как будет выглядеть программный код. В таких случаях на помощь приходят теги <code>, <samp>, <var> и <pre> в сочетании с <kbd>.

Например, в ходе выполнения программы надо подсказать пользователю о вводе переменной. Для отображения выходных данных используется тег <samp>, а для переменной внутри него — теги <var> и <kbd>:

        
          
          <p>  В ходе работы программы вам надо указать необходимое количество итераций:</p><p>  <samp>Укажите значение переменной <var><kbd>TmplRepeat</kbd></var>:</samp></p>
          <p>
  В ходе работы программы вам надо указать необходимое количество итераций:
</p>
<p>
  <samp>Укажите значение переменной <var><kbd>TmplRepeat</kbd></var>:</samp>
</p>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Листинг программы является распространённым вариантом совместного использования нескольких тегов для оформления кода:

Разметка в этом случае будет выглядеть следующим образом:

        
          
          <pre><code>int main(){  int <var>age</var>;  double <var><kbd>weight</kbd></var>;  std::cout &lt;&lt; "Укажите возраст: ";  std::cin &gt;&gt; <var><kbd>age</kbd></var>;  std::cout &lt;&lt; "Укажите вес: ";  std::cin &gt;&gt; <var><kbd>weight</kbd></var>;}</code></pre>
          <pre><code>int main()
{
  int <var>age</var>;
  double <var><kbd>weight</kbd></var>;
  std::cout &lt;&lt; "Укажите возраст: ";
  std::cin &gt;&gt; <var><kbd>age</kbd></var>;
  std::cout &lt;&lt; "Укажите вес: ";
  std::cin &gt;&gt; <var><kbd>weight</kbd></var>;
}</code></pre>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

К тегу <kbd> применяются все глобальные атрибуты.

Содержимое тега <kbd> можно визуально оформлять с помощью CSS-правил. Например, для обрамления комбинаций клавиш рамкой определим такое правило:

        
          
          kbd {  padding: 2px 3px 1px;  border: 1px solid #000000;  border-radius: 3px;  font-family: "Roboto Mono", monospace;}
          kbd {
  padding: 2px 3px 1px;
  border: 1px solid #000000;
  border-radius: 3px;
  font-family: "Roboto Mono", monospace;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Затем обернём значения клавиш в <kbd>:

        
          
          <p>  Для вставки текста нажмите <kbd>Ctrl V</kbd>.</p>
          <p>
  Для вставки текста нажмите <kbd>Ctrl V</kbd>.
</p>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Результат будет выглядеть так:

<kbd> никак не влияет на скринридеры и другие вспомогательные технологии. Они рассказывают о содержимом тега как об обычном тексте без роли.

Если нужно рассказать о сочетании клавиш только пользователям скринридеров, используйте специальный атрибут aria-keyshortcuts.

Для вывода сложных комбинаций клавиш, каждая отдельная клавиша оборачивается в свой тег <kbd>. При желании, всю комбинацию можно обернуть в ещё один <kbd> для группировки.

        
          
          <p>  Эту страницу можно  распечатать, если нажать  <kbd>    <kbd>Ctrl</kbd> <kbd>P</kbd>  </kbd>.</p>
          <p>
  Эту страницу можно
  распечатать, если нажать
  <kbd>
    <kbd>Ctrl</kbd> <kbd>P</kbd>
  </kbd>.
</p>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

В этом примере символ плюса не является клавишей, которую нужно нажать, поэтому он не обёрнут в <kbd>.

Также <kbd> используется для вывода команд в интерфейсе:

        
          
          <p>  Для поиска по проекту откройте меню  <kbd>    Edit > Find in Files…  </kbd>.</p>
          <p>
  Для поиска по проекту откройте меню
  <kbd>
    Edit > Find in Files…
  </kbd>.
</p>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

💡 При совместном использовании тегов <code> и <pre> необходимо соблюдать порядок вложенности: тег <code> можно размещать внутри тега <pre>. А вот <pre> внутри тега <code> — это уже нарушение правила вложенности, в чём можно убедиться на сайте Can I Include.