HTML таг hgroup

Пример

Кратък пример как се използва тагът <hgroup>.

<article class="p-3 border rounded-3">
  <hgroup class="mb-3">
    <h1 class="h3 mb-1">Ръководство за HTML заглавия</h1>
    <h2 class="h6 text-muted mb-0">Как да структурираме основно и подзаглавие</h2>
  </hgroup>

  <p>
    В този материал ще разгледаме как да комбинираме основно заглавие и подзаглавие,
    така че да изглеждат като едно цяло.
  </p>
</article>

Дефиниция и употреба

Елементът <hgroup> се използва за групиране на едно основно заглавие и едно или повече подзаглавия (обикновено <h1>–<h6>), които логически принадлежат заедно и трябва да се възприемат като един общ „блок заглавие“.

Типичен пример е страница или секция, където имаме основно заглавие и кратко обяснително подзаглавие непосредствено под него. Вместо да ги третираме като две отделни заглавия, можем да ги обгърнем в <hgroup>, за да покажем, че са част от една и съща заглавна структура.

Вътре в <hgroup> обикновено се поставят:

• Едно основно заглавие – напр. <h1> или <h2>
• Едно или повече подзаглавия – напр. <h2>, <h3> и т.н.

Примерна структура:

<hgroup>
  <h1>Основно заглавие</h1>
  <h2>Кратко подзаглавие</h2>
</hgroup>

Важно: В HTML Living Standard елементът <hgroup> е възстановен, но в миналото е бил считан за остарял и все още не е широко използван. Някои инструменти за достъпност и търсачки може да не го третират специално. Затова често се предпочита просто да се използват последователни <h1>, <h2> и CSS за визуално групиране. Ако все пак го използваш, увери се, че структурата на заглавията остава логична и без него.

Browser Support

Browser	Поддръжка
Chrome	✔️ (като обикновен блоков елемент)
Firefox	✔️ (като обикновен блоков елемент)
Edge	✔️ (като обикновен блоков елемент)
Safari	✔️ (като обикновен блоков елемент)
Opera	✔️ (като обикновен блоков елемент)

Атрибути