Che cos'è il tag HR HTML e come lo si utilizza?

click fraud protection

Cosa sapere

  • Basta digitare <ora> inserire una riga in HTML con il tag HR.
  • Modifica le caratteristiche della linea modificando il CSS in un documento HTML5.

L'HR etichetta viene utilizzato nei documenti Web per visualizzare una linea orizzontale attraverso la pagina, a volte chiamata regola orizzontale. A differenza di alcuni tag, questo non ha bisogno di un tag di chiusura. Digita <ora> per inserire la riga.

Il tag HR è semantico?

In HTML4, il tag HR non era semantico. Elementi semantici descrivere il loro significato in termini di browser e lo sviluppatore può facilmente capire. Il tag HR era solo un modo per aggiungere una semplice riga a un documento dove lo volevi. Applicare uno stile solo al bordo superiore o inferiore dell'elemento in cui si desidera che la linea appaia posizionata a linea orizzontale nella parte superiore o inferiore dell'elemento, ma in generale, il tag HR era più facile da usare per questo scopo.

A partire da HTML5, il tag HR è diventato semantico e ora definisce un'interruzione tematica a livello di paragrafo, che è un interrompere il flusso del contenuto che non giustifica una nuova pagina o un altro delimitatore più forte: è un cambiamento di argomento. Ad esempio, potresti trovare un tag HR dopo un cambio di scena in una storia o può indicare un cambio di argomento in un documento di riferimento.

instagram viewer

Attributi HR in HTML4 e HTML5

La linea si estende per l'intera larghezza della pagina. Alcuni attributi predefiniti descrivono lo spessore, la posizione e il colore della linea, ma puoi modificare queste impostazioni se lo desideri.

In HTML4, puoi assegnare attributi semplici al tag HR, inclusi align, width e noshade. L'allineamento può essere impostato su sinistra, centro, giusto, o giustificare. La larghezza regola la larghezza della linea orizzontale dal 100% predefinito che estende la linea attraverso la pagina. Il noshade L'attributo rende una linea a tinta unita invece di un colore sfumato.

Questi attributi sono obsoleti in HTML5. Dovresti invece usare CSS per modellare i tuoi tag HR nei documenti HTML5.

Questo è un esempio HTML5 di stilizzazione della linea orizzontale in modo che sia alta 10 pixel utilizzando CSS in linea (stili inseriti direttamente nel documento insieme all'HTML):

Screenshot che mostra come stilizzare il tag HR in HTML utilizzando CSS in linea
Utilizzo di CSS in linea per stilizzare le risorse umane.Jennifer Kyrnin Ky

Un altro modo per stilizzare le linee orizzontali in HTML5 è utilizzare un file CSS separato e link ad esso dal documento HTML. Nel file CSS, dovresti scrivere lo stile in questo modo:

Screenshot che mostra come utilizzare CSS esterni per stilizzare il tag HR in HTML
Utilizzo di CSS esterni per stilizzare le risorse umane.Jennifer Kyrnin Ky
ora {
altezza: 10px
}

Lo stesso effetto in HTML4 richiede di aggiungi un attributo al contenuto HTML. Ecco come modificare la dimensione della linea orizzontale con il dimensione attributo:

Screenshot dell'attributo size per il tag HR in HTML
Stilizzazione del tag HR in HTML4.Jennifer Kyrnin Ky

C'è molta più libertà in stilizzare le linee orizzontali nei CSS rispetto all'HTML.

Solo il larghezza e altezza gli stili sono coerenti in tutti i browser, quindi potrebbero essere necessari alcuni tentativi ed errori quando si utilizzano altri stili. La larghezza predefinita è sempre il 100% della larghezza della pagina Web o dell'elemento padre. L'altezza predefinita della regola è di due pixel.

instagram story viewer