HTML
February 5, 2020

HTML-текст

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

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

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


Теги для HTML текста

Содержание:

1. Теги заголовков: <h1...h6>

2. Теги для форматирования текста: <b>, <em>, <i>, <small>, <strong>, <sub>, <sup>, <ins>, <del>, <mark>

3. Теги для ввода «компьютерного» текста: <code>, <kbd>, <samp>, <var>, <pre>

4. Теги для оформления цитат и определений: <abbr>, <bdo>, <blockquote>, <q>, <cite>, <dfn>

5. Абзацы, средства переноса текста: <p>, <br>, <hr>


1. Теги заголовков

📷 Рис.1. Теги заголовков

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

  • Тег <h1>

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

  • Тег <h2>

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

  • Тег <h3>

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

  • Теги <h4>, <h5>, <h6>

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

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


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

  • Тег <b>

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

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

  • Тег <em>

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

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

  • Тег <i>

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

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

  • Тег <small>

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

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

  • Тег <strong>

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

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

  • Тег <sub>

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

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

  • Тег <sup>

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

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

  • Тег <ins>

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

Для тега доступны следующие атрибуты: cite, datetime.

  • Тег <del>

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

Для тега доступны следующие атрибуты: cite, datetime.

  • Тег <mark>

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

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


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

  • Тег <code>

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

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

  • Тег <kbd>

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

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

  • Тег <samp>

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

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

  • Тег <var>

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

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

  • Тег <pre>

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

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


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

  • Тег <abbr>

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

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

  • Тег <bdo>

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

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

  • Тег <blockquote>

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

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

  • Тег <q>

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

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

  • Тег <cite>

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

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

  • Тег <dfn>

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

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


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

  • Тег <p>

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

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

  • Тег <br>

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

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

  • Тег <hr>

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

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


Источник ↗