Тег H1 в HTML¶
H1 — это заголовок первого уровня в языке разметки HTML, обозначаемый тегом <h1>. Он используется для обозначения главного заголовка документа или его основного раздела и является самым значимым из шести уровней заголовков HTML (h1–h6). С точки зрения иерархии документа H1 соответствует верхнему уровню структуры и обычно отражает тему страницы целиком.
¶Синтаксис и отображение
Тег H1 записывается как <h1>текст заголовка</h1>. По умолчанию браузеры отображают его крупным жирным шрифтом, как правило, с отступами сверху и снизу. Конкретный размер и начертание определяются стилями по умолчанию браузера или задаются автором через CSS.
``html <h1>Название статьи</h1> ``
В HTML5 тег <h1> является фазовым (phrasing content), но в большинстве случаев используется как блочный элемент внутри секций документа. Заголовки H1–H6 образуют иерархическую структуру: после H1 идут H2, затем H3 и так далее. Пропуск уровней (например, переход от H1 сразу к H3) допустим синтаксически, но считается нежелательной практикой, так как нарушает логику документа.
¶Роль в структуре документа
H1 задаёт тему страницы и служит ориентиром для навигации по содержимому. Семантически тег сообщает программам и поисковым системам, что заключённый в нём текст является главным заголовком. Согласно рекомендациям W3C, на каждой странице желательно использовать один H1, отражающий основную тему, хотя формально несколько H1 в одном документе разрешены.
Внутри H1 допускается использовать вложенные теги — например, <span>, <em>, <a> или <img>, — но не другие заголовки (h2–h6) и не блочные элементы вроде <div> или <p>.
¶Значение для SEO
Поисковые системы традиционно придают заголовку H1 большое значение при определении тематики страницы. Наличие релевантного H1 с ключевыми словами помогает поисковому роботу корректно понять содержание документа. В то же время современные алгоритмы учитывают и весь контекст страницы, поэтому чрезмерное увлечение «промывкой» ключевых слов в H1 не даёт эффекта и может быть расценено как манипуляция.
Рекомендации поисковых систем, в частности Яндекса и Google, сводятся к тому, чтобы H1 был уникальным для страницы, содержательным и соответствовал реальному содержанию документа.
¶H1 и доступность
Для пользователей со специальными возможностями заголовки являются основным средством навигации. Программы-скринридеры (NVDA, JAWS, VoiceOver) позволяют перемещаться по заголовкам документа, и H1 служит отправной точкой такой навигации. Корректная иерархия заголовков делает страницу понятной для незрячих пользователей и упрощает восприятие структуры материала.
¶H1 в других технологиях
Понятие «h1» встречается и вне HTML. В системе документации Markdown заголовок первого уровня обозначается символом # в начале строки (# Заголовок) и при компиляции превращается в тег <h1>. В CSS к элементу H1 можно обращаться селектором h1, задавая ему собственные стили:
``css h1 { font-size: 2em; color: #222; } ``
¶История
Теги заголовков существуют в HTML с самого появления языка в 1991 году, когда Тим Бернерс-Ли опубликовал первый веб-документ. Изначально H1–H6 были единственным способом структурирования текста на веб-странице. С развитием CSS и HTML5 их роль сместилась от чисто оформительской к семантической: заголовки стали восприниматься как маркеры структуры документа, а не просто как крупный текст.
¶Источники
- W3C. HTML Living Standard — раздел «Sections».
- Яндекс. Справочник для вебмастеров — рекомендации по заголовкам.
- Google Search Central. Документация по основам SEO.
- Марк Дакетт. «HTML5 и CSS3. Разработка для современной веб-платформы».