Тег kbd (от английского keyboard, «клавиатура») отмечает то, что вводит пользователь: клавишу, сочетание клавиш, команду. Так действие читателя отделяют от слов автора и от ответа программы. Тег парный, закрывающий обязателен, собственных атрибутов у него нет. Браузер выводит его моноширинным шрифтом и больше ничего не добавляет.
Сам тег kbd прост, трудности начинаются с записи. Сочетание клавиш можно оформить одним элементом или вложенными, в Windows и на Mac одни и те же клавиши называют по-разному, а «кнопка» на странице не должна разрываться на две строки. Всё это разобрано ниже.
<p>Введите <kbd>git status</kbd> и нажмите
<kbd>Enter</kbd>.</p>В этой статье
- Тег kbd в HTML: что это и для чего нужен
- Сочетание клавиш в теге kbd: один тег или вложенные kbd
- Тег kbd и samp: команда в терминале, пункт меню и меняющаяся часть
- Названия клавиш в теге kbd: Ctrl и ⌘, знак «+» и запись для Windows и Mac
- Оформление тега kbd в CSS: клавиша как кнопка и двойная рамка у вложенных
- Перенос тега kbd на новую строку: почему «Page Down» разрывается
- Тег kbd и aria-keyshortcuts: запись сочетания и настоящее сочетание
- Тег kbd или code, samp, var: что выбрать
- Частые ошибки с тегом kbd
Тег kbd в HTML: что это и для чего нужен
Спецификация HTML описывает kbd как ввод пользователя: чаще всего с клавиатуры, но подходит и другой ввод, например голосовая команда. Справка MDN (на английском) говорит о том же и добавляет, что по умолчанию браузеры выводят элемент моноширинным шрифтом. Читателю показывают то, что он должен сделать сам: нажать клавишу, набрать команду.
По умолчанию kbd - моноширинный прямой текст обычной насыщенности, без рамки и фона. В абзаце его размер 13 px, а в заголовке h2 он наследует жирность и становится крупнее (19,5 px). Внутри ссылки текст получает цвет ссылки, а внутри em - курсив.
Отличить kbd от code и samp по виду нельзя: по умолчанию все три выглядят одинаково. Разница в смысле: kbd - то, что вводит читатель, samp - то, что вывела программа, а code - фрагмент кода.
<p>Закройте вкладку: <kbd>Ctrl+W</kbd>.</p>
<p>Команда для проверки: <kbd>node --version</kbd>.</p>Сочетание клавиш в теге kbd: один тег или вложенные kbd
Сочетание клавиш записывают двумя способами. Первый - целиком в одном теге: <kbd>Ctrl+C</kbd>. Второй - вложенные теги: внешний kbd отмечает всё сочетание, внутренние - каждую клавишу, а знак «+» остаётся обычным текстом между ними. Оба варианта допустимы, в уроке курса второй назван чуть точнее.
<p>Одним тегом: <kbd>Ctrl+C</kbd></p>
<p>Вложенными: <kbd><kbd>Ctrl</kbd>+<kbd>C</kbd></kbd></p>У вложенной записи есть практический смысл: каждую клавишу можно оформить отдельно, как кнопку, а всё сочетание при этом остаётся одним фрагментом. В Chrome выделение обоих вариантов даёт один и тот же текст «Ctrl+C», поэтому при копировании разницы нет.
Если клавиши нажимают не одновременно, а по очереди, каждое сочетание записывают своим внешним kbd и разделяют запятой или словом. У одной клавиши вложенности нет, для неё достаточно одного тега: <kbd>Esc</kbd>.
<p><kbd><kbd>Ctrl</kbd>+<kbd>K</kbd></kbd>, затем
<kbd><kbd>Ctrl</kbd>+<kbd>C</kbd></kbd></p>Соберите сочетание в конструкторе ниже и сравните оба способа записи. Кадр читает выделение так же, как при копировании.
Пример: конструктор сочетания клавиш
Нажимайте на клавиши в порядке нажатия и переключайте способ записи. Кадр показывает вид, разметку и текст, который получится при копировании.
Тег kbd и samp: команда в терминале, пункт меню и меняющаяся часть
Ввод и ответ программы идут парой, а теги у них разные. Когда показывают целый сеанс терминала, kbd вкладывают в samp: всё, что видно на экране, находится внутри одного samp, а введённое человеком отмечено тегом kbd. Так система «повторяет» ввод на экране. Такую запись описывает спецификация, а сам сеанс подробно разобран на странице про samp.
<pre><samp>$ <kbd>npm test</kbd>
3 passed
</samp></pre>Обратная вложенность - samp внутри kbd - нужна, когда читателю показывают ввод по подсказке системы: пункт меню, название кнопки, слово, которое программа вывела на экран. Название взято с экрана, поэтому оно отмечено как samp, а действие читателя (выбрать, нажать) отмечено внешним kbd.
<p>Выберите
<kbd><samp>Файл</samp> > <samp>Создать</samp></kbd>.</p>Если в команде есть меняющаяся часть, её отмечают тегом var внутри kbd: читатель видит, что это слово нужно заменить своим. При выделении Chrome копирует только текст без разметки, поэтому из записи выше получится «Файл > Создать».
<p>Перейдите в папку:
<kbd>cd <var>папка</var></kbd></p>Названия клавиш в теге kbd: Ctrl и ⌘, знак «+» и запись для Windows и Mac
Внутри kbd пишут то, что напечатано на клавише, или общепринятое название: Ctrl, Shift, Alt, Esc, Tab, Enter. Буквенные клавиши пишут заглавной буквой, как они обозначены на клавиатуре: C, а не c. Названия стрелок и особых клавиш удобнее писать словами: Стрелка вниз, Пробел. Такая запись понятна без значков и не зависит от шрифта.
Один и тот же вариант записи держите на всём сайте. Когда в одном месте написано Ctrl, в другом Control, а в третьем CTRL, читатель гадает, одна это клавиша или разные.
На компьютерах Apple вместо Ctrl обычно нажимают Command (символ ⌘), а вместо Alt - Option (символ ⌥). Поэтому сочетание для Windows и для Mac записывают двумя вариантами. Кнопки ⌘ и ⌥ есть в конструкторе выше.
<p>Копировать: <kbd><kbd>Ctrl</kbd>+<kbd>C</kbd></kbd>
(на Mac <kbd><kbd>⌘</kbd>+<kbd>C</kbd></kbd>)</p>Знак «+» не клавиша, а связка, поэтому его пишут обычным текстом. Если сама клавиша плюс входит в сочетание, её записывают отдельным тегом и поясняют словом: «Ctrl и клавиша +». Так читатель не примет знак связки за часть названия.
Оформление тега kbd в CSS: клавиша как кнопка и двойная рамка у вложенных
По умолчанию kbd - моноширинный текст без рамки, и клавиша в нём не отличается от кода. Размер по умолчанию тот же, что у code: об этом написано в разделе про размер шрифта на странице про code. Чтобы клавиша выглядела как клавиша, ей задают рамку, фон и тень снизу.
kbd {
padding: 1px 5px;
border: 1px solid #8a8f99;
border-radius: 4px;
background: #f6f4ef;
box-shadow: 0 1px 0 #8a8f99;
}Проблема появляется при вложенных kbd. Правило для kbd применяется и к внешнему тегу, и к каждой клавише: вокруг сочетания рисуется общая рамка, а внутри неё - рамки клавиш. Получается двойная рамка. Исправить можно сбросом стилей у внешнего тега, внутри которого есть другой kbd.
kbd:has(> kbd) {
padding: 0;
border: 0;
background: none;
box-shadow: none;
}Селектор :has() поддерживают современные браузеры, в Chrome он сработал в кадре ниже. Если нужна запись без него, клавишам дают класс, например class="key", и оформляют только этот класс.
Пример: двойная рамка у вложенных kbd
Переключайте стиль. Кадр считает, сколько рамок нарисовано вокруг kbd, и сравнивает с числом клавиш.
Перенос тега kbd на новую строку: почему «Page Down» разрывается
Тег kbd строчный, и текст внутри него переносится по обычным правилам. Название из двух слов, например Page Down, может оказаться на границе строки, и тогда его половины окажутся на разных строках. Слово без пробела, как Delete, не разрывается.
Чтобы клавиша всегда оставалась целой, задают white-space: nowrap. Плашку с display: inline-block Chrome тоже переносит целиком, это видно на третьей строке кадра ниже.
kbd {
white-space: nowrap;
}Цена у nowrap одна: в очень узкой колонке длинная клавиша выйдет за край колонки, а не перенесётся. На телефонах колонка бывает 200 px и уже, поэтому длинные названия клавиш не стоит собирать в длинные цепочки.
Пример: ширина колонки и перенос kbd
Двигайте ползунок. Кадр спрашивает у браузера, из скольких частей состоит клавиша Page Down, и показывает результат для трёх записей.
Тег kbd и aria-keyshortcuts: запись сочетания и настоящее сочетание
Тег kbd только показывает читателю, какие клавиши нажать. Сами клавиши он не назначает: если на странице кнопка должна срабатывать по сочетанию, это делает скрипт, который слушает событие keydown.
Отдельно есть атрибут aria-keyshortcuts (ARIA). Он сообщает вспомогательным технологиям, что у элемента есть сочетание клавиш, но, как и любой ARIA-атрибут, сам ничего не запускает: поведение пишут скриптом. По описанию в справке MDN (на английском) значение записывают названиями клавиш через плюс, сначала модификаторы, затем одна обычная клавиша, например Control+S. Клавише Command соответствует Meta.
<button aria-keyshortcuts="Shift+S">
Сохранить
</button>document.addEventListener('keydown', (e) => {
if (e.shiftKey && e.code === 'KeyS') save();
});Запись в kbd рядом с кнопкой и атрибут делают разные вещи: первая подсказывает читателю, что нажать, второй объявляет сочетание, а работает оно только со скриптом. Проверьте это в кадре: у двух кнопок одинаковый атрибут, скрипт есть только у второй.
Пример: атрибут aria-keyshortcuts без скрипта и со скриптом
Щёлкните в кадре и нажмите Shift+S или воспользуйтесь кнопкой. Кадр считает, сколько раз сработала каждая кнопка.
Тег kbd или code, samp, var: что выбрать
Когда не уверены, какой тег нужен, ответьте на вопрос: кто делает то, что записано в тексте? Если человек вводит или нажимает - kbd, если программа выводит - samp, если это фрагмент кода - code.
| Что нужно отметить | Какой тег | Пример |
|---|---|---|
| Клавишу или сочетание | kbd | <kbd>Esc</kbd> |
| Команду, которую вводит читатель | kbd | <kbd>npm install</kbd> |
| Ответ программы | samp | <samp>added 12 packages</samp> |
| Пункт меню или кнопку с экрана программы | samp внутри kbd | <kbd><samp>Файл</samp></kbd> |
| Меняющуюся часть команды | var внутри kbd | <kbd>cd <var>папка</var></kbd> |
| Фрагмент кода | code | <code>let x = 1;</code> |
Частые ошибки с тегом kbd
Ошибки с этим тегом связаны с тем, что его путают с соседями по смыслу, и с тем, как оформляют вложенные клавиши.
| Ошибка | Что происходит | Как исправить |
|---|---|---|
Ответ программы в kbd: <kbd>notes.txt photos</kbd> | Список файлов выводит программа, а не вводит человек | <samp>notes.txt photos</samp> |
Сочетание в samp: <samp>Ctrl+N</samp> | Клавиши нажимает человек, а не выводит программа | <kbd>Ctrl+N</kbd> |
Клавиши в code: <code>Ctrl+C</code> | Тег code сообщает, что это код, а не действие читателя | <kbd>Ctrl+C</kbd> |
Сочетание в одном теге, когда у клавиш есть рамка: <kbd>Ctrl+C</kbd> | Рамка охватывает всё сочетание, отдельных клавиш не видно | Вложенные теги: <kbd><kbd>Ctrl</kbd>+<kbd>C</kbd></kbd> |
Знак «+» в отдельном теге: <kbd>Ctrl</kbd><kbd>+</kbd><kbd>C</kbd> | Знак связки не клавиша, но получает свою рамку | Записать «+» обычным текстом между тегами |
Рамка на всех kbd при вложенной записи | Вокруг сочетания и вокруг каждой клавиши рисуется рамка: получается двойная рамка | Сбросить стили у внешнего тега: kbd:has(> kbd) |
Клавиша записана по-разному: CTRL, Control, ctrl | Читатель гадает, одна это клавиша или разные | Один вариант записи на всём сайте: Ctrl |
Длинная клавиша в узкой колонке: Page Down | Название рвётся на две строки | white-space: nowrap для kbd |
kbd ради вида кнопки: <kbd>Новинка</kbd> | Тег говорит, что читатель что-то вводит, а это просто метка | span с классом и рамкой в CSS |
aria-keyshortcuts без скрипта | Атрибут сообщает о сочетании, но ничего не запускает | Добавить обработчик keydown |
