L'etiqueta HR s'utilitza en documents web per mostrar una línia horitzontal a través de la pàgina, o de vegades anomenada una regla horitzontal. A diferència d'algunes etiquetes, aquest no necessita una etiqueta de tancament, de manera que tot el que heu de fer és escriure per inserir la línia.
La línia s'estén per tot l'ample de la pàgina i comporta alguns atributs predeterminats per descriure el gruix, la ubicació i el color de la línia, però podeu canviar aquests paràmetres si ho desitja.
Podeu editar les característiques de la línia horitzontal en un document HTML5 editant el CSS de la pàgina. Les línies horitzontals HTML4 s'han canviat al costat HTML del document.
É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.
Començant amb HTML5, l'etiqueta de recursos humans es va convertir en semàntica 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 pot assignar atributs simples, incloent-hi alinear, ample, i noshade . Es pot configurar l'alineació esquerra , centre , dret o justificar . L'amplada ajusta l'amplada de la línia horitzontal des del 100 per cent predeterminat que estén la línia de la pàgina. El noshade L'atribut representa una línia de color sòlida en comptes d'un color ombrejat.
Aquests atributs són obsolets en HTML5. En lloc d'utilitzar CSS per a l'estil de les vostres etiquetes HR en documents HTML5.
Aquest és un exemple HTML5 d'estilitzar la línia horitzontal per tenir 10 píxels d'alt utilitzant CSS inline (estils inserits directament al document juntament amb HTML):
Una altra forma d'estilitzar línies horitzontals en HTML5 és utilitzar un fitxer CSS separat i enllaçar-lo des del document HTML. En el fitxer CSS, escriviu l'estil com aquest: hr {alçada: 10px}
El mateix efecte en HTML4 requereix que afegiu un atribut al contingut HTML. A continuació s'explica com canviar la mida de la línia horitzontal amb la mida atribut:
Hi ha molta més llibertat en l'estil de línies horitzontals en CSS versus HTML. Només el amplada i altura Els estils són coherents a tots els navegadors, de manera que és probable que calgui provar i obtenir errors 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.
