1.4. HTML-текст

HTML-текст представлен в спецификации элементами для форматирования и группировки текста. Данные элементы являются контейнерами для текста и не имеют визуального отображения.

Элементы для форматирования текста несут смысловую нагрузку и обычно задают для текста, заключенного внутрь, стилевое оформление, например, выделяют текст жирным начертанием или отображают его шрифтом другого семейства (свойство font-family).

Грамотно отформатированный текст дает понять поисковым системам, какие слова несут важную смысловую нагрузку, по каким из них предпочтительно ранжировать веб-страницу в поисковой выдаче. Вся текстовая информация, отображаемая на сайте, размещается внутри элемента <body>.

HTML-элементы для текста

1. HTML-элементы для заголовков

Заголовки являются важными элементами веб-страницы, они упорядочивают текст, формируя его визуальную структуру. Элементы <h1>...<h6> должны использоваться только для выделения заголовков нового раздела или подраздела.

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

Заголовок 1-го уровня

Заголовок 2-го уровня

Заголовок 3-го уровня

Заголовок 4-го уровня

Заголовок 5-го уровня
Заголовок 6-го уровня
Фигура. 1. Элементы для заголовков HTML-документа

1.1. Элемент <h1>

Заголовок самого верхнего уровня, на странице рекомендуется использовать только один раз, по возможности частично дублируя заглавие страницы. Элемент <h1> должен быть уникальным для каждой страницы сайта.

Рекомендуется прописывать в начале статьи, используя ключевое слово в тексте заголовка. Размер шрифта в браузере равен 2em, верхний и нижний отступ по умолчанию 0.67em.

1.2. Элемент <h2>

Представляет подзаголовки элемента <h1>. Размер шрифта в браузере равен 1.5em, верхний и нижний отступ по умолчанию 0.83em.

1.3. Элемент <h3>

Показывает подзаголовки элемента <h2>. Размер шрифта в браузере равен 1.17em, верхний и нижний отступ по умолчанию 1em.

1.4. Элементы <h4>, <h5>, <h6>

Обозначают подзаголовки четвёртого, пятого и шестого уровня. Размер шрифта в браузере равен 1em / 0.83em / 0.67em, верхний и нижний отступ по умолчанию 1.33em / 1.67em / 2.33em соответственно.

Для всех элементов доступны ‎глобальные атрибуты.

2. Элементы для форматирования текста

2.1. Элемент <b>

Задаёт полужирное начертания шрифта. Выделяет текст без акцента на его важность.

Для элемента доступны ‎глобальные атрибуты.

2.2. Элемент <em>

Отображает шрифт курсивом, придавая тексту значимость.

Для элемента доступны ‎глобальные атрибуты.

2.3. Элемент <i>

Отображает шрифт курсивом.

Для элемента доступны ‎глобальные атрибуты.

2.4. Элемент <small>

Уменьшает размер шрифта на единицу по отношению к обычному тексту.

Для элемента доступны ‎глобальные атрибуты.

2.5. Элемент <strong>

Задаёт полужирное начертание шрифта, относится к элементам логической разметки, указывая браузеру на важность текста.

Для элемента доступны ‎глобальные атрибуты.

2.6. Элемент <sub>

Используется для создания нижних индексов. Сдвигает текст ниже уровня строки, уменьшая его размер.

Для элемента доступны ‎глобальные атрибуты.

2.7. Элемент <sup>

Используется для создания степеней. Сдвигает текст выше уровня строки, уменьшая его размер.

Для элемента доступны ‎глобальные атрибуты.

2.8. Элемент <ins>

Выделяет текст в новой версии документа, подчёркивая его.

Для элемента доступны атрибуты cite и datetime.

2.9. Элемент <del>

Перечёркивает текст. Используется для выделения текста, удаленного из документа.

Для элемента доступны атрибуты cite и datetime.

2.10. Элемент <mark>

Применяется для выделения фрагментов текста в справочных целях, окрашивая блок символов желтым цветом.

Для элемента доступны ‎глобальные атрибуты.

3. Элементы для ввода «компьютерного» текста

3.1. Элемент <code>

Служит для выделения фрагментов программного кода. Отображает текст моноширинным шрифтом.

Для элемента доступны ‎глобальные атрибуты.

3.2. Элемент <kbd>

Отмечает фрагмент как вводимый пользователем с клавиатуры. Отображает текст моноширинным шрифтом.

Для элемента доступны ‎глобальные атрибуты.

3.3. Элемент <samp>

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

Для элемента доступны ‎глобальные атрибуты.

3.4. Элемент <var>

Выделяет имена переменных, отображая текст курсивом.

Для элемента доступны ‎глобальные атрибуты.

3.5. Элемент <pre>

Позволяет вывести текст на экран, сохранив изначальное форматирование. Пробелы и переносы строк при этом не удаляются.

Для элемента доступны ‎глобальные атрибуты.

4. Элементы для оформления цитат и определений

4.1. Элемент <abbr>

Применяется для форматирования аббревиатур. Браузером обычно подчеркивается пунктирной линией. Расшифровка сокращения осуществляется с помощью атрибута title, она появляется при наведении курсора мыши на текст.

Для элемента доступны ‎глобальные атрибуты.

4.2. Элемент <bdo>

Используется для изменения текущего направления текста.

Для элемента доступен атрибут dir.

4.3. Элемент <blockquote>

Выделяет цитаты внутри документа, выделяя его отступами и переносами строк.

Для элемента доступен атрибут cite.

4.4. Элемент <q>

Используется для выделения коротких цитат. Браузерами заключается в кавычки.

Для элемента доступен атрибут cite.

4.5. Элемент <cite>

Применяется для выделения цитат, названий произведений, сносок на другие документы.

Для элемента доступны ‎глобальные атрибуты.

4.6. Элемент <dfn>

Позволяет выделить текст как определение. Несмотря на наличие данного элемента, рекомендуется выделять текст силами CSS.

Для элемента доступен атрибут title.

5. Абзацы, средства переноса текста

5.1. Элемент <p>

Разбивает текст на отдельные абзацы, отделяя друг от друга пустой строкой. Браузер автоматически добавляет верхнее и нижнее внешнее поле margin, равное 1em, при этом поля соседних абзацев «схлопываются».

Для элемента доступны ‎глобальные атрибуты.

5.2. Элемент <br>

Переносит текст на следующую строку, создавая разрыв строки.

Для элемента доступны ‎глобальные атрибуты.

5.3. Элемент <hr>

Используется для разделения контента на веб-странице. Отображается в виде горизонтальной линии.

Для элемента доступны ‎глобальные атрибуты.

Поделиться: