Een van HTML's kerntaken is structuur en betekenis aan een tekst geven (ook gekend onder de term  semantiek) zodat een browser de tekst correct kan weergeven. Dit artikel legt uit hoe  HTML gebruikt kan worden om een pagina te structureren door er koppen en paragrafen aan toe te voegen, woorden te benadrukken, lijsten te creëren en nog veel meer.

Vereisten: Basiskennis HTML die je kan terugvinden in Beginnen met HTML.
Doel: Je leert hoe je een tekst kan opmaken en hoe je er structuur en betekenis aan kan geven — inclusief paragrafen, koppen, lijsten, tekst benadrukken en citaten.

De basis: Koppen en Paragrafen

Een gestructureerde tekst bestaat meestal uit koppen of hoofdingen en paragrafen, ongeacht of je nu een verhaal leest, een krant, een leerboek, een magazine enz.

An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs.

Een gestructureerde inhoud maakt de leeservaring gemakkelijker en aangenamer.

In HTML moet elke paragraaf ingesloten worden door een <p>-element zoals hieronder:

<p>Ik ben een paragraaf, laat me je dat vertellen.</p>

Elke hoofding moet worden ingesloten door een kop-element:

<h1>Ik ben de titel van het verhaal.</h1>

Er bestaan zes kop-elementen — <h1><h2><h3><h4><h5>, en <h6>. Elk element staat voor een verschillend inhoudelijk niveau in het document; <h1> vertegenwoordigt de belangrijkste kop, <h2> vertegenwoordigt een ondertitel, <h3> vertegenwoordigt een ondertitel die zich nog een niveau lager bevindt enzovoort.

De implementatie van structurele hiërarchie

We beginnen met een voorbeeld:  in een verhaal, zou <h1> voor de titel van het verhaal worden gebruikt, <h2>'s zouden de titel van elk hoofdstuk vertegenwoordigen en <h3>'s zouden de ondertitels van elk hoofdstuk vertegenwoordigen enzovoort.

<h1>De Verpletterende Verveling</h1>

<p>door Chris Mills</p>

<h2>Hoofstuk 1: De Donkere Nacht</h2>

<p>Het was een donkere nacht. Ergens, riep een uil 'oehoe'. Het regende pijpestelen op de ...</p>

<h2>Hoofdstuk 2: De eeuwige stilte</h2>

<p>Onze protagonist kon uit de schaduwachtige figuur zelfs geen gefluisterd woord krijgen ...</p>

<h3>Het fantoom spreekt</h3>

<p>Meerdere uren waren voorbijgegaan, toen het fantoom plots rechtop zat en schreeuwde, "Heb alsjeblieft erbarmen met mijn ziel!"</p>

Jij bent degene die beslist wat je gebruikte elementen uitdrukken. Zolang de hiërarchie zinvol is, is alles in orde. Je hoeft enkel met een paar goede gewoontes rekening te houden als je zulke structuren creëert:

  • Bij voorkeur gebruik je slechts één <h1> per pagina — dit is de hoogste kop en alle andere zitten eronder in de hiërarchie.
  • Zorg ervoor dat je de koppen in de hiërarchie in de juiste volgorde gebruikt. Gebruik geen <h3>'s voor ondertitels die dan gevolgd worden door <h2>'s om titels onder die ondertitels te vertegenwoordigen. Dat houdt geen steek en zal zeer eigenaardige resultaten veroorzaken.
  • Van de zes verschillende koppen die beschikbaar zijn, zou je moeten proberen er niet meer dan drie per pagina te gebruiken, behalve als je vindt dat het nodig is. Documenten met vele niveaus (i.e. een diepe koppenhiërarchie) worden onhandelbaar en moeilijk om in te navigeren. In zo'n geval raden we je aan om de inhoud over meerdere pagina's te spreiden.

Waarom hebben we structuur nodig?

Om deze vraag te beantwoorden, gaan we eerst text-start.html bekijken — het startpunt van ons voorbeeld waar we in dit artikel mee gaan werken (een lekker hummus recept.) Je kan best een kopie van dit bestand op je lokale machine  opslaan, want je zal het later voor de oefeningen nodig hebben. De body van dit document bevat in dit stadium verschillende delen. De inhoud van de body is op geen enkele manier opgemaakt maar zijn onderdelen zijn met regeleindes van elkaar gescheiden (Druk op Enter/Return om naar de volgende regel te gaan.)

