4. Заголовки

Видео на Rutube

Здравствуйте, дорогие студенты! Добро пожаловать на четвертый урок нашего курса веб-разработки. На прошлом занятии мы подробно изучили структуру HTML-документа и узнали о важности правильной организации HTML-кода.

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

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

Подготовка к уроку

Как обычно, начнем с подготовки рабочего пространства для этого урока, чтобы вам было удобно следовать инструкциям.

Создайте новую папку для урока. На рабочем столе или в удобном для вас месте создайте новую папку и назовите ее lesson_4.
Внутри папки lesson_4 создайте новый файл и назовите его headings.html. Убедитесь, что файл имеет расширение .html.
Скопируйте содержимое файла document.html из урока 3 в headings.html. Чтобы сэкономить время и не писать базовую структуру HTML-документа заново, скопируйте код из файла document.html, который вы создали на третьем уроке, и вставьте его в файл headings.html. Сохраните изменения в файле headings.html.

Теперь у вас есть файл headings.html с базовой структурой HTML-документа, и мы готовы приступить к изучению тегов заголовков.

Работа с тегами заголовков `<h1>` - `<h6>`

Теги заголовков в HTML предназначены для создания заголовков разных уровней значимости. Существует шесть уровней заголовков, от <h1> (самый важный, заголовок первого уровня) до <h6> (наименее важный, заголовок шестого уровня).

Шаги по добавлению тегов заголовков в headings.html:

Измените тег <title> в секции <head>. Откройте файл headings.html в текстовом редакторе и найдите секцию <head>. Измените текст внутри тега <title> на "Заголовки" – это будет название вкладки браузера для нашей страницы.
```
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Заголовки</title>
</head>
```
Удалите содержимое тега <body>. Найдите секцию <body> в вашем файле headings.html и удалите все, что находится внутри тегов <body> и </body>. Секция <body> должна остаться пустой, пока мы не добавим заголовки.
Добавьте заголовки от <h1> до <h6> в секцию <body>. Теперь добавьте в секцию <body> шесть тегов заголовков, от <h1> до <h6>. Для каждого тега используйте соответствующий текст, чтобы было понятно, какой это уровень заголовка. Скопируйте или введите следующий код в секцию <body> файла headings.html:
```
<body>
    <h1>Заголовок 1</h1>
    <h2>Заголовок 2</h2>
    <h3>Заголовок 3</h3>
    <h4>Заголовок 4</h4>
    <h5>Заголовок 5</h5>
    <h6>Заголовок 6</h6>
</body>
```
В этом коде мы создали шесть заголовков, каждый в своем теге, от <h1> до <h6>. Текст внутри каждого тега заголовка показывает уровень заголовка ("Заголовок 1", "Заголовок 2" и так далее), и в комментариях указано, какой заголовок самый большой и какой самый маленький.

Просмотр результатов в браузере

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

Сохраните файл headings.html. Сохраните все изменения, которые вы внесли в файл.
Откройте файл headings.html в браузере. Откройте файл headings.html в вашем веб-браузере (двойным кликом или через "Open in Default Browser" в VS Code).
Изучите отображение заголовков. В браузере вы увидите, как заголовки отображаются на странице:
- <h1> - "Заголовок 1" – отображается самым большим шрифтом и самым жирным. Это заголовок первого уровня, самый важный на странице. Обычно используется для основного заголовка страницы или раздела.
- <h2> - "Заголовок 2" – отображается чуть меньшим шрифтом, чем <h1>, но все еще достаточно крупным и жирным. Используется для подзаголовков разделов, подразделов и т.д.
- <h3> - "Заголовок 3" – становится еще меньше по размеру. Используется для подразделов внутри разделов второго уровня.
- <h4> - "Заголовок 4", <h5> - "Заголовок 5", <h6> - "Заголовок 6" – становятся все меньше и меньше, визуально уменьшаясь в значимости. <h6> – самый маленький и наименее заметный заголовок.
Вы видите, что браузер автоматически форматирует заголовки разных уровней, делая их визуально отличными друг от друга. Это создает визуальную иерархию на странице, которая помогает читателям быстро ориентироваться в контенте и понимать структуру информации. Заголовки от <h1> до <h6> формируют логическую структуру документа, как оглавление в книге, где заголовки глав – это <h1>, заголовки разделов в главах – это <h2>, подразделов – <h3> и так далее.
Изучите заголовки в инструментах разработчика. Откройте инструменты разработчика (F12) и перейдите на вкладку "Elements". Найдите теги <h1>, <h2>, <h3>, <h4>, <h5>, <h6> в секции <body>. Выберите каждый тег по очереди и посмотрите на вкладку "Styles" или "Computed". Вы увидите, что браузер применяет разные CSS-стили к заголовкам разных уровней:
- font-size (размер шрифта) – уменьшается от <h1> к <h6>, делая заголовки визуально меньше.
- font-weight: bold (жирность шрифта) – все заголовки по умолчанию выделены жирным шрифтом, но могут быть и другие стилистические различия.
- margin (отступы) – заголовки также имеют верхние и нижние отступы, чтобы визуально отделяться от окружающего текста и создавать "воздух" на странице. Отступы могут немного отличаться для разных уровней заголовков.

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

