Тег HTML `<hgroup>`

Тег <hgroup> используется для группировки HTML-заголовков. Мы используем <hgroup> для обёртки одного или нескольких элементов заголовков из <h1> - <h6>.

Тег <hgroup> позволяет группировать основной заголовок с дополнительными заголовками, образуя многоуровневый заголовок. Он предотвращает создание отдельных разделов для любых дочерних элементов <h1> - <h6> второго уровня.

В абстрактном контуре <hgroup> образует один логический заголовок, с общим набором дочерних элементов <h1> - <h6>, которые входят в контур как единый многоуровневый блок. Элемент <hgroup> может отображаться в визуализированном контуре по-разному:

Он может отображаться с двоеточием и пробелом или другой пунктуацией после основного заголовка и перед первым дополнительным заголовком.
Он может отображаться с основным заголовком, за которым следуют дополнительные заголовки в скобках.

DANGER

<hgroup> не поддерживается в HTML5, но поддерживается в спецификации WHATWG Living Standard. Будущее этого элемента пока неясно, поэтому лучше избегать использования этого тега.

Синтаксис

Тег <hgroup> используется парно. Однако закрывающий тег не обязателен.

Пример тега HTML `<hgroup>`:

Пример тега HTML <hgroup>

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <hgroup>
      <h1>Welcome to W3Docs</h1>
      <h2>Here you can learn HTML Bases.</h2>
    </hgroup>
  </body>
</html>

Try it Yourself »

Результат

hgroup tag example

Пример использования тега HTML `<hgroup>` со свойствами CSS:

Пример тега HTML <hgroup> со свойствами CSS:

html

<!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;
      }
      h2 {
        font-size: 20px;
      }
      p {
        font-family: Arial, sans-serif;
        font-size: 16px;
        line-height: 1.5;
      }
    </style>
  </head>
  <body>
    <hgroup>
      <h1>Welcome to W3Docs</h1>
      <h2>Learn online</h2>
    </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>

Try it Yourself »

Атрибуты

Тег <hgroup> поддерживает глобальные атрибуты.

Как стилизовать тег HTML <hgroup>

json

{
    "tag_name": "hgroup"
}

Practice

Какова основная цель тега HTML <hgroup>?

Создать гиперссылкуГруппировать набор элементов <h1>–<h6>, когда заголовок имеет несколько уровней.Встраивать мультимедийный контентОпределить заголовок для документа или разделаУменьшить значимость заголовка более низкого уровня

Тег HTML <hgroup> ​

Синтаксис ​

Пример тега HTML <hgroup>: ​

Результат ​

Пример использования тега HTML <hgroup> со свойствами CSS: ​

Атрибуты ​