Как указываются заголовки текста в HTML разметке?

как указываются заголовки текста в html разметке?

Использование заголовков

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

Чтобы понять роль заголовков в структуре любого текста, в том числе и HTML-страницы, откройте книгу и перейдите к её содержанию. Вы сразу заметите, что оно строится по заголовкам и подзаголовкам, присутствующим на страницах. Это очень удобно, так как мы можем понять, о чем данная книга и конкретный раздел в частности, не тратя много времени на изучение полотна текста.

Чтобы добавить заголовок в разметку HTML-страницы используйте любой из шести доступных элементов: <h1>, <h2>, <h3>, <h4>, <h5> и <h6>.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Пример использования заголовка</title>
    </head>
    <body>
        <h1>Текст заголовка первого уровня</h1>
        <p>...Прилегающий текст любого содержания</p>
    </body>
</html>

Заголовки и логическая структура

Цифры, представленные в имени тэга, обозначают вес[1] или уровень заголовка. Этот вес влияет на важность содержимого, расположенного под ним. Чем больше вес, тем более крупным и жирным шрифтом отобразит его браузер.

Скриншот отображения заголовов различных уровней в браузере
Рис1. Отображение заголовков от H1 до H6 в браузере

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

Если использовался заголовок первого уровня «<h1>Все о рыбалке (времена года)</h1>» и текст, находящийся под ним, нужно разбить двумя подзаголовками, то должны использоваться более мелкие веса, такие как <h2>. Например, «<h2>Летняя рыбалка</h2>» и «<h2>Зимняя рыбалка</h2>».

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Логическая структура заголовков</title>
    </head>
    <body>
        <h1>Все о рыбалке (времена года)</h1>

        <h2>Летняя рыбалка</h2>
        <p>...текст о летней рыбалке</p>

        <h2>Зимняя рыбалка</h2>
        <p>...текст о зимней рыбалке</p>
    </body>
</html>

Заметка
До выхода HTML5 документ мог содержать только один заголовок <h1>. Считалось, что он характеризует содержание всей страницы. HTML5 определяет несколько семантических элементов[2], которые могут содержать собственную структуру заголовков. Поэтому и документ в целом может иметь много <h1>, но только по одному для каждого семантического элемента. Их мы будем изучать далее в учебном курсе.

Термины, использованные в статье

  1. Вес заголовка — абстрактная величина, характеризующая степень важности информации. Считается, что поисковые системы Yandex и Google определяют логическую структуру страницы и степень важности разных её частей, исходя из весов заголовков.
  2. Семантические элементы — элементы HTML-разметки, придающие своему содержимому особую значимость. Как правило, в визуальном отображении информации никакой специфики не наблюдается. Элементы используются программами чтения экрана, которые помогают людям с ограниченными возможностями понять структуру вашего сайта. Использование семантических элементов так же способствует лучшему сканированию поисковыми системами.

Последние публикации