Использование тегов заголовков (<h1> - <h6>) – это важная часть создания семантически правильного и удобного для пользователей веб-контента. Заголовки приносят множество преимуществ:

Организация контента и улучшение читабельности: Заголовки визуально разделяют текст на логические блоки, делая страницу более структурированной и легкой для восприятия. Читатели могут быстро просматривать заголовки, чтобы понять общую структуру страницы и найти интересующую их информацию. Хорошо структурированный контент с четкими заголовками значительно улучшает пользовательский опыт (UX) и делает страницу более удобной для чтения и навигации.
Структурирование контента и задание иерархии: Теги заголовков задают иерархию информации на странице. <h1> обозначает самый важный заголовок, <h2> – менее важный подзаголовок, и так далее до <h6>. Эта иерархия помогает организовать контент логически, представляя главную тему и подчиненные ей разделы и подразделы. Использование правильной иерархии заголовков делает структуру документа понятной не только для людей, но и для программ, например, для программ чтения с экрана для людей с ограниченными возможностями.
SEO-оптимизация (Search Engine Optimization): Поисковые системы, такие как Google, Yandex и другие, используют заголовки для понимания темы и содержания веб-страницы. Заголовки, особенно <h1> и <h2>, считаются важными сигналами для поисковых алгоритмов, помогая им определить релевантность страницы поисковым запросам. Правильное использование заголовков с ключевыми словами, отражающими тему страницы, может повысить позиции вашего сайта в результатах поиска и привлечь больше органического трафика. Важно, чтобы заголовки были не только визуально выделены, но и семантически значимы, используя соответствующие HTML-теги.

Важно:

Используйте заголовки логически и иерархически. Начинайте с <h1> для основного заголовка страницы, затем используйте <h2> для основных разделов, <h3> для подразделов и так далее. Не пропускайте уровни заголовков (например, не используйте <h1> и сразу <h3>, пропуская <h2>).
Используйте только один тег <h1> на странице для основного заголовка. Для подзаголовков используйте <h2> - <h6>.
Заголовки должны быть краткими, информативными и отражать содержание раздела. Используйте ключевые слова, релевантные теме раздела, но не перегружайте заголовки ключевыми словами ради SEO. Заголовки должны быть прежде всего полезны и понятны для пользователей.
Не используйте теги заголовков только для визуального выделения текста, если текст не является заголовком по смыслу. Если вам нужно просто сделать текст крупнее или жирнее, используйте CSS-стили, а не теги заголовков. HTML – для структуры и содержания, CSS – для оформления.

Подведем итоги урока

Давайте подведем итоги нашего урока, чтобы закрепить основные моменты о тегах заголовков <h1> - <h6> в HTML:

Теги заголовков (<h1> - <h6>) используются для создания заголовков разных уровней значимости на веб-странице. <h1> – самый важный заголовок, <h6> – наименее важный.
Заголовки визуально выделяются браузером, отображаясь более крупным и жирным шрифтом, чем обычный текст, и имеют отступы сверху и снизу. Размер шрифта уменьшается от <h1> к <h6>, создавая визуальную иерархию.
Теги заголовков задают логическую структуру и иерархию контента на странице, делая его более понятным и доступным для читателей и программ (например, программ чтения с экрана, поисковых систем).
Использование заголовков улучшает организацию контента, читабельность, навигацию и поисковую оптимизацию (SEO) веб-страницы.
Важно использовать заголовки логически и иерархически, начиная с <h1> для основного заголовка и далее используя <h2>-<h6> для подзаголовков разных уровней, не пропуская уровни.
На странице должен быть только один тег <h1> для основного заголовка, обозначающего главную тему страницы.
Теги заголовков следует использовать для обозначения именно заголовков по смыслу, а не просто для визуального выделения текста – для стилизации используйте CSS.

Поздравляю!

Теперь вы знаете, как использовать теги заголовков <h1> - <h6> в HTML для структурирования контента на веб-странице! Вы понимаете, как они создают визуальную и логическую иерархию, и знаете о преимуществах использования заголовков для организации контента и SEO-оптимизации.

До встречи на следующем уроке!