Als je het document echter in je browser opent, zal je zien dat de tekst er als één grote brok in zit!

A webpage that shows a wall of unformatted text, because there are no elements on the page to structure it.

De reden voor die brok is simpel: er staan geen elementen in om de inhoud te structureren en dus weet de browser niet wat een kop is en wat een paragraaf. En bovendien is er dit:

  • Gebruikers die een webpagina bekijken, hebben de neiging die snel te scannen op zoek naar relevante inhoud en dat doen ze door met de koppen in de tekst te beginnen. (Gewoonlijk brengen we slechts een zeer korte tijd door op een webpagina). Als ze in een paar seconden niets nuttigs kunnen vinden, zullen ze waarschijnlijk gefustreerd raken en ergens anders naartoe gaan.
  • Zoekmachines die je pagina indexeren beschouwen de inhoud van de koppen als belangrijke sleutelwoorden die de posititie van de pagina in de ranglijst van de zoekresultaten beïnvloeden. Zonder koppen zal je pagina zwak presteren wat de SEO (Search Engine Optimization of Zoekmachine optimalisatie) betreft.
  • Mensen met een ernstige visuele beperking lezen vaak geen webpagina's. In plaats daarvan luisteren ze ernaar. Dit wordt mogelijk gemaakt door een schermlezer, speciale software voor dit doel. Deze software verschaft snelle toegang tot een tekstinhoud. Er worden verschillende technieken voor gebruikt. Een van die technieken houdt in dat ze een overzicht aanbieden door de koppen van het document voor te lezen. Op die manier kunnen de gebruikers de informatie die ze nodig hebben snel vinden. Als er geen koppen zouden zijn, zouden ze gedwongen worden om het volledige document luidop te laten voorlezen.
  • Om je inhoud met CSS te stijlen of om interessante dingen met JavaScript te doen, is het nodig dat de relevante inhoud in elementen wordt ingebed zodat de CSS/JavaScript die elementen kan gebruiken om met de inhoud te werken.

Het is dus nodig om onze inhoud structureel op te maken.

Actief leren: Onze inhoud structuur geven

We vallen direct met de deur in huis met een live voorbeeld. In het voorbeeld hieronder voeg je elementen aan de ruwe tekst in het invoerveld toe zodat die als een kop met twee paragrafen in het uitvoerveld verschijnt.

Als je een fout maakt, kan je altijd op Maak ongedaan drukken. Als je vastraakt, gebruik dan de Toon oplossing-knop om het antwoord te zien.

Waarom hebben we semantiek nodig?

Overal om ons heen vertrouwen we op semantiek — we rekenen op vroegere ervaringen die ons vertellen wat de functie van een alledaags object is. Als we iets zien, weten we wat zijn functie zal zijn. Dus we verwachten bijvoorbeeld dat een rood verkeerslicht "stop" betekent en een groen verkeerslicht "vertrek". De dingen kunnen zeer snel ingewikkeld worden als de foute semantiek wordt toegepast. (Zijn er landen die rood gebruiken om "vertrek" uit te drukken? Ik hoop van niet.)

In dezelfde geest, moeten we er zeker van zijn dat we de juiste elementen gebruiken om betekenis aan onze tekst, een functie of weergave te geven. In deze context is het <h1>-element dus ook een semantisch element. Het geeft de rol (of betekenis) van "een hoofdtitel van je pagina" aan de tekst die erin steekt, . 

<h1>Dit is een belangrijke hoofdtitel</h1>

Standaard zal de browser dit element een groter lettertype geven om het er als een kop te laten uitzien (hoewel je het met CSS ook zelf kan stijlen en het element de look kan geven die je zelf verkiest). Nog belangrijker is dat zijn  semantische waarde op meer dan één manier zal worden gebruikt door bijvoorbeeld zoekmachines en schermlezers (zoals hierboven al is vermeld).

Aan de andere kant kan je elk element er als een hoofdtitel laten uitzien. Bekijk het volgende eens:

<span style="font-size: 32px; margin: 21px 0;">Is dit een hoofdtitel?</span>

