Il tag <hr> (Horizontal Rule) è un elemento HTML che svolge il ruolo di “separatore”: questo tag, infatti, genera una linea orizzontale che viene utilizzata per separare visivamente dei contenuti (ad esempio, due paragrafi di testo) all’interno della stessa pagina web. Non sono, invece, disponibili tag HTML appositamente dedicati alla creazione di linee verticali.
Quando utilizzare il tag <hr>
Fino alla versione 4 di HTML <hr> non era un tag semantico, cioè non descriveva espressamente il proprio significato.
La situazione è cambiata con HTML5, release grazie alla quale il tag è diventato semantico rappresentando “un’interruzione tematica a livello di paragrafo”.
Il tag <hr> può essere impiegato, quindi, per interrompere, all’interno della stessa pagina, un flusso di contenuti non omogenei.
Sintasi del tag <hr>
Il tag <hr> appartiene alla famiglia dei "tag vuoti" cioè quei tag (come il tag <img> ed altri) che non prevedono un omonimo tag di chiusura. Essendo privo di chiusura (non esiste il delimitatore </hr>), tale elemento può essere riportato nel codice di markup anche tramite la sintassi <hr/> nello stesso modo di altri tag vuoti come <br>, <img> o <link>.
Di seguito un semplice esempio di linea orizzontale utilizzata per dividere due paragrafi di testo:
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Accumsan sit amet nulla facilisi morbi tempus. Interdum consectetur libero id faucibus nisl tincidunt eget.</p>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Accumsan sit amet nulla facilisi morbi tempus. Interdum consectetur libero id faucibus nisl tincidunt eget.</p>Gestire l’aspetto del tag <hr> utilizzando gli attributi HTML
Le specifiche di HTML prevedono unicamente due attributi per questo tag:
color, per definirne il colore;size, per specificarne lo spessore.
Gli altri attributi sono considerati obsoleti dalle specifiche di HTML 5 e, pertanto, il loro utilizzo viene scoraggiato.
Il codice proposto di seguito genera ad esempio una linea di colore grigio dello spessore di 2 pixel:
<hr color="#CCC" size="2" />Utilizzare CSS per stilizzare le linee orizzontali
Affidare la stilizzazione di un elemento a dei semplici attributi HTML non è una buona pratica, inoltre, come è possibile notare, il linguaggio offre poche opzioni da questo punto di vista. Per superare tale limite è possibile ricorrere a CSS utilizzando fogli di stile interni od esterni così come proprietà di stile scritte direttamente all’interno del tag stesso (stilizzazione inline).
Di seguito proporremo delle semplici idee per personalizzare <hr> in base alle nostre esigenze.
In linea di massima possiamo dire che la stilizzazione delle linee orizzionatli può avvenire mediante l’utilizzo delle proprietà border-* oppure, in alternativa, utilizzando height e background-color.
Se si utilizza border-* la prima cosa da fare è impostare border: 0 per effettuare il reset dello stile di default e poi impostare la propietà desiderata (solitamente si utilizza border-top) per impostare spessore, stile e colore della linea.
Se si utilizzano height e background-color, invece, lo spessore sarà definito mediante la prima ed il colore mediante la seconda.
Linee singole
Iniziamo con la stilizzazione di una semplice linea orizzontale di colore grigio dello spessore di 2 pixel, riproducendo, quindi, l’aspetto ottenuto con l’ausilio degli attributi HTML:
hr {
border: 0;
border-top: 2px solid #CCC;
}Per raggiungere l’obiettivo prefissato abbiamo utilizzato l’attributo border-top che ha lo scopo di definire l’aspetto del bordo superiore. Tale proprietà supporta diverse opzioni con cui specificare la tipologia di bordo da restituire a video: nell’esempio precedente è stato utilizzato solid, la cui finalità è quella di produrre una linea continua.
Lo stesso risultato estetico si sarebbe potuto raggiungere con le proprietà height e background-color. in questo modo:
hr {
border: 0;
height: 2px;
background-color: #CCC;
}Linee doppie
La linea orizzontale può essere doppia. Per questo scopo è sufficiente sostituire, nella proprietà border-top, il valore solid con double:
hr {
border: 0;
border-top: 10px double #CCC;
}Aumentiamo lo spessore per rendere più visibile l’effetto.
Linee punteggiate e tratteggiate
Gli output di <hr> non devono essere necessariamente delle linee continue, un effetto interessante è dato per esempio dal valore dotted della proprietà border che permette di generare un separatore composto da una sequenza di punti disposti orizzontalmente.
Nel caso dell’esempio proposto di seguito viene generata una linea punteggiata di colore rosso dallo spessore di 2 pixel.
hr {
border: 0;
border-top: 2px dotted red;
}Nello stesso modo è possibile restituire a video una linea tratteggiata sfruttando il valore dashed che nel codice seguente sostituisce dotted, mentre rimangono invariati il colore e le dimensioni.
hr {
border: 0;
border-top: 2px dashed red;
}Una variante interessante potrebbe essere una linea colorata con trattini al suo interno. In pratica si otterrebbe un effetto di trattini di colore alternato disposti in sequenza. Ad esempio:
hr {
border: 0;
border-bottom: 10px dashed red;
background-color: #999;
}Linee doppie di colori diversi
Per introdurre un’ulteriore variante è possibile utilizzare il valore dotted come argomento sia per la proprietà border-top che per border-bottom, in modo da ottenere una fila di punti composta da due linee di colore differente, ad esempio la prima verde e la seconda rossa:
hr {
border: 0;
border-top: 4px dotted green;
border-bottom: 4px dotted red;
}Sostituendo dotted con dashed in entrambe le istruzioni precedenti avremo invece due linee tratteggiate degli stessi colori e del medesimo spessore:
hr {
border: 0;
border-top: 4px dashed green;
border-bottom: 4px dashed red;
}Chiaramente è possibile ottenere un effetto simile, ma basato questa volta sulla generazione di linee continue, utilizzando il valore solid:
hr {
border: 0;
border-top: 4px solid green;
border-bottom: 4px solid red;
}Linea con estremità sfumate
Una interessante stilizzazione per le linee orizzontali prevede la possibilità di sfumare le parti più esterne:
hr {
border: 0;
height: 1px;
background: #333;
background-image: linear-gradient(to right, #ccc, #333, #ccc);
}In questo caso abbiamo azzerato il valore di border, impostato height a 2 pixel, definito un gradiente mediante background-image per tracciare una linea più scura nella sua parte centrale con esteremità più chiare.
Linea… con tre asterischi al centro
Una soluzione minimale (molto utilizzata in tipografia) per separare contenuti non omogenei potrebbe consistere nell’utilizzare 3 semplici asterischi…
hr.asterischi {
border: none;
}
hr.asterischi:before {
content: '***';
display: block;
text-align: center;
}Questo codice non crea nessuna linea ma, semplicemente, posiziona tre asterischi al centro a mo di separatore.
Una soluzione più elegante potrebbe essere quella di posizionare i tre asterischi al centro di una sottile linea:
hr.linea-asterischi {
padding: 0;
border: none;
border-top: 1px solid #333;
color: #333;
text-align: center;
}
hr.linea-asterischi:before {
content: '***';
display: inline-block;
position: relative;
top: -0.5em;
font-size: 1.5em;
padding: 0 0.25em;
background: white;
}Linea con glifo al centro
Una soluzione originale, dal gusto classico, può essere interrompere la linea con un glifo al centro. Il codice CSS è molto simile a quello dell’esempio precedente ma per completezza di esposizione ve lo riporto ugualmente:
hr.linea-glifo {
padding: 0;
border: none;
border-top: medium double #333;
color: #333;
text-align: center;
}
hr.linea-glifo:after {
content: "§";
display: inline-block;
position: relative;
top: -0.7em;
font-size: 1.5em;
padding: 0 0.25em;
background: white;
}Linea con stella al centro
Proseguiamo sullo stile di quanto abbiamo appena visto proponendo una semplice linea orizzontale con una stellina al centro:
hr.linea-stella {
padding: 0;
border: none;
border-top: 1px solid #333;
color: #333;
text-align: center;
}
hr.linea-stella:after {
content: "\2605";
display: inline-block;
position: relative;
top: -0.7em;
font-size: 1.5em;
padding: 0 0.25em;
background: white;
}Linea… di ritaglio!
Una interessante stilizzazione prevede la possibilità di ricreare, in puro CSS, una linea di ritaglio tratteggiata con tanto di simbolo della forbice! vediamo il codice per questa stilizzazione:
hr.linea-ritaglio {
border:0;
border-top: 1px dashed #8c8b8b;
}
hr.linea-ritaglio:after {
content: '\002702';
display: inline-block;
position: relative;
top: -12px;
left: 40px;
padding: 0 3px;
color: #8c8b8b;
font-size: 18px;
}