HTML: gli hr, le Linee Divisorie, vediamo alcuni esempi e stili.

Il tag <hr/> prende il nome dall'espressione inglese horizontal rule . Letteralmente, horizontal significa "orizzont...

Il tag <hr/> prende il nome dall'espressione inglese horizontal rule. Letteralmente, horizontal significa "orizzontale" e rule significa "regola". Tuttavia, in italiano moderno, il termine "regola" ha perso l'associazione con il suo significato originario "regolo" legato allo strumento di misurazione e tracciatura. Infatti, rule deriva dal latino regula, che a sua volta deriva da regulus, ovvero un piccolo righello usato per tracciare linee dritte, oggi più comunemente chiamato "righello".

Di conseguenza, se volessimo tradurre il termine horizontal rule in modo più attinente all'italiano contemporaneo, la resa più efficace sarebbe "riga orizzontale", poiché enfatizza il significato visivo e pratico del tag <hr/>, che serve proprio a tracciare una linea di separazione all'interno della pagina web.

Vediamo alcuni esempi di linee divisorie per il web

Per ogni esempio vedremo sia visivamente l'effetto che il codice da usare. Perché sono tutti grigi? Perché sono quelli che uso più spesso io nei siti web che ho realizzato negli anni.

Esempio Linea divisoria Continua Grigia

---

<style>/* Linea Grigia divisoria */ hr.ld1 {border-top: 1px solid #cccccc; margin: 20px 0; /* Spazio sopra e sotto la riga */} </style> <hr class="ld1" />

Esempio Linea divisoria Tratteggiata Grigia

---

<style>/* Linea divisoria tratteggiata */ hr.ld2 {border-top: 1px dashed #cccccc; margin: 20px 0; /* Spazio sopra e sotto la riga */} </style> <hr class="ld2" />

Esempio Linea divisoria Puntinata Grigia

---

<style>/* Linea divisoria puntinata */ hr.ld3 {border-top: 1px dotted #cccccc; margin: 20px 0; /* Spazio sopra e sotto la riga */} </style> <hr class="ld2" />

Esempio Spessore Linea divisoria Continua Grigia

Per questo caso è bene comprendere che l' <hr/> è composto da un bordo e da un area interna e con il CSS possiamo agire ad esempio sullo spesso del bordo, e volendo anche sulla dimensione dell'area interna. L' <hr/> non è in senso stretto un'area rettangola dentro la quale possiamo includere qualche cosa, perché è un tag auto-chiudente come il tag immagine. Cioè non è come l'area di un <div>che può contenere qualcosa al suo interno</div>.  Quindi in questo esempio anche se nel CSS puoi vedere 1px di bordo, essendo un area rettangolare il bordo di sopra di somma con il bordo di sotto per un totale di 2px.

---

<style>/* Linea divisoria Grigia spessa 2px*/ hr.ld4 {border: 1px solid #cccccc; margin: 20px 0; /* Spazio sopra e sotto la riga */} </style> <hr class="ld2" />

Esempio Spessore Linea divisoria Continua Grigia usandoi bordi, angoli Arrotondati

---

<style>/* Linea divisoria larga grigia, angoli arrotondati */ hr.ld5 {border: 5px solid #cccccc; border-radius: 5px; margin: 20px 0; /* Spazio sopra e sotto la riga */} </style> <hr class="ld2" />

Esempio Spessore Linea divisoria Continua usando "height" (altezza)

In questo esempio vediamo che il tag <hr/> è effettivamente un rettangolo a cui possiamo aumentare la dimensione interna agendo sul parametro altezza: height.

---

<style>/* Linea divisoria larga grigia, angoli arrotondati */ hr.ld6 {height: 5px; /* Imposta lo spessore della riga */ background-color: #cccccc; /* Colore della riga */ border: none; /* Rimuove il bordo predefinito */ margin: 20px 0; /* Spazio sopra e sotto la riga */} </style> <hr class="ld6" />