Een van de kerntaken van HTML 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 meer.

Vereisten: Basiskennis HTML die je kunt terugvinden in Beginnen met HTML.
Doel: Je leert hoe je een tekst kunt opmaken en hoe je er structuur en betekenis aan kunt 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.

Een voorbeeld van een voorpagina van een krant, dat het gebruik van koppen, subkoppen en paragrafen laat zien.

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, <h3>'s zouden de ondertitels van elk hoofdstuk vertegenwoordigen, enzovoort.

<h1>De Verpletterende Verveling</h1>

<p>door Chris Mills</p>

<h2>Hoofdstuk 1: De donkere nacht</h2>

<p>Het was een donkere nacht. Ergens riep een uil 'oehoe'. Het regende pijpenstelen 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 ging zitten en schreeuwde: "Heb alsjeblieft erbarmen met mijn ziel!"</p>

Jij bent degene die beslist wat je gebruikte elementen uitdrukken, zolang de hiërarchie logisch is. 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 eigenaardige resultaten veroorzaken.
  • Van de zes beschikbare niveaus 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 (d.w.z. een diepe koppenhiërarchie) worden onhandelbaar en moeilijk om in te navigeren. In zo'n geval is het aan te raden 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 waarmee we in dit artikel gaan werken (een lekker hummusrecept). Je kunt het beste een kopie van dit bestand op je lokale machine opslaan, want je zult het later voor de oefeningen nodig hebben. De body van dit document bevat in dit stadium verschillende delen – de inhoud is op geen enkele manier opgemaakt, maar de onderdelen zijn met regeleindes van elkaar gescheiden (op Enter/Return gedrukt om naar de volgende regel te gaan).

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

Een webpagina die een muur van onopgemaakte tekst laat zien, omdat er geen elementen op de pagina zijn om deze te structureren.

