Over horizontale lijnen in een document
Als een document verschillende onderwerpen behandelt, kan het handig zijn om tussen de onderwerpen een horizontale lijn te zetten als scheiding tussen de onderdelen. In HTML is daarvoor een tag beschikbaar: <hr>.
Om <hr> op te maken, heeft HTML 4 een aantal attributen beschikbaar. In HTML5 zijn die allemaal verdwenen.
Omdat deze site zich richt op HTML5, blijven de oude HTML 4 attributen buiten beschouwing. In de grote browsers werken ze
nog steeds.
Om een <hr> op te maken ben je in HTML5 aangewezen op CSS.
<hr> ondersteunt alle globale attributen, waarvan class, id en style de belangrijkste
zijn.
<hr> ondersteunt alle event attributen (on.......).
Hierboven zie je een <hr> die is gemaakt zonder enige opmaak, dus met alleen default-instellingen. De breedte
is 100%, de kleur is grijs en de lijndikte is 1px. Redelijk saai dus.
Met CSS kun je al veel meer. Zie de lijn hieronder, die is gemaakt met:
<hr style="display:block; width:80%; margin:0.5em auto 0.5em auto; border-top:1px solid red">
Zoals je ziet moet je je een beetje in bochten wringen om tot een goed resultaat te komen.
Natuurlijk kun je van de CSS een class maken. Dat is vooral handig als je document meerdere lijnen heeft.
Een andere mogelijkheid is met een <div>-tag:
<div style="display:block; width:80%; height:1px; margin:0.5em auto 0.5em auto; background-color:red">
Ook dit kun je in een class zetten.
Je kunt ook border-top
of border-bottom toepassen in een blok- of regelelement, zoals in deze paragraaf is gedaan met:
<p style="width:80%; margin:0.5em auto 0.5em auto; padding-top:10px; border-top:1px solid red">
Deze laatste methode heeft een zij-effect: de tekst breedte wordt even breed als de lijn. Voor bijvoorbeeld een voettekst
kan dat handig zijn.
Opmerking:
Met behulp van CSS kun je ook verticale lijnen maken. Zie daarvoor het item Over verticale
lijnen in een document.
