Тег <kbd>

Кратко

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

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

Как пишется

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

Как понять

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

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

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

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

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

трибуты

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

Оформление Скопировать ссылку "Оформление"

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

kbd {
  padding: 2px 3px 1px;
  border: 1px solid #ffffff;
  border-radius: 3px;
}

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

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

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

Использование

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

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

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

Скопировать

Подсказка

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