Текстовые элементы: абзацы, списки и выделение

Текст составляет большую часть веб-содержимого, поэтому особенно важно правильно его размечать. Правильные текстовые элементы делают содержимое понятным для всех, включая пользователей программ чтения с экрана.

Заключайте каждый блок текста в тег p. Он объединяет предложения в настоящий абзац, по которому вспомогательная технология может перемещаться по одному фрагменту.

Не складывайте пустые div или теги br, чтобы создать интервалы между фрагментами текста. Используйте настоящие абзацы, а промежутки поручайте CSS. Структура должна задаваться тегом, а не оформлением.

Когда элементы связаны друг с другом, используйте настоящий список. Программы чтения с экрана объявляют количество элементов, например «список из трёх элементов», сразу давая пользователю контекст.

Используйте ul, когда порядок не важен, и ol, когда он важен, например для шагов. Каждый элемент должен находиться в li, а не в отдельном div.

Тег em отмечает слова, на которых вы сделали бы ударение в речи. Программы чтения с экрана могут изменить интонацию, поэтому выделение действительно слышно, а не только видно.

Тег strong отмечает текст высокой важности, например предупреждение. Это смысл, а не просто жирное оформление, поэтому вспомогательные технологии учитывают его.

Теги b и i меняют только внешний вид и не добавляют смысла. Используйте em и strong, когда ударение или важность действительно имеют значение.

Используйте blockquote для отдельного блока цитаты и q для короткой встроенной цитаты. Семантика сообщает пользователям, что эти слова принадлежат другому источнику.

Заключайте встроенный код в code, а сокращённые формы расшифровывайте с помощью abbr. Эти небольшие теги добавляют точный смысл, который зрячие читатели выводят из контекста.

Правило для текста простое: выбирайте тег по его смыслу, а затем свободно оформляйте его. Внешний вид — это CSS, структура — это HTML.

Используйте p для обычного текста, ul и ol для списков, а em и strong — для настоящего выделения. Выбирайте теги по смыслу, а оформление оставляйте CSS. 🎉