HTML <kbd> тег
Тег HTML <kbd> обозначает пользовательский ввод с клавиатуры или другого устройства. Семантика, комбинации клавиш, стилизация и доступность.
Тег HTML <kbd> обозначает пользовательский ввод — текст, который читатель должен напечатать, произнести или иным образом передать устройству. Название происходит от «keyboard input» (ввод с клавиатуры), однако по спецификации тег применяется для любого пользовательского ввода, включая голосовые команды и другие способы ввода, а не только физические нажатия клавиш.
На этой странице рассматривается семантическое значение <kbd>, способы его комбинирования с <samp> для более точного выражения различных сценариев, оформление комбинаций клавиш, стилизация под реальные клавиши, а также его влияние (и отсутствие влияния) на доступность.
Зачем использовать <kbd>?
<kbd> — семантический элемент: он сообщает браузеру, поисковым системам и другим инструментам, что фрагмент текста представляет собой то, что вводит пользователь, а не обычную прозу. Тег особенно полезен в руководствах, обучающих материалах и документации по горячим клавишам, где нужно выделить сочетания клавиш и команды.
По умолчанию браузеры отображают <kbd> моноширинным шрифтом (все символы одинаковой ширины). Поскольку это также поведение по умолчанию для элемента <code>, оба тега могут выглядеть одинаково — именно поэтому <kbd> используется реже, чем следует. Используйте <kbd>, когда текст является чем-то, что пользователь вводит, а <code> — для исходного кода. Для переменной или заполнителя внутри такого ввода см. элемент <var>.
Синтаксис
<kbd> — строчный элемент, записывается в виде пары тегов с текстом ввода между ними:
<p>Press <kbd>Enter</kbd> to submit the form.</p>Закрывающий тег </kbd> технически необязателен в некоторых контекстах, но его всегда следует включать — это делает разметку однозначной и более читаемой.
Базовый пример
<!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>Обозначение комбинаций клавиш
Чтобы представить сочетание нескольких клавиш, оберните всю комбинацию во внешний <kbd>, а каждую отдельную клавишу — в собственный вложенный <kbd>. Внешний элемент представляет комбинированный ввод как единое целое; каждый внутренний элемент — одно нажатие клавиши:
<p>
Save the document with
<kbd><kbd>Ctrl</kbd>+<kbd>S</kbd></kbd>.
</p>Вложенность — это соглашение, а не требование: можно использовать по одному <kbd> на каждую клавишу. Однако такая структура делает состав сочетания явным и даёт точные крючки для раздельной стилизации каждой клавиши.
Комбинирование <kbd> с <samp>
Вы можете вкладывать <kbd> и <samp> (пример вывода системы) для выражения более специфических значений, определённых спецификацией HTML:
<kbd>внутри<samp>— ввод, который отображается обратно пользователю системой, например команда, показанная в терминале в том виде, в каком система её получила.<samp>внутри<kbd>— ввод, основанный на тексте, отображаемом системой на экране, например нажатие пользователем пункта меню, метку которого отрисовала система.
<!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>Стилизация <kbd> под клавишу
<kbd> не имеет встроенного оформления, кроме моноширинного шрифта, поэтому добавление CSS значительно улучшает читаемость сочетаний клавиш. Рамка, небольшие отступы и светлый фон делают каждую клавишу похожей на физический колпачок. В примере ниже внешняя комбинация сохраняет вид по умолчанию, а каждая внутренняя клавиша стилизована с помощью класса .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>Тег <kbd> не является устаревшим. С помощью CSS-свойств font-family и border можно добиться более богатых эффектов, как показано выше.
Доступность
<kbd> не имеет специальной семантики для вспомогательных технологий — программы чтения с экрана не объявляют его как «ввод с клавиатуры», и он не передаёт никакой роли или состояния. Это семантическая и презентационная подсказка для зрячих пользователей и машин, а не доступная метка.
Поэтому никогда не полагайтесь только на <kbd> для передачи смысла. Если сочетание клавиш должно быть понятно всем, опишите его словами в окружающем тексте (например, «Нажмите Ctrl плюс C для копирования»), а не полагайтесь на визуальное оформление клавиш.
Атрибуты
Тег <kbd> поддерживает глобальные атрибуты и атрибуты событий.
Связанные теги
<code>— фрагмент программного кода.<samp>— пример или вывод системы.<var>— переменная или заполнитель в коде или вводе.