Dit is een <span>-element. Er steekt geen semantiek in. Je kan dit element gebruiken om er inhoud mee te omhullen als je er CSS op wil toepassen (of er iets mee wil doen met JavaScript) zonder er extra betekenis aan te geven (Je zal er later in de cursus meer over leren.) We hebben wat CSS op het span-element toegepast om het er als een hoofdtitel te laten uitzien, maar aangezien die geen semantische waarde heeft, zal die geen van de extra voordelen krijgen die we hierboven hebben beschreven. Het is een goed idee om het relevante HTML-element voor die taak te gebruiken.

Lijsten

Nu gaan we onze aandacht op lijsten richten. Lijsten zijn er overal in ons leven — van je boodschappenlijst, de lijst met aanwijzingen die je onbewust elke dag gebruikt om naar huis te raken tot de lijsten met instructies die je volgt in deze handleidingen!  Lijsten zitten ook overal in het web en er bestaan drie verschillende types.

Ongeordende Lijsten

Ongeordende lijsten worden gebruikt om lijsten op te maken als de volgorde van de lijstonderdelen niet belangrijk is — als voorbeeld nemen we een boodschappenlijst.

melk
eieren
brood
hummus

Elke ongeordende lijst begin tmet een <ul>-element — je plaatst het rond alle lijstonderdelen:

<ul>
melk
eieren
brood
hummus
</ul>

De laatste stap is om elk lijstonderdeel in een <li>-element in te pakken:

<ul>
  <li>melk</li>
  <li>eieren</li>
  <li>brood</li>
  <li>hummus</li>
</ul>

Actief leren: Een ongeordende lijst opmaken

Probeer het live voorbeeld hieronder te bewerken om zo je eigen ongeordende HTML-lijst te maken.

Geordende Lijsten

Geordende lijsten zijn lijsten waarvan de volgorde van de onderdelen wel belangrijk is — als voorbeeld nemen we een reeks instructies om de weg mee uit te leggen:

Rijd naar het einde van de baan
Sla rechts af
Rijd rechtdoor voorbij de eerste twee ronde punten
Sla links af aan het derde ronde punt
De school ligt 300 meter verder aan je rechterkant 

De opmaakstructuur is dezelfde als die voor ongeordende lijsten, behalve dat je de lijstonderdelen in een <ol>-element moet inpakken, in plaats van in een <ul>:

<ol>
  <li>Rijd naar het einde van de baan</li>
  <li>Sla rechts af</li>
  <li>Rijd rechtdoor voorbij de eerste twee ronde punten</li>
  <li>Sla links af aan het derde ronde punt</li>
  <li>De school ligt 300 meter verder aan je rechterkant</li>
</ol>

Actief leren: Een geordende lijst opmaken

Bewerk het live voorbeeld hieronder en maak je eigen geordende HTML-lijst.

Actief leren: Maak onze receptpagina op

Oké,  op dit punt beschik je over alle informatie die je nodig hebt om ons voorbeeld van een receptpagina op te maken. Je kan ervoor kiezen om een locale kopie van ons text-start.html startbestand op te slaan en het werk daar te doen, of je kan het in het bewerkbare voorbeeld hieronder doen. Het is waarschijnlijk beter om het op je locale computer te doen, want dan kan je je werk opslaan. Als je het hieronder in het bewerkbare voorbeeld doet, zal het verloren gaan als je de pagina later heropent.  Beiden hebben voor- en nadelen.

Als je vastraakt, kan je altijd op Toon oplossing drukken of ons text-complete.html voorbeeld bekijken dat je op onze github repo vindt.

Geneste lijsten

Het is volkomen oké om één lijst in een andere te nesten. Je wil misschien ook andere opsommingselementen voor de geneste lijst gebruiken.  Bekijk de tweede lijst van ons receptvoorbeeld:

<ol>
  <li>Pel de knoflook en hak in grove stukken.</li>
  <li>Verwijder al de zaden van het pepertje en hak in grove stukken.</li>
  <li>Doe alles in een keukenmachine.</li>
  <li>Pureer alle ingrediënten in een keukenmachine.</li>
  <li>Als je groffe hummus met stukjes erin wil, pureer dan heel even.</li>
  <li>Als je een gladde hummus wil, pureer dan wat langer.</li>
