Один h1 на страницу: название основной темы
Задавайте для каждой страницы один ясный заголовок верхнего уровня
«Один h1 на страницу: название основной темы» — бесплатный урок Web Accessibility Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Web Accessibility Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Web Accessibility Academy содержит 4 уроков всего.
Заголовок страницы, который Вы слышите
h1 — это главный заголовок страницы. Пользователи программ чтения с экрана часто сразу переходят к нему, чтобы понять, о чём на самом деле эта страница. 🔎
Одна главная тема
Страница посвящена одной главной теме, поэтому на ней должен быть один h1. Представьте его как название на обложке книги, а не как заголовок главы.
<h1>Your Order Summary</h1>h1 — это не про размер
Выбирайте h1 по смыслу, а не ради крупного вида. Если нужен меньший текст, задайте его размер с помощью CSS, сохранив правильный уровень заголовка.
Он называет, а не украшает
Хороший h1 описывает расположенное ниже содержимое. По одному h1 пользователь должен примерно понять, что найдёт на этой странице.
Согласуйте его с названием вкладки
Ваш h1 должен перекликаться с названием вкладки браузера. Когда оба названия совпадают, пользователи уверены, что открыли нужную страницу.
<title>Your Order Summary - Shop</title>
<h1>Your Order Summary</h1>Не логотип
Название сайта в углу обычно не является темой страницы. h1 относится к содержимому этой страницы, а не к логотипу Вашего бренда. 🏷️
Почему один, а не несколько
Несколько тегов h1 размывают структуру, и пользователи не могут отличить настоящую тему от раздела. Один понятный заголовок верхнего уровня сохраняет фокус страницы.
Где он располагается
Размещайте h1 в верхней части основного содержимого, перед разделами, которые он представляет. Он задаёт основу для всего последующего.
<main>
<h1>Annual Report 2025</h1>
<h2>Highlights</h2>
</main>Никогда не переходите сразу к h2
Начало страницы с h2 оставляет структуру без корня. Сначала добавьте странице единственный h1, а затем вложите под ним разделы.
Сохраняйте точность
Пишите h1 простыми словами, понятными незнакомому пользователю. Не используйте остроумные каламбуры, скрывающие настоящее назначение страницы.
Пустой h1 — это ловушка
h1, содержащий только изображение или значок, может восприниматься как пустой. Добавьте в него настоящий текст, даже если визуально скроете этот текст.
Быстрая проверка
Сколько элементов h1 должно быть на обычной странице?
Итоги
Вы узнали, что h1 называет одну главную тему страницы, располагается в верхней части содержимого и выбирается по смыслу, а не по размеру. Одна страница — один h1. ✅
Изучай HTML с ИИ-репетитором — бесплатно
Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.
- Курсы
- 30
- Уроки
- 120
Часто задаваемые вопросы
Урок «Один h1 на страницу: название основной темы» бесплатный?
Да — полный текст урока «Один h1 на страницу: название основной темы» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Web Accessibility Academy, подпишись на CoddyKit PRO. Курс Web Accessibility Academy содержит 4 уроков всего.
Чему я научусь в уроке «Один h1 на страницу: название основной темы»?
Задавайте для каждой страницы один ясный заголовок верхнего уровня Ты практикуешь Web Accessibility Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Web Accessibility Academy?
Предыдущий опыт не требуется. Web Accessibility Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.
Сколько времени занимает урок «Один h1 на страницу: название основной темы»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Web Accessibility Academy?
Да. Каждый урок Web Accessibility Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Один h1 на страницу: название основной темы
- Уровни вложенности без пропусков
- Заголовки — это навигация, а не просто крупный текст
- Проверка структуры страницы на слух