Wat is de HTML HR-tag en hoe gebruik je deze?

Wat te weten

  • Typ gewoon <hr> om een ​​regel in HTML in te voegen met de HR-tag.
  • Bewerk de lijnkenmerken door CSS in een HTML5-document te bewerken.

de HR label wordt in webdocumenten gebruikt om een ​​horizontale lijn over de pagina weer te geven, ook wel een horizontale regel genoemd. In tegenstelling tot sommige tags heeft deze geen afsluitende tag nodig. Typ <hr> om de regel in te voegen.

Is de HR-tag semantisch?

In HTML4 was de HR-tag niet semantisch. semantische elementen beschrijven hun betekenis in termen van de browser, en de ontwikkelaar kan het gemakkelijk begrijpen. De HR-tag was slechts een manier om een ​​eenvoudige regel aan een document toe te voegen waar u maar wilde. Alleen de boven- of onderrand van het element stylen waar u de lijn wilde laten verschijnen, geplaatst a horizontale lijn aan de boven- of onderkant van het element, maar over het algemeen was de HR-tag hiervoor gemakkelijker te gebruiken doel.

Beginnend met HTML5 werd de HR-tag semantisch en definieert nu een thematische breuk op alineaniveau, wat een onderbreking in de stroom van de inhoud die geen nieuwe pagina of een ander krachtiger scheidingsteken rechtvaardigt - het is een verandering van onderwerp. U kunt bijvoorbeeld een HR-tag vinden na een scènewisseling in een verhaal, of het kan een verandering van onderwerp in een referentiedocument aangeven.

instagram viewer

HR-kenmerken in HTML4 en HTML5 HTML

De lijn strekt zich uit over de volledige breedte van de pagina. Sommige standaardattributen beschrijven de dikte, locatie en kleur van de lijn, maar u kunt deze instellingen desgewenst wijzigen.

In HTML4 kunt u de HR-tag eenvoudige attributen toewijzen, waaronder uitlijnen, breedte en noshade. De uitlijning kan worden ingesteld op: links, centrum, Rechtsaf, of rechtvaardigen. De breedte past de breedte van de horizontale lijn aan van de standaard 100 procent die de lijn over de pagina verlengt. De geen schaduw attribuut geeft een effen kleurlijn weer in plaats van een gearceerde kleur.

Deze attributen zijn verouderd in HTML5. Gebruik in plaats daarvan CSS om uw HR-tags in HTML5-documenten op te maken.

Dit is een HTML5-voorbeeld van het stileren van de horizontale lijn tot 10 pixels hoog met behulp van inline CSS (stijlen die samen met HTML rechtstreeks in het document worden ingevoegd):

Schermafbeelding die laat zien hoe de HR-tag in HTML gestileerd kan worden met inline CSS
Inline CSS gebruiken om HR te stylen.Jennifer Kyrnin

Een andere manier om horizontale lijnen in HTML5 te stileren, is door een apart CSS-bestand te gebruiken, en link ernaar vanuit het HTML-document. In het CSS-bestand zou je de stijl als volgt schrijven:

Schermafbeelding die laat zien hoe u externe CSS kunt gebruiken om de HR-tag in HTML te stylen
Externe CSS gebruiken om HR te stylen.Jennifer Kyrnin
uur {
hoogte: 10px
}

Voor hetzelfde effect in HTML4 moet u: een attribuut toevoegen aan de HTML-inhoud. Zo wijzigt u de grootte van de horizontale lijn met de grootte attribuut:

Screenshot van het size-attribuut voor de HR-tag in HTML
De HR-tag stileren in HTML4.Jennifer Kyrnin

Er zit veel meer vrijheid in horizontale lijnen opmaken in CSS versus HTML.

Alleen de breedte en hoogte stijlen zijn consistent in alle browsers, dus wat vallen en opstaan ​​kan nodig zijn bij het gebruik van andere stijlen. De standaardbreedte is altijd 100 procent van de breedte van de webpagina of het bovenliggende element. De standaardhoogte van de regel is twee pixels.