</ol> 

Er bestaat een nauw verband tussen de laatste twee lijstonderdelen en het onderdeel dat eraan voorafgaat (je leest ze als  instructies die dieper in detail gaan of als keuzes die onder de voorafgaande instructie passen). Het is zinvol om ze in hun eigen ongeordende lijst te nesten, en die lijst in het vierde lijstelement te plaatsen. Dat ziet er dan zo uit:

<ol>
  <li>Pel de knoflook en hak in grove stukken.</li>
  <li>Verwijder al de zaden van het pepertje en hak in grove stukken.</li>
  <li>Doe alles in een keukenmachine.</li>
  <li>Pureer alle ingrediënten in een keukenmachine.
    <ul>
      <li>Als je groffe hummus met stukjes erin wil, pureer dan heel even.</li>
      <li>Als je een gladde hummus wil, pureer dan wat langer.</li>
    </ul>
  </li>
</ol>

Ga nu terug naar de het vorige voorbeeld van actief leren en bewerk de tweede lijst op dezelfde manier.

Nadruk en belangrijkheid

In menselijke taal, benadrukken we vaak bepaalde woorden om de betekenis van een zin te veranderen en we willen vaak bepaalde woorden als belangrijk of op de een of andere manier anders markeren. HTML bevat verschillende semantische elementen die ons toestaan tekstuele inhoud met zulke effecten op te maken. In deze sectie gaan we een paar van de meest gebruikelijke bekijken.

Nadruk

Als we in gesproken taal ergens de nadruk op willen leggen, beklemtonen we bepaalde woorden en veranderen op een subtiele wijze de betekenis van wat we zeggen. In geschreven taal kunnen we op gelijkaardige wijzen een klemtoon op woorden leggen door ze cursief te maken. De twee volgende zinnen hebben bijvoorbeeld verschillende betekenissen.

Ik ben blij dat je niet te laat was.

Ik ben blij dat je niet te laat was. 

De eerste zin klinkt oprecht opgelucht omdat de persoon niet te laat was. Als contrast, klinkt de tweede zin sarcastisch of passief-aggressief en drukt irritatie uit omdat de persoon een beetje te laat aankwam.

In HTML gebruiken we het <em>-element (nadruk) om in zulke gevallen een woord op te maken. Het document wordt ook interessanter om te lezen, deze elementen worden herkend door schermlezers en worden met een andere intontatie uitgesproken. Browsers stijlen dit standaard als cursief, maar je het is beter om dit label niet uitsluitend te gebruiken om woorden cursief te maken. Om dat te doen, zou je een<span>-element  gebruiken en wat CSS, of misschien een <i>-element (zie hieronder).

<p>Ik ben <em>blij</em> dat je niet <em>te laat</em> was.</p>

Zeer belangrijke woorden

Om belangrijke woorden te benadrukken, hebben we de neiging om ze in gesproken taal te beklemtonen en om ze in geschreven taal vet te maken. Bijvoorbeeld:

Deze vloeistoof is uiterst toxisch.

Ik reken op je. Wees niet te laat!

In HTML gebruiken we het <strong>-element om zulke gevallen op te maken. Het document wordt er gebruiksvriendelijker door. Opnieuw worden zulke elementen door schermlezers herkend en met een andere intonatie uitgesproken. Browsers stijlen dit element standaard als vette tekst, maar je zou dit label niet uitsluitend moeten gebruiken om er je worden vet mee te maken. Om dat te doen, kan je beter een<span>-element and wat CSS gebruiken, of misschien een <b>-element (zie hieronder.)

<p>Deze vloeistof is <strong>uiterst toxisch</strong>.</p>

<p>Ik reken op je. <strong>Wees niet</strong> te laat!</p>

Als je zou willen, kan je belangrijkheid en nadruk ook in elkaar nesten:

<p>Deze vloeistof <strong>uiterst toxisch</strong> —
als je hem drinkt, <strong>kan jij <em>sterven</em></strong>.</p>

Actief leren: We gaan belangrijk zijn!

In deze sectie hebben we je een bewerkbaar voorbeeld gegeven. We zouden graag hebben dat je in dit voorbeeld nadruk en grote belangrijkheid toevoegt aan de woorden waarvan jij denkt dat die ze nodig hebben, gewoon om wat te oefenen.

