Tag HTML <hr>
Il tag HTML <hr> segna un'interruzione tematica resa come linea orizzontale. Scopri quando usarlo, la stilizzazione CSS e l'accessibilità.
Il tag HTML <hr> rappresenta un'interruzione tematica — un cambio di argomento all'interno di una sezione di contenuto, come il cambio di scena in un racconto o il passaggio a un nuovo argomento in un articolo di riferimento. Per impostazione predefinita il browser lo visualizza come una linea orizzontale, ma il suo scopo principale è semantico, non decorativo.
In HTML5 il tag <hr> ha un significato preciso: comunica ai browser e alle tecnologie assistive che i paragrafi circostanti appartengono ad argomenti diversi. Nelle versioni precedenti di HTML veniva trattato esclusivamente come una riga presentazionale usata per tracciare una linea tra i contenuti. Oggi, se vuoi solo un divisore decorativo senza cambiamento di argomento, dovresti usare un border CSS su un altro elemento al posto di <hr>.
L'aspetto visivo della linea dipende dal browser; spesso viene disegnata con un leggero effetto 3D ("ombreggiato") che puoi sovrascrivere con CSS.
Quando usare <hr> (e quando non usarlo)
Usa <hr> quando c'è un vero cambiamento di argomento:
- Tra due sezioni distinte di un articolo o documento lungo.
- Tra scene o cambi di scena in una narrazione.
- Per separare gruppi di campi di un modulo o voci di un elenco non correlati, quando un nuovo titolo sarebbe troppo pesante.
Non usare <hr> puramente per decorazione. Se la linea serve solo a fare bella figura — ad esempio un divisore sotto ogni avatar in un elenco — aggiunge rumore per gli utenti di screen reader. In tal caso applica un border su un elemento esistente, oppure aggiungi role="presentation" alla riga così da renderla irrilevante semanticamente. Per strutturare le regioni della pagina in base al significato, vedi gli elementi semantici in HTML5.
Accessibilità: <hr> ha il ruolo ARIA implicito separator ed è esposto alle tecnologie assistive — molti screen reader lo annunciano (ad esempio come "separatore"). È esattamente ciò che si desidera per una vera interruzione tematica, ma è anche il motivo per cui una linea puramente decorativa dovrebbe usare CSS o role="presentation" al suo posto.
Sintassi
Il tag <hr> è vuoto, il che significa che il tag di chiusura non è obbligatorio. Ma in XHTML, il tag (<hr>) deve essere chiuso (<hr/>).
Esempio del tag HTML <hr>:
Tag HTML hr
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Learn HTML</h1>
<p>
This HTML tutorial will teach you the basics of the (Hyper Text Markup Language) and how to make your website from scratch.
</p>
<hr />
<h1>Learn CSS</h1>
<p>
In our CSS tutorial you will learn how to use CSS to control the style and layout of multiple Web pages all at once.
</p>
</body>
</html>Attributo size di HTML <hr>
L'attributo size specifica l'altezza della linea.
Sebbene l'attributo size faccia parte degli attributi deprecati, è ancora supportato da tutti i browser.
Esempio del tag HTML <hr> con l'attributo "size":
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>A normal horizontal line:</p>
<hr />
<p>A horizontal line with a height of 40 pixels:</p>
<hr size="40" />
</body>
</html>Un modo alternativo per specificare la dimensione del tag <hr> è utilizzare la proprietà CSS height.
Esempio del tag HTML <hr> usato con la proprietà height:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
hr {
height: 20px;
}
</style>
</head>
<body>
<p>
A horizontal line with a height of 20 pixels.
</p>
<hr />
</body>
</html>Attributo width di HTML <hr>
L'attributo width specifica la larghezza della linea.
Anche l'attributo width fa parte degli attributi deprecati, ma è supportato da tutti i browser.
Esempio del tag HTML <hr> con l'attributo width:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>A normal horizontal line:</p>
<hr />
<p>A horizontal line with a width of 30%:</p>
<hr width="30%" />
</body>
</html>Usa la proprietà CSS width al posto dell'attributo width.
Esempio del tag HTML <hr> usato con la proprietà width:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
hr {
width: 250px;
}
</style>
</head>
<body>
<p>A horizontal line with a width of 250 pixels:</p>
<hr />
</body>
</html>Attributo noshade di HTML <hr>
L'attributo noshade rimuove l'effetto di ombreggiatura 3D dalla linea orizzontale.
L'attributo noshade fa parte degli attributi deprecati, ma è supportato da tutti i browser.
Esempio del tag HTML <hr> con l'attributo noshade:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Shaded horizontal line :</p>
<hr />
<p>Noshaded horizontal line:</p>
<hr noshade />
</body>
</html>Per rimuovere l'aspetto 3D ("ombreggiato") predefinito in CSS, dai all'elemento <hr> un border piatto e uno sfondo trasparente. La riga predefinita viene disegnata con bordi ombreggiati, quindi sostituirla con un singolo bordo solido (e azzerando lo sfondo) produce una linea piatta e uniforme — lo stesso risultato che dava l'attributo noshade.
Esempio del tag HTML <hr> usato con la proprietà border:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
hr {
border: 1px solid #000000;
background: transparent;
}
</style>
</head>
<body>
<p>
A horizontal line specified with CSS border Property.
</p>
<hr />
</body>
</html>Attributo align di HTML
L'attributo align specifica l'allineamento della linea.
L'attributo align fa parte degli attributi deprecati, ma è supportato da tutti i browser.
Esempio del tag HTML <hr> con l'attributo align:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Lorem ipsum is simply dummy text...</p>
<hr align="left" width="70%" />
</body>
</html>Per posizionare un elemento <hr>, imposta una width e controlla il suo margin orizzontale — non text-align. Poiché <hr> è un elemento block, text-align non lo sposta. Usa margin-right: auto per spingerlo a sinistra, margin-left: auto per spingerlo a destra, oppure margin: 0 auto per centrarlo.
Esempio del tag HTML <hr> usato con la proprietà margin:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
hr {
width: 50%;
margin-left: 0;
margin-right: auto;
}
</style>
</head>
<body>
<p>A horizontal line specified with CSS margin property</p>
<hr />
</body>
</html>Gli attributi di presentazione del tag <hr> sono stati deprecati in HTML5. Per la stilizzazione si usa CSS.
Come stilizzare il tag <hr>
La proprietà CSS border viene utilizzata per stilizzare la linea orizzontale.
Esempio del tag HTML <hr> stilizzato con la proprietà border:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
/* blue border */
hr.one {
border-top: 1px solid #1c87c9;
}
/* Dashed border */
hr.two {
border-top: 1px dashed #1c87c9;
}
/* Dotted border */
hr.three {
border-top: 1px dotted #1c87c9;
}
/* Thick border */
hr.four {
border: 1px solid #1c87c9;
}
/* Large rounded border */
hr.five {
border: 15px solid #1c87c9;
border-radius: 5px;
}
</style>
</head>
<body>
<p>Default:</p>
<hr />
<p>Styling "hr" tag</p>
<hr class="one" />
<hr class="two" />
<hr class="three" />
<hr class="four" />
<hr class="five" />
</body>
</html>Attributi
| Attributo | Valore | Descrizione |
|---|---|---|
| align | left center right | Definisce l'allineamento orizzontale della linea. Deprecato in HTML5, ma ancora supportato dai browser per compatibilità con le versioni precedenti. |
| noshade | noshade | Definisce che la linea verrà visualizzata senza effetto 3D. Deprecato in HTML5, ma ancora supportato dai browser per compatibilità con le versioni precedenti. |
| size | pixels | Definisce la dimensione della linea. Deprecato in HTML5, ma ancora supportato dai browser per compatibilità con le versioni precedenti. |
| width | pixels % | Definisce la larghezza della linea. Deprecato in HTML5, ma ancora supportato dai browser per compatibilità con le versioni precedenti. |
Il tag <hr> supporta gli Attributi Globali e gli Attributi Evento.