Tag HTML <hgroup>
Il tag HTML <hgroup> raggruppa un'intestazione con il suo sottotitolo o slogan. Scopri il modello di contenuto, la sintassi e gli esempi con W3docs.
Il tag HTML <hgroup> raggruppa una singola intestazione (uno tra <h1>–<h6>) insieme a uno o più elementi <p> che fungono da sottotitolo, slogan o titolo alternativo. Il suo scopo è mantenere quel testo di supporto legato all'intestazione, evitando che diventi un elemento separato nella struttura del documento.
Ad esempio, il titolo di una pagina e il suo slogan appartengono insieme. Senza <hgroup>, si dovrebbe contrassegnare lo slogan come un'intestazione di livello inferiore (appesantendo la struttura) oppure come un semplice paragrafo (perdendo l'associazione visiva e semantica). <hgroup> risolve questo problema: l'intestazione definisce la voce nella struttura, e il contenuto <p> la accompagna.
<hgroup>
<h1>Welcome to W3Docs</h1>
<p>Learn HTML, CSS, and JavaScript online for free.</p>
</hgroup>Modello di contenuto
Questa è la parte che molti tutorial più vecchi sbagliano. L'attuale <hgroup> non racchiude più elementi <h1>–<h6> affiancati. Il suo modello di contenuto prevede:
- esattamente un elemento di intestazione (
<h1>,<h2>,<h3>,<h4>,<h5>, o<h6>), più - zero o più elementi
<p>prima e/o dopo quell'intestazione.
Gli elementi <p> contengono il sottotitolo, il titolo alternativo o lo slogan. Solo la singola intestazione contribuisce alla struttura della pagina; i paragrafi le sono associati ma non creano intestazioni proprie.
Stato della specifica
L'elemento <hgroup> è stato rimosso dalla specifica HTML per diversi anni, motivo per cui molta documentazione più datata lo etichetta come non supportato e ne sconsiglia l'uso. Quell'indicazione è obsoleta: <hgroup> è stato ripristinato nello standard WHATWG HTML Living Standard nel 2022 con il modello di contenuto semplificato — intestazione più paragrafi — descritto in precedenza. Oggi è un elemento valido.
<hgroup> è un elemento valido nell'attuale WHATWG HTML Living Standard (ripristinato nel 2022). Tutti i browser moderni ne renderizzano correttamente il contenuto. Si noti che non ha semantica di accessibilità integrata speciale — le tecnologie assistive espongono l'intestazione al suo interno come una normale intestazione, e gli elementi <p> come testo ordinario.
Sintassi
Il tag <hgroup> è usato in coppia: sia il tag di apertura <hgroup> che quello di chiusura </hgroup> sono obbligatori.
Esempio del tag 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>Esempio del tag HTML <hgroup> usato con proprietà 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>Attributi
Il tag <hgroup> non ha attributi specifici dell'elemento. Supporta gli Attributi Globali e gli attributi di evento standard.
Supporto dei browser
<hgroup> è supportato in tutti i browser moderni — Chrome, Firefox, Safari ed Edge — ed è parte dell'attuale WHATWG HTML Living Standard. Poiché non ha uno stile predefinito oltre all'essere un contenitore a blocchi, il supporto significa in pratica che il browser renderizza l'intestazione e i suoi paragrafi come previsto.
Tag correlati
- Tag HTML
<header>— contenuto introduttivo per una pagina o sezione, dove spesso risiede un blocco titolo<hgroup>. - Tag HTML
<h1>–<h6>— gli elementi di intestazione da inserire all'interno di<hgroup>. - Intestazioni HTML — panoramica su come le intestazioni definiscono la struttura del documento.