back to top

Linee HTML: come inserire linee orizzontali e verticali?

Esistono diverse tecniche per inserire linee allโ€™interno di pagine HTML. Per prima cosa bisogna distinguere tra linee orizzontali e linee verticali.

Inserire una linea di separazione orizzontale in HTML

La tecnica piรน semplice per lโ€™inserimento di una linea di separazione orizzontale allโ€™interno di una pagina web, consiste nellโ€™utilizzo del tag <hr> (horizontal rule). Il suo utilizzo รจ semplicissimo, basta inserire il tag tra i due elementi che si desidera separare con una linea orizzontale, ad esempio:

<p>... primo blocco di testo ...</p>
<hr>
<p>... secondo blocco di testo ...</p>
Prova il codice

Una seconda tecnica consiste nellโ€™applicare (mediante CSS) un bordo inferiore allโ€™elemento superiore (oppure un bordo superiore allโ€™elemento inferiore). Ad esempio, si supponga di avere un codice HTMl di questo tipo:

<p class="primo">... primo blocco di testo ...</p>
<p>... secondo blocco di testo ...</p>

Per applicare una linea di separazione utilizzeremo questa semplice regola di stile:

p.primo {
  border-bottom: 1px solid #000;
}

Cosรฌ facendo otterremo il risultato voluto ma per renderlo piรน gradevole potrebbe essere utile aggiungere un poโ€™ di spaziatura equidistante prima e dopo il bordo, per farlo possiamo modificare lo stile come segue:

p.primo {
  border-bottom: 1px solid #000;
  padding-bottom: 20px;
  margin-bottom: 20px;
}
Prova il codice

Inserire una linea di separazione verticale in HTML

Lโ€™inserimento di una linea verticale allโ€™interno di una pagina HTML non รจ cosรฌ semplice come lโ€™inserimento di una linea orizzontale. Non esiste un tag HTML specifico per la creazione di una linea verticale. Per crearne una, pertanto, dovremo utilizzare la tecnica dei bordi (similmente a come visto sopra), applicandone uno laterale tra due elementi affiancati.

Il primo problema da risolvere, se si desidera separare due elementi HTML con una linea verticale, รจ imparare a gestire elementi affiancati.

Per gestire questo tipo di elementi esistono diverse tecniche. La piรน vecchia (e obsoleta) prevede lโ€™utilizzo delle tabelle HTML. Vediamo un esempio di codice HTML:

<table>
  <tr>
    <td class="sinistra">... elemento di sinistra ...</td>
    <td class="destra">... elemento di destra ...</td>
  </tr>
</table>

Per applicare una linea verticale di separazione possiamo utilizzare la seguente regola di stile:

td {
  width: 50%
  box-sizing: border-box;
}
td.sinistra {
  border-right: 1px solid #000;
}

Valgono le stesse osservazioni viste nellโ€™esempio precedente. Per raffinare lโ€™aspetto del nostro esempio, pertanto, aggiungiamo un poโ€™ di spaziatura a sinistra ed a destra della nostra linea verticale agendo su entrambe le celle della nostra tabella:

td {
  width: 50%
  box-sizing: border-box;
}
td.sinistra {
  border-right: 1px solid #000;
  padding-right: 20px;
}
td.destra {
  padding-left: 20px;
}
Prova il codice

Come detto, la tecnica che prevede lโ€™utilizzo di tabelle รจ obsoleta. Un modo piรน corretto per gestire lโ€™affiancamento di due (o piรน) elementi in una pagina HTML prevede lโ€™utilizzo dei CSS mediante, ad esempio, la tecnica dei DIV flottanti. Vediamo un esempio:

<div>
  <div class="sinistra">... elemento di sinistra ...</div>
  <div class="destra">... elemento di destra ...</div>
</div>

Per creare lโ€™efetto desiderato applichiamo la seguente stilizzazione:

div.sinistra, div.destra {
  float: left;
  width: 50%
  box-sizing: border-box;
}
div.sinistra {
  border-right: 1px solid #000;
  padding-right: 20px;
}
div.destra {
  padding-left: 20px;
}
Prova il codice

Oltre a quelle menzionate ci sono diversi altri modi per creare una linea verticale ma, รจ bene ripeterlo, questo elemento non puรฒ essere gestito con una tag HTML specifico. Per creare una linea verticale รจ necessario giocare coi tag HTML e gli stili CSS.

Altri contenuti interessanti

Pubblicitร 
Massimiliano Bossi
Massimiliano Bossi
Stregato dalla rete sin dai tempi delle BBS e dei modem a 2.400 baud, ho avuto la fortuna di poter trasformare la mia passione in un lavoro (nonostante una Laurea in Giurisprudenza). Adoro scrivere codice e mi occupo quotidianamente di comunicazione, design e nuovi media digitali. Orgogliosamente "nerd" sono il fondatore di MRW.it (per il quale ho scritto centinaia di articoli) e di una nota Web-Agency (dove seguo in prima persona progetti digitali per numerosi clienti sia in Italia che all'estero).

Leggi anche...

Visualizzare il codice sorgente HTML di una pagina web su iPhone e iPad

Molti sviluppatori si trovano in difficoltร  quando hanno bisogno...

Caratteri speciali negli URL: quali sono e come gestirli

Gli URL (Uniform Resource Locator) sono componenti fondamentali del...

Convertire PSD in HTML/CSS: ecco come fare

Avete deciso di creare un sito web ma non...

Attributo "rel" per i link HTML

In HTML lโ€™attributo rel puรฒ essere utilizzato esclusivamente in...

Humans.txt โ€“ cosโ€™รจ, a cosa serve e come funziona

Humans.txt รจ un formato standard concepito per corredare un...

Un form di ricerca in HTML

Un modulo di ricerca รจ una delle funzionalitร  piรน...
Pubblicitร