Cursief, vet, onderstrepen...

De elementen die we tot nu toe hebben besproken, hebben duidelijk omschreven semantische waarden. De situatie rond <b>, <i>, en <u> ziet er iets ingewikkelder uit. Ze onstonden zodat mensen vette, cursieve of onderlijnde tekst konden schrijven in een tijdperk toen CSS bijna of zelfs helemaal geen ondersteuning kreeg. Dit soort elementen, die enkel de presentatie en niet de semantiek beïnvloeden, staan bekend als formele elementen (presentational elements in het Engels) en kan ze je beter niet meer gebruiken omdat, zoals we reeds hebben gezien, semantiek belangrijk is voor de toegankelijkheid van o.a. slechtzienden, SEO, enz.

HTML5 verschafte nieuwe definities voor <b>, <i> en <u> met nieuwe nogal verwarrende semantische rollen.

Dit is de beste vuistregel: het is waarschijnlijk geschikt om <b>, <i>, of <u> te gebruiken als je een betekenis wil overbrengen die traditioneel wordt toegekend aan vette, cursieve of onderlijnde tekst, op voorwaarde dat er geen geschikter element is. Het is echter van kritsch belang dat je de toegankelijkheid van je inhoud nooit uit het oog verliest. Het concept 'cursieve tekst' helpt geen mensen die een schermlezer gebruiken of mensen die een ander schrijfsysteem als het Latijnse alfabet gebruiken.

  • <i> wordt gebruikt om een betekenis over te brengen waar we traditioneel cursieve tekst voor gebruiken: Woorden uit een andere taal, taxonomische aanduidingen, technische termen, een gedachte...
  • <b> wordt gebruikt om een betekenis over te brengen waar we traditioneel vette tekst voor gebruikenis: Sleutelwoorden, productnamen, de eerste zin van een hoofdstuk...
  • <u> wordt gebruikt om een betekenis over te brengen waar we traditioneel onderlijnde tekst voor gebruiken: Eigennamen, fout gespelde woorden...

Een vriendelijke waarschuwing over onderlijnde tekst: Er bestaat een sterke associatie tussen onderlijnde tekst en hyperlinks. Daarom kan je op het Web best enkel links onderlijnen. Gebruik het <u>-element als het semantisch geschikt is, maar vraag je toch af of je CSS niet kan gebruiken om de standaard onderlijnde tekst niet te veranderen in iets dat geschikter is voor het het web. Het voorbeeld hieronder illustreert hoe je dat kan doen.

<!-- wtenschappelijke benamingen -->
<p>
  De robijnkeelkolibrie (<i>Archilocus colubris</i>)
  is de vaakst voorkomende kolibrie in het Oosten van Noord-Amerika.
</p>

<!-- vreemde woorden -->
<p>
  Het menu was een zee van exotische woorden zoals <i lang="uk-latn">vatrushka</i>,
  <i lang="id">nasi goreng</i> en <i lang="fr">soupe à l'oignon</i>.
</p>

<!-- een bekende spellingsfout -->
<p>
  Op een dag zal ik je beter leren <u>spelen</u>.
</p>

<!-- Sleutelwoorden onderstrepen in een reeks instructies -->
<ol>
  <li>
    <b>Snijd</b> twee sneden van het brood.
  </li>
  <li>
    <b>Leg</b> een schijfje tomaat en een blaadje
    sla tussen de sneetjes brood.
  </li>
</ol>

Samenvatting

Voorlopig is dit alles! Met dit artikel zou je nu een goed idee moeten hebben van de methodes waarmee je je tekst in HTML op kan maken. We hebben je ook een inleiding gegeven op een aantal van de belangrijkste elementen in dit gebied. Er bestaan nog veel meer semantische elementen die we in dit artikel zouden kunnen bespreken en we zullen er nog veel meer zien in 'Meer Semantische Elementen' later in deze cursus. In het volgende artikel zullen we in detail bekijken hoe we hyperlinks creëren, misschien wel het belangrijkste element op het Web.

Documentlabels en -medewerkers

 Aan deze pagina hebben bijgedragen: Tonnes, mientje
 Laatst bijgewerkt door: Tonnes,