Tekst vormt de kern van vrijwel elke website. Of je nu een nieuwsartikel leest, een product koopt of een portfolio bekijkt: tekst brengt de boodschap over. Maar een grote muur van ongestructureerde tekst schrikt bezoekers direct af.
In deze les leer je hoe je met HTML typografische hiërarchie aanbrengt. Door de juiste tags te kiezen (<h1> t/m <h6>, <p>, <strong>, <em>, <br> en <hr>) maak je de inhoud van je website niet alleen visueel aantrekkelijk, maar ook logisch en goed leesbaar voor bezoekers én zoekmachines!
<h1> t/m <h6>)Op een krantenpagina zie je in één oogopslag wat de belangrijkste titel is, wat de subtitels zijn en waar de artikelen staan. In webdesign noemen we deze structuur typografische hiërarchie.
HTML biedt zes niveaus van kopteksten, van <h1> (meest belangrijk) tot <h6> (minst belangrijk):
<h1>Hoofdtitel van de pagina (Niveau 1)</h1>
<h2>Belangrijk subonderwerp (Niveau 2)</h2>
<h3>Detail binnen het subonderwerp (Niveau 3)</h3>
<h4>Minder belangrijk kopje (Niveau 4)</h4>
<h5>Klein kopje (Niveau 5)</h5>
<h6>Kleinste kopje (Niveau 6)</h6>
<h1> per pagina: Dit is de hoofdtitel van je document (bijvoorbeeld de titel van het artikel of de naam van de pagina).<h1> naar een <h3>. Bouw de structuur logisch af (<h1> $\rightarrow$ <h2> $\rightarrow$ <h3>).<h2> niet omdat je 'toevallig grote tekst' wilt, maar omdat het een hoofdsectie representeert. Het uiterlijk (de grootte) pas je later aan met CSS!Tip: Zoekmachines zoals Google gebruiken jouw kopteksten om te begrijpen waar je pagina over gaat. Een heldere structuur helpt dus ook om beter gevonden te worden op het internet!
<p>)Om gewone lopende tekst op je pagina te plaatsen, gebruik je het paragraaf-element (<p>). Elk stukje tekst dat bij elkaar hoort als alinea sluit je in met een openingstag <p> en een sluitingstag </p>.
Browsers voegen automatisch wat witruimte (marge) toe boven en onder een <p> element, zodat alinea's netjes van elkaar gescheiden blijven.
<p>Welkom op mijn portfolio. Hier vind je alle projecten die ik dit schooljaar heb gemaakt voor het vak Grafische Technieken.</p>
<p>In mijn vrije tijd houd ik me graag bezig met fotografie, typografie en het ontwerpen van minimalistische posters.</p>
<br>) en Scheidingslijnen (<hr>)Soms wil je tekst op een nieuwe regel laten beginnen zonder een nieuwe alinea te starten, of wil je twee onderwerpen visueel van elkaar scheiden.
<br>)De <br> tag staat voor break. Het dwingt de tekst direct naar een nieuwe regel, bijvoorbeeld bij het typen van een gedicht, een liedtekst of een adres.
<hr>)De <hr> tag staat voor horizontal rule. Dit element tekent een horizontale lijn over de breedte van de pagina. Het geeft een thematische overgang aan tussen twee onderwerpen.
<p>
Sint-Jorisstraat 15<br>
8000 Brugge<br>
België
</p>
<!-- Horizontale scheidingslijn tussen adres en vervolg -->
<hr>
<p>Neem gerust contact met ons op via e-mail.</p>
Opgelet: Zoals je ziet in het voorbeeld zijn<br>en<hr>lege elementen (void tags). Ze hebben geen inhoud en dus ook geen sluitingstag!
<strong> en <em>Wanneer je bepaalde worden binnen een zinsverband wilt laten opvallen, kun je tekst nadruk geven. In HTML doen we dat met <strong> en <em>.
<strong> (Belangrijke inhoud)Gebruik <strong> om aan te geven dat een woord of zin zeer belangrijk is of met spoed/ernst gelezen moet worden. De browser maakt deze tekst standaard vetgedrukt (bold).
<em> (Emfase / Nadruk)De tag <em> staat voor emphasis. Je gebruikt dit wanneer een woord met extra klemtoon uitgesproken moet worden, of een subtiele verandering in betekenis heeft. De browser toont deze tekst standaard cursief (italic).
<p>
<strong>Let op:</strong> Vergeet niet om je bestanden op te slaan met de extensie <em>.html</em>!
</p>
<b> en <i> gebruiken?Vroeger gebruikte men <b> (bold) en <i> (italic). Tegenwoordig verkiezen we <strong> en <em> omdat deze tags semantische betekenis dragen. Schermlezers voor slechtzienden lezen een <strong> tekst bijvoorbeeld met een luidere of krachtigere stem voor!
Laten we alle geleerde elementen combineren in één overzichtelijk stukje HTML-code:
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<title>Typografie Demo</title>
</head>
<body>
<h1>De Kunst van Typografie</h1>
<p>Typografie is de kunst en techniek van het opmaken van tekst voor drukwerk of digitale schermen.</p>
<hr>
<h2>Waarom is structuur belangrijk?</h2>
<p>Een duidelijke structuur zorgt ervoor dat lezers de informatie <em>snel kunnen scannen</em>. Gebruik daarom altijd de juiste tags.</p>
<p><strong>Belangrijkste vuistregel:</strong> Kies nooit een tag voor de visuele weergave, maar altijd voor de <em>inhoudelijke betekenis</em>!</p>
</body>
</html>
<h1> t/m <h6>) bouwen de hiërarchie op. Gebruik slechts één <h1> per pagina en sla geen niveaus over.<p>) bundelen gewone tekstblokken en zorgen automatisch voor verticale witruimte.<br> geeft een harde regelafbreking binnen een alinea; <hr> tekent een horizontale scheidingslijn.<strong> maakt tekst vetgedrukt om belang aan te duiden.<em> maakt tekst cursief om nadruk aan te geven.