HTML-элементы от до представляют шесть уровней заголовков разделов. — это заголовок самого верхнего уровня, а — самого нижнего. По умолчанию все элементы заголовков создают в разметке блочный контейнер, начинающийся на новой строке и занимающий всю доступную ширину в содержащем его блоке.
Эти элементы допускают только глобальные атрибуты.
Примечания по использованию
- Информация о заголовках может использоваться пользовательскими агентами для автоматического создания оглавления документа.
- Не используйте элементы заголовков для управления размером шрифта. Для этих целей следует применять CSS-свойство font-size .
- Не пропускайте уровни заголовков: всегда начинайте с , потом используйте и так далее.
Избегайте использования нескольких элементов на одной странице
Использование нескольких элементов на одной странице разрешено стандартом HTML (если они не вложены друг в друга), но это считается плохой практикой. Хорошо, когда на странице есть единственный элемент , который описывает содержимое этой страницы (по аналогии с элементом ).
Примечание: Использование нескольких элементов во вложенных элементах разделов было разрешено в старых версиях стандарта HTML. Однако это никогда не считалось хорошей практикой, а теперь не соответствует требованиям. Больше информации об этом в статье There Is No Document Outline Algorithm.
Старайтесь использовать один элемент на странице и вложенные заголовки без пропуска уровней.
Примеры
Все заголовки
Следующий код показывает все уровни заголовков в действии.
h1>Заголовок уровня 1h1> h2>Заголовок уровня 2h2> h3>Заголовок уровня 3h3> h4>Заголовок уровня 4h4> h5>Заголовок уровня 5h5> h6>Заголовок уровня 6h6>
Пример страницы
Следующий код показывает несколько заголовков с содержимым под ними.
h1>Элементы заголовковh1> h2>Краткое содержаниеh2> p>Обычный текст. p> h2>Примерыh2> h3>Пример 1h3> p>Обычный текст. p> h3>Пример 2h3> p>Обычный текст. p> h2>Смотрите такжеh2> p>Обычный текст. p>
Проблемы доступности
Навигация
Обычный метод навигации для пользователей программ чтения с экрана — это переход от заголовка к заголовку для быстрого ознакомления с содержимым страницы. Из-за этого важно не пропускать уровни заголовка. Это может создать путаницу, так как человеку, который использует такой способ навигации, может быть непонятно, где находится отсутствующий заголовок.
Неправильно:
h1>Заголовок уровня 1h1> h3>Заголовок уровня 3h3> h4>Заголовок уровня 4h4>
Правильно:
h1>Заголовок уровня 1h1> h2>Заголовок уровня 2h2> h3>Заголовок уровня 3h3>
Вложенность
Заголовки могут быть вложены в подразделы, чтобы отразить структуру содержимого страницы. Большинство программ чтения с экрана могут создавать упорядоченный список всех заголовков на странице, что может помочь человеку быстро определить иерархию содержимого:
- h1 Жуки
- h2 Этимология
- h2 Распределение и разнообразие
- h2 Эволюция
- h3 Поздний палеозой
- h3 Юрский период
- h3 Меловой период
- h3 Кайнозойский период
- h3 Голова
- h4 Рот
- h4 Переднегрудь
- h4 Птероторакс
Когда заголовки вложены, уровни заголовков могут быть «пропущены» при закрытии подраздела.
- MDN Understanding WCAG, Guideline 1.3 explanations (en-US)
- MDN Understanding WCAG, Guideline 2.4 explanations (en-US)
- Headings • Page Structure • WAI Web Accessibility Tutorials
- Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0
- Understanding Success Criterion 2.4.1 | W3C Understanding WCAG 2.0
- Understanding Success Criterion 2.4.6 | W3C Understanding WCAG 2.0
- Understanding Success Criterion 2.4.10 | W3C Understanding WCAG 2.0
Маркировка разделов содержимого
Другим распространённым методом навигации для пользователей программ чтения с экрана является создание списка секционированного содержимого и его использование для определения разметки страницы.
Разделы содержимого могут быть размечены с помощью комбинации атрибутов aria-labelledby (en-US) и id , с кратко описывающим назначение раздела значением. Этот метод полезен в ситуациях, когда на одной странице имеется более одного элемента секционирования.
Примеры секционированного содержимого
header> nav aria-labelledby="primary-navigation"> h2 id="primary-navigation">Основная навигацияh2> nav> header> footer> nav aria-labelledby="footer-navigation"> h2 id="footer-navigation">Вторичная навигацияh2> nav> footer>
- Using the aria-labelledby attribute (en-US)
- Labeling Regions • Page Structure • W3C WAI Web Accessibility Tutorials
Спецификации
Specification HTML Standard
# the-h1,-h2,-h3,-h4,-h5,-and-h6-elementsСовместимость с браузерами
BCD tables only load in the browser
Обычно на странице сайта используется один заголовок , который может содержать несколько подразделов , разделенных на подзаголовки и т.д.
Рекомендации по использованию тегов заголовков описаны в статье: Как правильно писать HTML заголовки для сайта.
Браузеры обычно выделяют заголовки размером шрифта и добавляют пустое место до и после них. Заголовок HTML имеет наибольший размер шрифта, заголовок — наименьший.
Все виды выделения текста описаны в статье: Теги форматирования текста в HTML.
Синтаксис
заголовок
Отображение в браузере
Примеры использования заголовков HTML в коде
Теги заголовков
Заголовок 1-го уровня
Заголовок 2-го уровня
Заголовок 3-го уровня
Заголовок 4-го уровня
Заголовок 5-го уровня
Заголовок 6-го уровня
Поддержка браузерами
Теги 
— Да Да Да Да Да Атрибуты
В HTML5 у тегов заголовков , , , , , нет атрибутов.
Устаревшие атрибуты заголовков HTML
Устанавливает способ выравнивания контента по горизонтали. В HTML5 используйте CSS.
Наличие заголовков и подзаголовков в тексте делает информацию удобной для читателей. Благодаря им пользователь видит структуру документа и может легко в нем ориентироваться. В процессе верстки веб-страницы для создания заголовков используют теги
— . Такие теги являются элементами разметки HTML и служат для определения важности заголовков: чем больше номер, тем ниже важность заголовка. Следовательно, h1 — главный заголовок на странице, который размещают над текстом. А подзаголовки h2-h6 проставляются по принципу вложенности.
С технической точки зрения, теги заголовков — это один из важнейших маркетинговых инструментов, благодаря которому поисковые роботы определяют степень значимости страницы и выводят ее в топ. Давайте рассмотрим каждый вид заголовка и определим, где уместнее использовать каждый.
Главный заголовок
h1 — это обязательный заголовок для всех страниц. Это может быть название страницы, статьи или товара, которое несет конкретную информацию, о чем будет читать пользователь. Важно отметить, что многие путают этот заголовок с (заголовком страницы). Title отображается вверху экрана в браузерной строке, когда открыта страница ресурса. Тег прописывается в шапке страницы между , а теги — указываются в «теле» страницы: .
Главный заголовок
Как использовать заголовок h1
- На странице можно использовать только один заголовок первого порядка. Он должен стоять в начале текста, быть видимым пользователю и отражать суть информации.
- Цель заголовка — побудить читателя открыть страницу и прочитать текст.
- Тег не заканчивается точкой.
- Длина заголовка не должна превышать 65 символов.
- В заголовке старайтесь использовать самое частое слово в тексте.
- Тег не должен быть ссылкой или картинкой.
- Перед тем, как вручную прописывать h1, убедитесь, что движок не задает его автоматически;
- Проверьте, закрыли ли вы заголовок. Если нет, то это может сбить с толку поисковики. Такие страницы рискуют быть понижены в рейтинге.
Заголовок второго порядка
Тегом размечаются подразделы страницы или статьи. С помощью тега выстраивается навигация по тексту: он разбивает его на смысловые части, помогает выделить важные моменты и легче усвоить информацию пользователю.
Как использовать заголовок h2
- Используйте на странице 2 и более заголовка h2, которые будут отражать суть текста под ним.
- Тег не должен быть изображением или ссылкой.
Заголовки h3 — h6
Теги — включают в себя уточняющую информацию. Использование всех заголовков встречается крайне редко. Это должна быть огромная статья с выстроенной иерархией.
Как использовать заголовки h3 — h6
- Не допускайте перескакивание через уровень заголовков. Нельзя использовать меньший тег, если в вашем коде нет большего. То есть если вы используйте тег , то обязательно нужно использовать , и .
- Чем выше уровень заголовка, тем крупнее шрифт.
- Не допускайте переспама ключевых слов в подзаголовках. Используйте ключи только в title и h1.
- Во всех тегах можно использовать только текст и знаки препинания.
- Все заголовки h1-h6 служат только для разбиения текста на логические части. Выделять этим тегом предложения и фразы с целью выделить их жирным цветом — запрещено.
Иерархия заголовков
Если не будет выдержана иерархия и четкая структура, заголовки младшего порядка, например, h6, могут слиться с обычным текстом. Размер шрифта идет по убыванию номера заголовков. От h1 — самого крупного до h6 — самого мелкого.
Иерархия заголовков на странице:
Заголовок первого уровня — h1
Заголовок второго уровня — h2
Заголовок третьего уровня — h3
Заголовок четвертого уровня — h4
Заголовок пятого уровня — h5
Заголовок шестого уровня — h6
Пример иерархии заголовков на сайте:
Заголовок
Первый подзаголовок
Параграф текста
Второй подзаголовок
Параграф текста
Заключение
Заголовки на веб-странице выполняют несколько важных функций: улучшают навигацию по странице, делают текст читабельным и интуитивно понятным. Правильные заголовки помогают повысить положение статьи или веб-сайта в рейтинге поиска. В обратном случае, велика вероятность, что источник потеряет рейтинг и не дойдет до своей целевой аудитории.
HTML тег h1-h6
Теги , , , , , используются для определения HTML заголовков разного уровня. – высший уровень (наивысшая важность), – низший уровень (наименьшая важность). Заголовки обычно используются в порядке, соответствующем их уровню. При этом заголовок должен использоваться только один раз на странице.
Разница между HTML 4.01 и HTML5
В HTML5 атрибут align не поддерживается. Используйте стили CSS.
Атрибуты тега
Атрибут Описание align Определяет горизонтальное выравнивание содержимого элементов h1-h6 Общие атрибуты
Теги , , , , , поддерживают общие атрибуты и атрибуты-события.
CSS стили по умолчанию
Большинство браузеров будут отображать теги , , , , , со следующими стилями
h1 < display: block; font-size: 2em; margin-top: 0.67em; margin-bottom: 0.67em; margin-left: 0; margin-right: 0; font-weight: bold; >h2 < display: block; font-size: 1.5em; margin-top: 0.83em; margin-bottom: 0.83em; margin-left: 0; margin-right: 0; font-weight: bold; >h3 < display: block; font-size: 1.17em; margin-top: 1em; margin-bottom: 1em; margin-left: 0; margin-right: 0; font-weight: bold; >h4 < display: block; margin-top: 1.33em; margin-bottom: 1.33em; margin-left: 0; margin-right: 0; font-weight: bold; >h5 < display: block; font-size: .83em; margin-top: 1.67em; margin-bottom: 1.67em; margin-left: 0; margin-right: 0; font-weight: bold; >h6
HTML пример использования
Шесть разных HTML заголовков:
Заголовок 1
Заголовок 2
Заголовок 3
Заголовок 4
Заголовок 5
Заголовок 6