De HR-tag wordt gebruikt in webdocumenten om een horizontale lijn over de pagina weer te geven, of wordt soms een horizontale regel genoemd. In tegenstelling tot sommige tags, heeft deze geen afsluitende tag nodig, dus alles wat je hoeft te doen is typen om de lijn in te voegen.
De lijn strekt zich uit over de volledige breedte van de pagina en bevat een aantal standaardattributen om de dikte, locatie en kleur van de lijn te beschrijven, maar u kunt deze instellingen desgewenst wijzigen.
U kunt de kenmerken van de horizontale lijn in een HTML5-document bewerken door de CSS van de pagina te bewerken. HTML4-horizontale lijnen zijn gewijzigd aan de HTML-kant van het document.
Is de HR Tag semantisch?
In HTML4 was de HR-tag niet semantisch. Semantische elementen beschrijven hun betekenis in termen die de browser en de ontwikkelaar gemakkelijk kunnen begrijpen. De HR-tag was slechts een manier om een eenvoudige regel toe te voegen aan een document, waar u maar wilde. Door alleen de bovenste of onderste rand van het element te stylen waar je de lijn wilde laten verschijnen, werd een horizontale lijn bovenaan of onderaan het element geplaatst, maar over het algemeen was de HR-tag gemakkelijker te gebruiken voor dit doel.
Te beginnen met HTML5, werd de HR-tag semantisch, en het definieert nu een alineatypauze op paragraafniveau, wat een breuk is in de stroom van de inhoud die geen nieuwe pagina of een ander sterker delimiter 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.
HR-attributen in HTML4 en HTML5
In HTML4 kan aan de HR-tag eenvoudige attributen worden toegewezen, waaronder uitlijnen, breedte, en geen schaduw . De uitlijning kan worden ingesteld op links , centrum , rechts 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 kenmerken zijn verouderd in HTML5. Gebruik in plaats daarvan CSS om uw HR-tags op te maken in HTML5-documenten.
Dit is een HTML5-voorbeeld van het stylen van de horizontale lijn tot 10 pixels hoog met behulp van inline CSS (stijlen die rechtstreeks in het document worden ingevoegd, samen met HTML):
Een andere manier om horizontale lijnen in HTML5 te styliseren, is door een afzonderlijk CSS-bestand te gebruiken en er vanuit het HTML-document naar toe te linken. In het CSS-bestand zou je de styling als volgt schrijven: hr {hoogte: 10px}
Hetzelfde effect in HTML4 vereist dat u een kenmerk toevoegt aan de HTML-inhoud. U kunt als volgt de grootte van de horizontale lijn wijzigen met de grootte attribuut:
Er zit veel meer vrijheid in het stylen van horizontale lijnen in CSS versus HTML. Alleen de breedte en hoogte stijlen zijn consistent in alle browsers, dus er kunnen wat vallen en opstaan 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.
