<hgroup> în HTML

<hgroup>
  <h1>Titlu</h1>
  <p>Subtitlu</p>
</hgroup>

Ce face <hgroup>

<hgroup> leagă un titlu (<h1> – <h6>) de textul care îl însoțește: un subtitlu, un slogan, o linie cu numărul ediției.

Regula actuală din standardul WHATWG: <hgroup> conține un singur titlu și unul sau mai multe paragrafe <p>, înainte sau după el. Varianta veche, cu mai multe titluri (de exemplu <h1> urmat de <h2>), nu mai este validă.

Avantajul: subtitlul scris în <p> nu apare în cuprinsul titlurilor, deci structura paginii rămâne curată pentru cititoarele de ecran.

Exemple

Exemplul 1: Titlul unui blog cu slogan

Sloganul este un <p>, deci nu creează un nivel nou de titlu.

<header>
  <hgroup>
    <h1>Bucătăria Anei</h1>
    <p>Rețete moldovenești testate în Iași</p>
  </hgroup>
</header>

Ce afișează browserul

Bucătăria Anei (titlu mare)
Rețete moldovenești testate în Iași (text normal sub titlu)

Exemplul 2: Text înainte și după titlu

Paragrafele pot sta și înaintea titlului, de exemplu pentru o etichetă de categorie.

<hgroup>
  <p>Lecția 4</p>
  <h2>Formulare în HTML</h2>
  <p>Durată estimată: 25 de minute</p>
</hgroup>

Ce afișează browserul

Lecția 4
Formulare în HTML (titlu de nivel 2)
Durată estimată: 25 de minute

Greșeli frecvente

• Punerea a două titluri în <hgroup> (<h1> + <h2>): era regula veche, acum subtitlul se scrie în <p>.
• Așteptarea unui stil special: <hgroup> nu schimbă aspectul; subtitlul se stilizează cu CSS (de exemplu hgroup p { color: #666; }).
• Folosirea lui pentru orice titlu urmat de text; doar subtitlurile și sloganurile legate direct de titlu își au locul aici, nu primul paragraf al articolului.

Comenzi înrudite

• <h1> – <h6>: Definește titlurile ierarhice ale paginii, de la cel mai important (h1) până la cel mai mic (h6).
• <header>: Antetul introductiv al paginii sau al unei secțiuni: conține de regulă sigla, titlul și navigarea.
• <p>: Definește un paragraf de text; element de tip bloc, separat automat de restul conținutului prin spațiu vertical.