1.8.2 Разметка текста. Встроенные элементы
Акцентированный текст
<em>...</em>
Этот тег используется для придания акцента определённому слову или фразе. По умолчанию такой текст выделяется курсивом. Под акцентом подразумевается ударение на слове или фразе, которое обычно придаёт окрас речи. Для курсивного начертания декоративного текста используйте CSS.
Важный текст
<strong>...</strong>
Этим тегом выделяются важные слова или фразы в тексте. По умолчанию такой текст выделяется полужирным. Под важным текстом подразумевается тот текст, на который необходимо обратить внимание, и игнорирование которого, возможно, приведёт к неприятным последствиям или к непониманию сути текста. Для полужирного начертания декоративного текста используйте CSS.
Альтернативная речь
<i>...</i>
Данный тег указывает на текст, который отличается по стилю речи, настроению, либо фразы на иностранном (разговорном/сленговом) языке. По умолчанию выделяется курсивом. Не путайте с тегом <em>
. Для курсивного начертания декоративного текста используйте CSS.
Ключевые слова
<b>...</b>
Используется для выделения ключевых слов или названий без придания какого-либо акцента. По умолчанию выделяется полужирным. Не путайте с тегом <strong>
. Для полужирного начертания декоративного текста используйте CSS.
Неточный текст
<s>...</s>
Используется для выделения текста, который является неточным или неактуальным. По умолчанию такой текст отображается перечёркнутым.
Аннотированный текст
<u>...</u>
Используется для выделения имён собственных, иностранных слов либо ошибок в тексте. По умолчанию такой текст отображается подчёркнутым.
Удалённый текст
<del>...</del>
Используется для выделения текста, который был удален из новой версии документа. По умолчанию такой текст отображается перечёркнутым. Не путайте с тегом <s>
.
Вставленный текст
<ins>...</ins>
Используется для выделения текста, добавленного в новой версии документа. По умолчанию такой текст отображается подчёркнутым. Не путайте с тегом <u>
.
Источники
<cite>...</cite>
Используется для выделения названия произведения (книги, фильмы и другие источники), которые так или иначе упоминаются в тексте. По умолчанию выделяется курсивом. Не используется для разметки авторов произведения.
Короткие цитаты
<q>...</q>
Используется для выделения коротких цитат. По умолчанию такой текст выделяется кавычками. Стиль кавычек можно изменить с помощью CSS.
Аббревиатуры
<abbr title="...">...</abbr>
Используется для выделения последовательности символов, являющихся аббревиатурой. Имеет необязательный (но крайне желательный) атрибут title
, в котором пишется расшифровка аббревиатуры. В браузере, при наведении на аббревиатуру мышкой, появляется всплывающая подсказка с расшифровкой аббревиатуры. Поисковики индексируют не только аббревиатуру, но и её расшифровку.
Новые термины
<dfn>...</dfn>
Используется для выделения новых терминов (их первое употребление и определение). По умолчанию выделяется курсивом. Имеет необязательный атрибут title
, в котором пишется определение термина.
Программный код
<code>...</code>
Используется для выделения программного кода. По умолчанию отображается как моноширинный текст уменьшенного размера. Поскольку символы табуляции, пробелы и переносы в данном теге не учитываются, то используется в связке с тегом <pre>
:
<pre>
<code>
//
// Программный код
//
</code>
</pre>
Названия клавиш
<kbd>...</kbd>
Используется для названия клавиш. По умолчанию отображается как моноширинный текст. Обычно им выделяют комбинации клавиш, вводимых на клавиатуре:
<p>
Введите на клавиатуре комбинацию клавиш <kbd>Alt</kbd> + <kbd>Shift</kbd>
</p>
Выделенный текст
<mark>...</mark>
Используется для привлечения внимания к тексту. Обычно им выделяют что-то важное для читателя, либо используется разработчиками для выделения слова из поиска на их сайтах. По умолчанию выделяется фоном жёлтого цвета (как выделенный текст цветным маркером).
Юридический текст
<small>...</small>
Используется для выделения юридического текста, информации о лицензии, авторских правах и т.д. Уменьшает текст на одну условную единицу.
Нижний индекс
<sub>...</sub>
Используется для расположения текста в нижнем индексе (например для математических или химических формул). Такой текст располагается ниже базовой линии текста и уменьшается в размерах.
Верхний индекс
<sup>...</sup>
Используется для расположения текста в верхнем индексе (например для математических или химических формул). Такой текст располагается выше базовой линии текста и уменьшается в размерах.
Дата и время
<time>...</time>
Используется для выделения в тексте даты или времени. Есть необязательный атрибут datetime
, в котором указывается дата и время в формате ISO 8601. Более подробно узнать об этом атрибуте советую на сайте WebRef.ru. Этот атрибут создан для однозначной трактовки содержимого данного тега, которое может быть написано в свободном формате, роботами поисковиков при индексации страниц.