Soms krijg ik de vraag: Waarom is er in de WordPress editor geen knopje om een horizontale lijn in te voegen? Ik dacht altijd: Een horizontale lijn is iets visueels zonder semantische waarde – nooit gebruiken dus. “Horizontaal”, is per definitie een visueel kenmerk. Toch even wat research gedaan.
Wat is de HR-Tag?
De HR-tag is van oudsher een manier om een horizontale lijn (horizontale rule) toe te voegen in een webpagina. Om een lijn toe te voegen, schrijf je deze code in de html:
<hr>
De browser trekt dan een lijn over de volle breedte van de pagina (of van bovenliggende element). Een <hr> tag zonder stijl ziet er als volgt uit.
Is de HR-Tag semantische HTML?
In HTML4 was de <hr> tag niet semantisch. Het was gewoon een manier om een lijn in een document toe te voegen. Beter is om met CSS het onder- of bovenliggende element (afhankelijk van waar je de lijn wilt weergeven) een “border” te geven.
In HTML5 werd de <hr> tag semantisch. De <hr> tag definieert nu een thematische breuk in een HTML-pagina. Het <hr> element wordt gebruikt om afzonderlijke inhoud te scheiden of een verandering van onderwerp aan te geven.
- In HTML 4 vertegenwoordigde de <hr> tag een horizontale lijn.
- In HTML5 definieert de <hr> tag een thematische pauze.
HR attributen
De <hr> tag wordt nog steeds weergegeven als een horizontale lijn in de moderne browers.
Alle lay-out attributen (uitlijnen, schaduw, dikte en breedte) worden niet meer ondersteund in HTML5. Gebruik CSS om de stijl van het <hr> element in aan te passen.
Conclusie
In html5 mag de <hr> dus weer gebruikt worden.
Heb jij ook behoefte aan hier en daar een (semantisch) lijntje in je website? Neem even contact met me op, dan voeg ik een knopje toe aan de WordPress editor.