Afegir línies horitzontals per trencar el contingut a la pàgina

Com s'utilitza l'etiqueta HR per a un document web

L'etiqueta HR s'ha utilitzat tradicionalment per afegir una línia horitzontal (de vegades anomenada regla horitzontal) a un document web. Per afegir una línia, escriviu:


per indicar al navegador que dibuixi una línia a través de l'amplada total de la pàgina o element primari mitjançant la configuració predeterminada. Aquesta línia predeterminada és senzilla i sovint serveix al seu propòsit, però es poden assignar atributs per canviar la mida, el color i la posició de la línia entre altres característiques. El mètode per modificar l'aspecte d'una línia horitzontal ha canviat entre HTML4 i HTML5 .

És l'etiqueta de recursos humans semàntic?

En HTML4, l'etiqueta HR no era semàntica. Els elements semàntics descriuen el seu significat en termes que el navegador i el desenvolupador poden entendre fàcilment. L'etiqueta de recursos humans era només una forma d'afegir una línia senzilla a un document allà on ho volgués. Si només heu seleccionat la vora superior o inferior de l'element on voleu que aparegui la línia, col·loqueu una línia horitzontal a la part superior o inferior de l'element, però, en general, l'etiqueta HR era més fàcil d'utilitzar per a aquest propòsit.

A partir d'HTML5, l'etiqueta de recursos humans es va fer semàntic i ara defineix un salt temàtic a nivell de paràgrafs, que és una ruptura en el flux del contingut que no garanteix una nova pàgina o un altre delimitador més fort: és un canvi de tema . Per exemple, podeu trobar una etiqueta HR després d'un canvi d'escena en una història, o bé indicar un canvi de tema en un document de referència.

Atributs de recursos humans en HTML4 i HTML5

A HTML4, l'etiqueta HR podria assignar atributs simples que inclouen "align", "width" i "noshade". L'alineació es podria establir a l'esquerra, al centre, a la dreta o a la justificació. L'amplada va ajustar l'amplada de la línia horitzontal des del 100 per cent predeterminat que va estendre la línia a través de la pàgina. L'atribut noshade representava una línia de color sòlida en comptes d'un color ombrejat. Aquests atributs són obsolets en HTML5, i hauríeu d'utilitzar CSS per a l'estil de les vostres etiquetes HR en HTML5. Per exemple, en HTML 4:


genera una línia horitzontal amb una alçada de 10 píxels.

Mitjançant CSS amb HTML5, una línia horitzontal de 10 píxels d'alçada s'anomena:


L'ús de CSS per a l'estil de la vostra línia horitzontal li dóna molta llibertat en el disseny de la vostra pàgina web. Podeu veure molts exemples d'estils d'etiquetes HR en aquest estil l' article Etiqueta de recursos humans . Només els estils d'amplada i alçada són coherents a tots els navegadors, de manera que és possible que calgui provar i obtenir un error en utilitzar altres estils. L'amplada predeterminada sempre és el 100 per cent de l'amplada de la pàgina web o element primari. L'alçada predeterminada de la regla és de dos píxels.