Codebra
23 января 2026 в 18:28

Урок 16. Заголовки и подзаголовки в HTML

Урок о заголовках и подзаголовках в HTML. Заголовки очень часто используются, поэтому этот урок очень полезен для начинающего. В уроке немного сказано про SEO.
📝

Внимание! На этой странице вы найдете материал урока из архивного курса по HTML. Курс был написан в 2015, обновлен в 2024 году и по-прежнему актуален для начинающих веб-разработчиков.

Теоретический материал сохранен в исходном виде, а практические задания с автоматической проверкой вынесены в отдельные роадмапы.

Полный список уроков доступен по тегу Архивный курс по HTML и на странице первого урока.

📋 Задание
  • Посмотрите на код, там есть не выделенные заголовки, например, Заголовок первого уровня. Ваша задача выделить все эти заголовки. Теги, которыми вы оборачиваете текст, должны совпадать по смыслу с текстом, то есть <h1>Заголовок первого уровня</h1>.
  • Оберните текст Заголовок первого уровня
  • Оберните текст Заголовок второго уровня
  • Оберните текст Заголовок третьего уровня
  • Оберните текст Заголовок четвертого уровня
  • Оберните текст Заголовок пятого уровня
  • Оберните текст Заголовок шестого уровня

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

Заголовки в HTML используются достаточно часто. Они помогают структурировать большой объем информации на веб-странице. Заголовки делятся на несколько уровней: самый большой, по размеру шрифта, заголовок первого уровня (<h1>), а самый мелкий – шестой (<h6>).

Теги заголовков в HTML обозначаются как буква h с цифрой (уровнем заголовка). Заголовок первого уровня (<h1> … </h1>), это не только самый крупный заголовок по размеру шрифта, но и самый главный по значимости.

Если посмотреть на заголовки со стороны SEO (поисковая оптимизация), то заголовок первого уровня влияет на продвижение сайта. Во-первых, заголовок <h1> должен быть один на всю страницу. Во-вторых, в заголовке первого уровня должны быть указаны продвигаемые ключевые слова (поисковые системы уделяют большое внимание заголовкам HTML).

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

Пример со всеми заголовками HTML:

<h1>Заголовок 1 уровня</h1>
<h2>Заголовок 2 уровня</h2>
<h3>Заголовок 3 уровня</h3>
<h4>Заголовок 4 уровня</h4>
<h5>Заголовок 5 уровня</h5>
<h6>Заголовок 6 уровня</h6>

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

Теперь пройдите простое практическое задание по этим тегам и переходите к следующему уроку.

📝

Переходите к следующему уроку курса, а так же не забудьте посмотреть новый материал на Codebra по тегу HTML.