De reden hiervoor is simpel: er staan geen elementen in om de inhoud te structureren, 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, vaak door eerst slechts de koppen te lezen. (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 gefrustreerd raken en ergens anders naartoe gaan.
  • Zoekmachines die je pagina indexeren beschouwen de inhoud van de koppen als belangrijke sleutelwoorden die de positie van de pagina in de ranglijsten van de zoekresultaten beïnvloeden. Zonder koppen zal je pagina zwak presteren wat de SEO (Search Engine Optimization, "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. Deze software verschaft snelle toegang tot een tekstinhoud. Een van de gebruikte technieken houdt in dat een overzicht van het document gegeven wordt door de koppen voor te lezen, zodat de gebruikers de informatie die ze nodig hebben snel kunnen vinden. Als er geen koppen zijn, worden ze gedwongen om het volledige document hardop te laten voorlezen.
  • Om inhoud op te maken met CSS, of om interessante dingen met JavaScript te doen, is het nodig om de relevante inhoud in elementen in te bedden zodat CSS/JavaScript de inhoud doelgericht kan benaderen.

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. Voeg in het voorbeeld hieronder elementen aan de ruwe tekst in het Invoer-veld toe, zodat die als een kop en twee paragrafen in het Uitvoer-veld verschijnt.

Als je een fout maakt, kun 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 eerdere 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 aan de betreffende tekst de rol (of betekenis) van "een hoofdtitel van je pagina".

<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 (alhoewel je het met CSS kunt stylen om het elke look te geven die je wil). Nog belangrijker is dat zijn semantische waarde op meer dan één manier zal worden gebruikt, door bijvoorbeeld zoekmachines en schermlezers (zoals hierboven vermeld).

Aan de andere kant kun 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 gebruikt het element om inhoud te omhullen als je er CSS op wil toepassen (of om er iets mee te doen met JavaScript) zonder er extra betekenis aan te geven. (Je zult er later in de cursus meer over leren.) We hebben wat CSS op het element toegepast om het er als een hoofdtitel te laten uitzien, maar aangezien het geen semantische waarde heeft, zal het geen van de hierboven beschreven extra voordelen krijgen. 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 overal in ons leven – van je boodschappenlijst tot de lijst met aanwijzingen die je onbewust elke dag gebruikt om naar huis te geraken, tot de lijsten met instructies die je in deze handleidingen volgt! Lijsten zijn ook overal op het Web, en er bestaan drie verschillende types.

Ongeordend

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

melk
eieren
brood
hummus

Elke ongeordende lijst begint met 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 lijst te maken.

Geordend

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 weg
Sla rechtsaf
Rijd rechtdoor bij de eerste twee rotondes
Sla linksaf bij de derde rotonde
De school staat 300 meter verder aan je rechterkant

De opmaakstructuur is gelijk aan die voor ongeordende lijsten, behalve dat je de lijstonderdelen in een <ol>-element (i.p.v. een <ul>) moet inpakken:

<ol>
  <li>Rijd naar het einde van de weg</li>
  <li>Sla rechtsaf</li>
  <li>Rijd rechtdoor bij de eerste twee rotondes</li>
  <li>Sla linksaf bij de derde rotonde</li>
  <li>De school staat 300 meter verder aan je rechterkant</li>
</ol>

Actief leren: Een geordende lijst opmaken

Bewerk het live voorbeeld hieronder om je eigen geordende lijst te maken.

Actief leren: Maak onze receptpagina op

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

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

Lijsten nesten

Het is helemaal prima om de ene lijst in een andere te nesten. Je wil wellicht wat subonderdelen onder een hoogste-niveau-lijstonderdeel hebben. Laten we de tweede lijst van ons receptvoorbeeld bekijken:

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

Aangezien er een nauw verband is tussen de laatste twee onderdelen en hetgene dat eraan voorafgaat (ze lezen als sub-instructies of keuzes bij de voorafgaande instructie), kan het logisch zijn om ze in hun eigen ongeordende lijst te nesten, en die lijst in het huidige vierde lijstelement te plaatsen. Dat ziet er dan zo uit:

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

Ga naar het vorige "Actief leren"-voorbeeld en werk de tweede lijst op deze manier bij.

Nadruk en belangrijkheid

In menselijke taal benadrukken we vaak bepaalde woorden om de betekenis van een zin te veranderen, en willen we vaak bepaalde woorden als belangrijk of op een bepaalde manier anders markeren. HTML bevat diverse semantische elementen die ons in staat stellen om 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, waarmee we op subtiele wijze de betekenis van wat we zeggen veranderen. In geschreven taal kunnen we op vergelijkbare wijze woorden benadrukken 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. De tweede zin klinkt daarentegen sarcastisch of passief-aggressief; hij drukt irritatie uit omdat de persoon een beetje te laat aankwam.

In HTML gebruiken we het <em>-element (emphasis, nadruk) om zulke gevallen te markeren. Behalve dat het het document interessanter om te lezen maakt, wordt dit element ook herkend door schermlezers en met een andere intonatie uitgesproken. Browsers stylen het element standaard als cursief, maar je kunt het beter niet gebruiken puur voor cursivering. Gebruik daarvoor een <span>-element en wat CSS, of wellicht 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 vloeistof is uiterst toxisch.

Ik reken op je. Wees niet te laat!

In HTML gebruiken we het <strong>-element (strong importance, sterke belangrijkheid) om zulke gevallen op te maken. Behalve dat het het document nuttiger, wordt ook dit element herkend door schermlezers en met een andere intonatie uitgesproken. Browsers stylen het element standaard als vette tekst, maar je kunt het beter niet gebruiken puur om vette styling te verkrijgen. Daarvoor kun je beter een <span>-element en wat CSS gebruiken, of wellicht 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>

Indien gewenst kun je belangrijkheid en nadruk ook in elkaar nesten:

<p>Deze vloeistof is <strong>uiterst toxisch</strong> –
als je hem drinkt, <strong>kun je <em>sterven</em></strong>.</p>

Actief leren: Laten we belangrijk zijn!

In deze sectie geven we een bewerkbaar voorbeeld. Probeer nadruk en grote belangrijkheid toe te voegen aan de woorden waarvan je 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> is iets ingewikkelder. Ze onstonden zodat mensen tekst vet, cursief of onderstreept konden maken, in een tijdperk dat CSS nog nauwelijks of helemaal niet ondersteund werd. Dit soort elementen, die enkel de presentatie en niet de semantiek beïnvloeden, staan bekend als formele elementen (presentational elements in het Engels) en kunnen beter niet meer gebruikt worden, omdat, zoals we reeds hebben gezien, semantiek belangrijk is voor de toegankelijkheid, 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 onderstreepte tekst, op voorwaarde dat er geen geschikter element is. Het is echter van cruciaal belang dat de toegankelijkheid nooit uit het oog verloren wordt. Het concept cursivering is niet erg nuttig voor mensen die een schermlezer gebruiken, of voor mensen die een ander schrijfsysteem dan het Latijnse alfabet gebruiken.

  • <i> wordt gebruikt om een betekenis over te brengen die traditioneel met cursieve tekst wordt weergegeven: woorden uit een andere taal, taxonomische aanduidingen, technische termen, een gedachte...
  • <b> wordt gebruikt om een betekenis over te brengen die traditioneel met vette tekst wordt weergegeven: sleutelwoorden, productnamen, de eerste zin van een hoofdstuk...
  • <u> wordt gebruikt om een betekenis over te brengen die traditioneel met onderstreepte tekst wordt weergegeven: eigennamen, fout gespelde woorden...

Een vriendelijke waarschuwing over onderstreping: Mensen associëren onderstreping sterk met hyperlinks. Daarom kun je op het Web het beste slechts hyperlinks onderstrepen. Gebruik het <u>-element als het semantisch geschikt is, maar overweeg CSS te gebruiken om de standaard onderstreping te veranderen in iets dat geschikter is voor het Web. Het voorbeeld hieronder illustreert hoe je dat kunt doen.

<!-- wetenschappelijke benamingen -->
<p>
  De robijnkeelkolibrie (<i>Archilochus colubris</i>)
  is de meest 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 spelfout -->
<p>
  Op een dag zal ik beter leren <u>spelen</u>.
</p>

<!-- Sleutelwoorden in een reeks instructies markeren -->
<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 het! Met dit artikel zou je nu een goed idee moeten hebben van de methodes waarmee je een tekst in HTML kunt opmaken, en heeft je laten kennismaken met enkele van de belangrijkste elementen op dit gebied. Er bestaan veel meer semantische elementen die we in dit artikel zouden kunnen bespreken, en we zullen er 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: WikiMarc, Tonnes, mientje
 Laatst bijgewerkt door: WikiMarc,