Linea orizzontale; l’elemento <hr>

Per suddividere gli spazi all’interno della pagina è previsto anche l’elemento <hr> (Horrizontal Rule), che disegna una linea all’interno della pagina. Il tag non prevede chiusura e prevede i seguenti attributi:
  • align permette di definire l’allineamento orizzontale della linea, che di default è a sinistra. Può assumere i valori left,center e right (allineamento a sinistra, al centro e a destra);
  • noshade è un attributo a cui non si può dare un valore. Inserito nel tag, elimina l’ombreggiatura di default della linea;
  • color permette di definire il colore della linea, inserendo come valore il codice di un colore. Si tratta di un attributo supportato solo da Internet Explorer, che automaticamente attiva l’attributo noshade anche se non è presente;
  • size serve a definire l’altezza ovvero lo spessore, della riga espressa in pixel. Può assumere come valore un qualsiasi numero intero; con un’altezza zero il browser disegnerà comunque una linea di 1 pixel;
  • width serve a definire la largheza della riga, definita in pixel o in percentuale rispetto alla larghezza dello spazio disponibile. Può quindi assumere come valore sia un numero intero sia una percentuale.
Ecco un codice in cui sono inserite alcune linee con diversi attributi.


<body bgcolor="#000000" test="#ffffff">
<h1>Linea orizzontale semplice</h1>
<hr>
<h1>Linee orizzontale con larghezza e spessore differenti</h1>
<hr width="50%">
<hr width="500%">
<hr width="200%" size="50>
<h1>Linee orizzontali con diverso allineamento</h1>
<hr width="300" align="left">
<hr width="300" align="center">
<hr width="300" align="right">
</body>

Lascia un commento

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...