Заголовки разных уровней (h1-h6)

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

Опубликовано 04.04.2025
Просмотры 161
Автор
Рек. время прохождения 2 минуты
Упражнений 10
Комментарии 0
Тренажер HTML
На этой странице собраны интерактивные упражнения, посвящённые одному, но очень важному элементу HTML-семантики — заголовкам h1-h6. Вы начнёте с добавления простого h1, постепенно научитесь закрывать теги, соблюдать иерархию, работать с несколькими секциями и даже делать скрытые для глаза, но полезные для доступности заголовки. Каждое задание содержит готовые CSS-правила и «скелет» HTML-разметки с пропусками. В местах пропусков стоят макросы вида {input1}, {input2} и т.д. — именно туда вы вписываете недостающий кусочек кода. После ввода кода нажмите «Выполнить» и сразу увидите результат в небольшом iframe (ширина 372 px). Если что-то пошло не так, тренажёр подскажет, где ошибка, а при необходимости можно развернуть подсказку Help. Задания расположены по возрастанию сложности: от простого добавления одного тега до полной структуры документа с шестью уровнями заголовков. Успехов в практике и пусть ваша разметка всегда будет семантической!
Список тем

Первый заголовок страницы

id: 37780_headings-basic-1

Перед вами пустой блок landing-страницы. Стили уже покрашены, но самого заголовка нет. Добавьте тег первого уровня, чтобы на странице появилось крупное приветствие. Обратите внимание, что закрывающий тег уже прописан, поэтому нужно вставить только открывающую часть.

CSS
.page {
  font-family: Arial, sans-serif;
  padding: 20px;
  text-align: center;
}
.page h1 {
  color: #3366ff;
}
HTML
<div class="page">
  <input1>Мой первый заголовок</h1>
</div>
Нужно использовать семантический тег h1 без дополнительных атрибутов. Впишите имя тега без угловых скобок. Пример синтаксиса: <h1>Текст</h1>.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Закрываем тег заголовка

id: 37780_headings-basic-2

В заголовке уже есть открывающий тег, но забыли закрыть элемент. Вставьте корректный закрывающий тег, чтобы браузер корректно отобразил разметку.

CSS
.page {
  font-family: Georgia, serif;
  background:#fafafa;
  padding:15px;
}
.page h1 {
  margin:0;
}
HTML
<div class="page">
  <h1>Добро пожаловать на мой сайтinput1
</div>
Закрывающая запись начинается с символа / сразу после угловой скобки. Пример: </h1>.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Подзаголовок второго уровня

id: 37780_headings-basic-3

Раздел путешествий уже имеет главный h1. Добавьте подзаголовок, который поясняет тему раздела, используя корректный уровень заголовка.

CSS
section {
  padding:10px;
}
section h1 {font-size:22px;}
section h2 {font-size:18px;color:#009688;}
HTML
<section>
  <h1>Путешествия по России</h1>
  <input1>Лучшие направления</input2>
</section>
После h1 логично использовать h2. Не забывайте про парные теги: открывающий и закрывающий должны совпадать по уровню.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Заголовок третьего уровня в карточке рецепта

id: 37780_headings-basic-4

Секция «Рецепты» и рубрика «Супы» уже описаны. Добавьте заголовок третьего уровня, чтобы выделить конкретное блюдо. Стили для h3 уже готовы.

CSS
.card h1 {font-size:24px;}
.card h2 {font-size:20px;}
.card h3 {font-size:16px;color:#ff5722;}
HTML
<section class="card">
  <h1>Рецепты</h1>
  <h2>Супы</h2>
  <input1>Том Ям</input2>
</section>
Используйте тег h3. Убедитесь, что открывающий и закрывающий теги имеют одинаковый уровень.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Правильная иерархия внутри статьи

id: 37780_headings-basic-5

В небольшой статье о фронтенде отсутствует подзаголовок второго уровня, из-за чего h3 «теряется». Добавьте недостающий уровень, чтобы восстановить логичную структуру документа.

CSS
article h1 {font-size:26px; margin-bottom:4px;}
article h2 {font-size:20px; margin:0 0 4px; color:#3f51b5;}
article h3 {font-size:16px;}
HTML
<article>
  <h1>Frontend-разработка</h1>
  <input1>HTML</input2>
  <h3>Семантическая разметка</h3>
</article>
Между h1 и h3 должен быть h2. Впишите «h2» в оба места макроса.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Независимые секции с собственным h1

id: 37780_headings-basic-6

На странице две логические секции. Первая уже содержит заголовок h1. Вторая должна иметь такой же уровень, так как это отдельный самостоятельный раздел. Добавьте его.

CSS
section {padding:8px 0;}
section h1 {font-size:22px; color:#795548;}
HTML
<section>
  <h1>Фотогалерея</h1>
</section>
<section>
  <input1>Контакты</input2>
</section>
Разрешается использовать несколько h1, если секции независимы. Впишите «h1» без угловых скобок в оба макроса.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Заголовок четвёртого уровня в списке FAQ

id: 37780_headings-basic-7

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

CSS
.faq h4 {font-size:15px; margin:6px 0; color:#e91e63;}
HTML
<section class="faq">
  <ul>
    <li>
      <input1>Как оплатить заказ?</input2>
      <p>Вы можете воспользоваться банковской картой...</p>
    </li>
  </ul>
</section>
Используйте тег h4. Внутрь макросов вводится только имя тега без скобок.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Визуально скрытый заголовок для читателей скринридеров

id: 37780_headings-basic-8

Навигационный блок не должен занимать место на экране, но должен быть объявлен заголовком для устройств доступности. Добавьте h2 с классом visually-hidden.

CSS
.visually-hidden {
  position:absolute;
  left:-10000px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}
HTML
<nav>
  <input1 class="visually-hidden">Навигация</input2>
  <ul>
    <li><a href="#">Главная</a></li>
    <li><a href="#">Каталог</a></li>
  </ul>
</nav>
Паттерн: <h2 class="visually-hidden">Текст</h2>. Вписывайте только имя тега «h2» в макросы.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Глубина структуры: до h5

id: 37780_headings-basic-9

В учебном плане курса уже расписаны темы до h4. Добавьте заголовок пятого уровня для конкретного урока.

CSS
.course h5 {font-size:13px; color:#0097a7; margin:2px 0;}
HTML
<div class="course">
  <h1>Курс «HTML и CSS»</h1>
  <h2>Модуль 1</h2>
  <h3>Урок 3</h3>
  <h4>Тема: Семантика</h4>
  <input1>Подтема: Заголовки</input2>
</div>
Используйте тег h5. Впишите «h5» без угловых скобок в оба поля.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Полная лестница h1-h6

id: 37780_headings-basic-10

Заключительное задание: соберите полную цепочку заголовков от h1 до h6. В разметке пропущен только последний, шестой уровень. Добавьте его и завершите структуру.

CSS
.levels h1 {font-size:24px;}
.levels h2 {font-size:20px;}
.levels h3 {font-size:18px;}
.levels h4 {font-size:16px;}
.levels h5 {font-size:14px;}
.levels h6 {font-size:12px; color:#607d8b;}
HTML
<div class="levels">
  <h1>Заголовок 1</h1>
  <h2>Заголовок 2</h2>
  <h3>Заголовок 3</h3>
  <h4>Заголовок 4</h4>
  <h5>Заголовок 5</h5>
  <input1>Заголовок 6</input2>
</div>
Используйте тег h6. Заполните оба макроса значением «h6».
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку
Предыдущая темаСледующая тема
НайтиКурс.Ру