HTML тег <hgroup>
Тег HTML <hgroup> группирует заголовок с подзаголовком или слоганом. Узнайте модель содержимого, синтаксис и примеры на W3docs.
Тег HTML <hgroup> группирует единственный заголовок (один из <h1>–<h6>) вместе с одним или несколькими элементами <p>, которые выступают в роли подзаголовка, слогана или альтернативного названия. Его назначение — связать вспомогательный текст с заголовком, не превращая его в самостоятельный элемент структуры документа.
Например, заголовок страницы и её слоган логически связаны между собой. Без <hgroup> слоган пришлось бы либо размечать как заголовок более низкого уровня (что засоряет структуру документа), либо как обычный абзац (теряя визуальную и семантическую связь). <hgroup> решает эту проблему: заголовок задаёт запись в структуре документа, а содержимое <p> прикрепляется к нему.
<hgroup>
<h1>Welcome to W3Docs</h1>
<p>Learn HTML, CSS, and JavaScript online for free.</p>
</hgroup>Модель содержимого
Именно здесь большинство устаревших руководств допускают ошибку. Современный <hgroup> не оборачивает несколько элементов-братьев <h1>–<h6>. Его модель содержимого:
- ровно один элемент заголовка (
<h1>,<h2>,<h3>,<h4>,<h5>или<h6>), плюс - ноль или более элементов
<p>до и/или после этого заголовка.
Элементы <p> несут подзаголовок, альтернативное название или слоган. Только единственный заголовок участвует в структуре страницы; абзацы ассоциируются с ним, но не создают собственных заголовков.
Статус в спецификации
Элемент <hgroup> был удалён из спецификации HTML на несколько лет, именно поэтому многие старые материалы отмечали его как неподдерживаемый и не рекомендовали к использованию. Этот совет устарел: <hgroup> был возвращён в живой стандарт WHATWG HTML в 2022 году с упрощённой моделью содержимого «заголовок плюс абзацы», описанной выше. Сегодня это валидный элемент.
<hgroup> является валидным элементом в действующем живом стандарте WHATWG HTML (восстановлен в 2022 году). Все современные браузеры корректно отображают его содержимое. Обратите внимание, что у него нет специальной встроенной семантики доступности — вспомогательные технологии представляют вложенный заголовок как обычный заголовок, а элементы <p> — как обычный текст.
Синтаксис
Тег <hgroup> используется парно: и открывающий тег <hgroup>, и закрывающий тег </hgroup> обязательны.
Пример тега HTML <hgroup>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<hgroup>
<h1>Welcome to W3Docs</h1>
<p>Here you can learn the HTML basics.</p>
</hgroup>
</body>
</html>Пример тега HTML <hgroup> с CSS-свойствами
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
hgroup {
text-align: right;
font-family: Arial, sans-serif;
padding-right: 30px;
border-right: 15px solid #42c73a;
}
h1 {
font-size: 30px;
}
hgroup p {
margin: 0;
font-size: 18px;
color: #555;
}
p {
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
}
</style>
</head>
<body>
<hgroup>
<h1>Welcome to W3Docs</h1>
<p>Learn online</p>
</hgroup>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
</body>
</html>Атрибуты
Тег <hgroup> не имеет собственных атрибутов. Он поддерживает глобальные атрибуты и стандартные атрибуты событий.
Поддержка браузерами
<hgroup> поддерживается во всех современных браузерах — Chrome, Firefox, Safari и Edge — и является частью действующего живого стандарта WHATWG HTML. Поскольку у него нет стилей по умолчанию, кроме отображения в виде блочного контейнера, поддержка фактически означает, что браузер отображает заголовок и его абзацы ожидаемым образом.
Связанные теги
- HTML тег
<header>— вводное содержимое страницы или раздела, где блок заголовка<hgroup>часто и размещается. - HTML теги
<h1>–<h6>— элементы заголовков, которые размещаются внутри<hgroup>. - HTML-заголовки — обзор того, как заголовки формируют структуру документа.