HTML теги для оформления текста
Текст является важность частью сайтов, умение правильно его оформить очень важная составляющая при его создании. Использование правильных тегов для текста позволит не только улучшить его визуальное отображение, но также значительно повлияет на оптимизацию страницы для поисковых систем.
В данной статье перечислены только те теги, которые рекомендованы для использования актуальной спецификацией html5.
Структура
h1, h2, h3, h4, h5, h6 - блочные теги предназначены для указания заголовков. Заголовков в html есть 6 уровней, от h1 (первый уровень) до h6 (последний уровень), каждый визуально выделен жирным шрифтом и его соответствующим размером. Заголовки должны описывать содержание, это положительно влияет на оптимизацию сайта. Хорошей практикой считается указывать только один заголовок первого уровня h1, остальных может быть несколько. Заголовки должны указываться по иерархии, на первом уровне заголовок h1 дальше подзаголовок h2 и так далее
p - абзац. Блочный тег, разделяет текст на отдельные абзацы, в конце добавляется отступ
Примеры: https://codepen.io/Yury_P/pen/WNGLgdW
Форматирование
b - визуально выделяет текст жирным начертанием
strong - отображает текст жирным начертанием, логически указывает на важность текста. Может быть использован для выделения ключевых слов для оптимизации поиска
i - задает курсивное начертание текста
em - задает курсивное начертание текста, логически указывает на важность текста
u - подчеркивает текст снизу
pre - сохраняет форматирование текста (не удаляет пробелы и переносы строк)
sup - текст отображается как верхний индекс
sub - текст отображается как нижний индекс
small - уменьшает текст на условную единицу
address - внутри указывается адрес (физический адрес, телефон, почта), обычно отображается курсивным шрифтом
mark - отображает текст как выделенный
abbr - оборачивает аббревиатуру (сокращение), в атрибуте title указывается ее расшифровка, которая показывается при наведении
kbd - отображает название клавиш или текст набранный пользователем, обычно отображается моноширинным шрифтом
dfn - внутри пишется название нового термина, далее идет его пояснение, обычно отображается курсивным шрифтом
ins - выделяет новый текст, который был добавлен при обновлении содержания, обычно отображается как подчеркнутый текст
del - выделяет старый текст, который был удален при обновлении содержания, обычно отображается как зачеркнутый текст
s - зачеркивает текст
Примеры: https://codepen.io/dmitryvalak/pen/zYKXjaV
Цитаты
q - отображает текст как цитату, обрамляет его кавычками
blockquote - отображает текст как цитату. По сравнению с тегом используется для длинных цитат, оформляется отступами
cite - выделяет цитату на материал из другого источника, обычно отображается курсивным шрифтом
Примеры: https://codepen.io/dmitryvalak/pen/yLarjoq
Списки
ul - маркированный список. Каждый элемент списка оборачивается тегами li
ol - нумерованный список. Каждый элемент списка оборачивается тегами li
dl - список терминов. Внутри используются теги: dt - название термина, dd - описание термина
Примеры: https://codepen.io/Yury_P/pen/mdrgZQb
Отображение кода
code - оборачивает программный код, обычно отображается моноширинным шрифтом, не учитывает переносы строк и дополнительные пробелы
var - оборачивает переменную из программного кода, обычно отображается моноширинным шрифтом
samp - оборачивает текст, которые является результатом вывода скрипта или программы, обычно отображается моноширинным шрифтом
Примеры: https://codepen.io/Yury_P/pen/yLaGxPB
Другие теги
span - строчный тег. Сам по себе не имеет никакого логического или визуального смысла. Часто используется внутри абзаца (
) для выделения части текста. Если часть текста нужно стилизовать по другому, ее можно обернуть в span, указать класс и в css добавить нужные стили
br - переносит текст на новую строку
wbr - указывает где можно сделать перенос слова
hr - вставляет горизонтальную полосу
bdo - задает направление текста, в атрибуте dir указывается направление: rtl - справа на лево, ltr - слева направо
bdi - запрещает изменение направления текста, по аналогии с bdo направление указывается в атрибуте dir, по умолчанию значение auto