Linea orizzontale in HTML con il tag hr
La linea orizzontale in HTML è una linea che divide il contenuto di un sito web in due sezioni. Il relativo tag HTML <hr> non richiede l’uso di un elemento di chiusura.
Che cos’è una linea orizzontale in HTML?
Una linea orizzontale in HTML serve a creare una linea di separazione visibile e continua tra due paragrafi o altre sezioni significative in un documento HTML. Viene definita per mezzo del tag HTML <hr> e permette di migliorare la struttura e la leggibilità di un sito web. Il tag <hr> non rappresenta soltanto una linea di separazione visiva, ma ha anche un’importanza semantica: l’elemento indica infatti un cambio di argomento o una pausa tematica.
In teoria, il tag HTML può essere inserito in un qualsiasi punto a piacere all’interno dell’elemento body e non necessita di un elemento di chiusura. L’abbreviazione “hr” sta per “horizontal ruler” (in italiano, riga orizzontale). Il tag HTML <hr> supporta tutti gli attributi HTML ed è compatibile con tutti i browser più diffusi.
- Disponibilità garantita al 99,99%
- Dominio, SSL ed e-mail inclusi
- Assistenza 24/7 in lingua italiana
HTML <hr>: sintassi ed esempio
La sintassi del tag HTML <hr> è semplice, in quanto non richiede ulteriori attributi o parametri:
<hr>È possibile illustrare il funzionamento di questo elemento con un semplice esempio per tracciare una linea orizzontale in HTML. A tal fine prendiamo un paragrafo (<p>) e un testo tra virgolette (<blockquote>), quindi separiamo le due unità di significato nel nostro documento HTML con una linea orizzontale. Il relativo codice si presenta così:
<!DOCTYPE html>
<html>
<body>
<h1>Linea orizzontale HTML</h1>
<p>HTML è il linguaggio di markup standard per i documenti destinati a essere visualizzati sul web. Esso descrive la struttura di un sito web e permette di definire testi, immagini, collegamenti e altri elementi.</p>
<hr>
<blockquote>“HTML è facile da imparare e offre una solida base per la creazione di siti web.”</blockquote>
</body>
</html>
Modifica dell’aspetto della linea orizzontale in HTML
È possibile modificare l’aspetto di una linea orizzontale in HTML. Nelle versioni precedenti, si utilizzavano gli attributi align, color, noshade, size e width, che però non sono più supportati a partire da HTML5. Al loro posto è invece possibile usare l’attributo CSS style.
Anziché align, utilizziamo questo codice:
<!DOCTYPE html>
<html>
<body>
<h1>Linea orizzontale HTML</h1>
<p>HTML è il linguaggio di markup standard per i documenti destinati a essere visualizzati sul web. Esso descrive la struttura di un sito web e permette di definire testi, immagini, collegamenti e altri elementi.</p>
<hr style="width:50%;text-align:left;margin-left:0">
<blockquote>“HTML è facile da imparare e offre una solida base per la creazione di siti web.”</blockquote>
</body>
</html>Per cambiare il colore della linea HTML orizzontale utilizza la proprietà color:
<!DOCTYPE html>
<html>
<body>
<h1>Linea orizzontale HTML</h1>
<p>HTML è il linguaggio di markup standard per i documenti destinati a essere visualizzati sul web. Esso descrive la struttura di un sito web e permette di definire testi, immagini, collegamenti e altri elementi.</p>
<hr style="color:yellow;background-color:gray">
<blockquote>“HTML è facile da imparare e offre una solida base per la creazione di siti web.”</blockquote>
</body>
</html>Anziché noshade, utilizza il codice seguente per inserire una linea orizzontale senza ombreggiatura:
<!DOCTYPE html>
<html>
<body>
<p>Una normale linea orizzontale:</p>
<hr>
<p>Con CSS:</p>
<hr style="height:2px;border-width:0;color:gray;background-color:gray">
</body>
</html>Per modificare l’altezza si utilizza height:
<!DOCTYPE html>
<html>
<body>
<p>Una normale linea orizzontale:</p>
<hr>
<p>Una linea orizzontale con un'altezza di 50 pixel:</p>
<hr style="height:50px">
</body>
</html>La larghezza della linea orizzontale in HTML si imposta con il parametro width:
<!DOCTYPE html>
<html>
<body>
<p>Una normale linea orizzontale:</p>
<hr>
<p>Una linea orizzontale con una larghezza del 30 percento:</p>
<hr style="width:30%">
</body>
</html>- Domain Connect gratuito per una configurazione facile del DNS
- Certificato SSL Wildcard gratuito
- Protezione privacy inclusa