Ещё 7 тегов, которые редко замечают, но у каждого - точный смысл: <kbd> и <samp> различают ввод пользователя и вывод программы, <s> и <u> легко перепутать с более точными соседними тегами, <var> и <data> хранят значения, а <dfn> отмечает место, где термин определяется впервые.
В этом уроке
Присмотрись: Ctrl+N показан моноширинным шрифтом (kbd), как и ответ консоли (samp); старая цена зачёркнута (s), опечатка подчёркнута (u); переменные a и b - курсивом; а первое упоминание "семантической вёрстки" выделено как определение (dfn) - и всё это снова без единой строчки CSS.
Ввод и вывод: kbd и samp
<kbd> обозначает то, что вводит пользователь - обычно с клавиатуры, а <samp> - то, что выводит программа или система в ответ. Для сочетания клавиш можно вложить <kbd> в <kbd> (внешний тег - вся комбинация, внутренние - отдельные клавиши), но это необязательно: клавиши можно перечислить и по отдельности. Оба тега по умолчанию показывают текст моноширинным шрифтом, поэтому легко перепутать их местами - но смысл у них противоположный: кто "говорит" в данный момент, человек за клавиатурой или программа.
Нажми <kbd>Ctrl</kbd>+<kbd>N</kbd> - это вводит пользователь, поэтому kbd.
Нажми <samp>Ctrl+N</samp> - неверный тег: это не вывод программы, а то, что должен ввести человек - нужен kbd.
Зачёркнутое и подчёркнутое: s и u
<s> зачёркивает текст, который просто больше не актуален или не верен - например, распроданный товар или устаревшую цену. Это НЕ то же самое, что <del> из прошлого урока: del обозначает реальную правку документа, а s - что содержимое само по себе устарело, безо всякой истории изменений. <u> в HTML4 был чисто визуальным подчёркиванием, а в HTML5 получил смысл "не выраженной словами пометки" - например, отметки орфографической ошибки в тексте, как это делают текстовые редакторы. MDN отдельно предупреждает: не использовать u просто для подчёркивания ради оформления и не путать его с подчёркиванием ссылки - для декоративного подчёркивания есть CSS text-decoration.
<s>Товара нет в наличии</s> - уже привезли новую партию! - информация просто устарела, s уместен.
<del>Товара нет в наличии</del> - неверный тег: здесь нет правки документа, только устаревшая информация, нужен s.
Переменные и значения: var и data
<var> обозначает переменную в математическом выражении или программном коде - браузер по умолчанию показывает её курсивом. <data> решает похожую задачу, что и <time> из прошлого урока, но для данных, не связанных с датой: обязательный атрибут value хранит машиночитаемое значение (например, ID товара), а видимый текст внутри тега может быть каким угодно человекочитаемым описанием. Важное уточнение самой спецификации: если содержимое всё-таки дата или время - нужно использовать именно time, а не data.
<data value="398">Мини-кетчуп</data> - человекочитаемое название и машиночитаемый ID товара одновременно.
<time>сорок два</time> - неверный тег: значение не связано с датой или временем, здесь нужен data с атрибутом value.
Термин определяется здесь: dfn
<dfn> помечает не любое упоминание термина, а именно то место, где он ОПРЕДЕЛЯЕТСЯ - обычно первое появление вместе с расшифровкой смысла в том же абзаце. Дальше по тексту термин можно упоминать сколько угодно раз уже без dfn - тег указывает читателю и поисковику, где искать само определение, а не помечает термин целиком по всему документу. Тег часто комбинируют с <abbr> из прошлого урока: аббревиатура даёт короткую форму, а dfn - что именно здесь она определяется впервые.
<dfn>Семантическая вёрстка</dfn> - использование тегов по их смыслу. - первое, определяющее упоминание.
Мы уже обсуждали <dfn>семантическую вёрстку</dfn> выше. - термин уже был определён раньше; здесь просто повторное упоминание, dfn тут не нужен.
Частые ошибки новичков
| Ошибка | Что происходит | Как исправить |
|---|---|---|
| Использовать <del> для информации, которая просто устарела (например, распроданный товар), а не для правки документа | Путает смысл: del - про изменение документа, а не про "больше не актуально" | Для контента, который просто устарел или не верен, использовать <s> |
| Использовать <u> просто для подчёркивания текста ради оформления | Визуально похоже на ссылку и не несёт содержательного смысла пометки | Для декоративного подчёркивания - CSS text-decoration, u оставить для содержательных пометок |
| Использовать <time> для значений, не связанных с датой или временем | Машиночитаемое значение time предназначено именно для даты/времени, а не произвольных данных | Для произвольных машиночитаемых значений использовать <data> с атрибутом value |
| Оборачивать в <dfn> каждое повторное упоминание термина, а не только первое | dfn обозначает именно место, где термин определяется, а не любое его упоминание | Использовать dfn только на первом, определяющем месте |
| Путать <kbd> (ввод пользователя) и <samp> (вывод программы) местами | Искажает смысл: непонятно, кто "говорит" - человек за клавиатурой или программа | kbd - для того, что вводит пользователь, samp - для того, что выводит программа |
Шпаргалка
| Тег | Смысл и особенности |
|---|---|
| <kbd> | Ввод с клавиатуры - можно вкладывать kbd в kbd для сочетаний клавиш |
| <samp> | Вывод программы или системы |
| <s> | Контент больше не актуален или не верен - не для правок документа (для этого del) |
| <u> | Содержательная пометка (например, орфографическая ошибка) - не подчёркивание ради вида |
| <var> | Переменная в математике или коде - курсив по умолчанию |
| <data> | Машиночитаемое значение (value) для НЕ временных данных - для дат нужен time |
| <dfn> | Место, где термин определяется впервые - не каждое повторное упоминание |
Коротко: отвечаем на вопросы
Чем s отличается от del, если оба зачёркивают текст?
s обозначает содержимое, которое просто больше не актуально или не верно - например, распроданный товар или устаревшую цену, без всякой истории правок. del - это отдельный тег именно для отслеживания правок документа: что было удалено при редактировании, обычно в паре с ins для добавленного. Смысл разный, даже если по умолчанию выглядят одинаково - зачёркнутым текстом.
Можно ли использовать u, чтобы просто подчеркнуть текст для оформления?
Не стоит. HTML5 вернул тегу u смысл содержательной, но не выраженной словами пометки - например, отметки орфографической ошибки. Для чисто визуального подчёркивания правильнее использовать CSS text-decoration: underline, а не u - тем более что подчёркнутый текст легко перепутать со ссылкой, которая тоже подчёркнута по умолчанию.
Чем data отличается от time?
Оба хранят машиночитаемое значение рядом с человекочитаемым текстом, но у них разное назначение: time - именно для дат и времени, а data - для любых других значений, например ID товара или кода классификации. Если содержимое связано с датой или временем, нужно использовать time, а не data.
Как правильно показать сочетание клавиш вроде Ctrl+N?
Можно обернуть в kbd всю комбинацию целиком, а можно - каждую клавишу по отдельности (например, для Ctrl и N раздельно). Оба варианта валидны; вложенный вариант (kbd внутри kbd) чуть точнее показывает, что это единая комбинация, а не два независимых упоминания клавиш.
