website-productie

Les 3: Grondbeginselen van HTML-tekst

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.

3.1 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>, <h3>, <h5>. 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:

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:

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

Oefening: Onze inhoud structuur geven

We vallen direct met de deur in huis met een live voorbeeld op CodePen.

Voeg in het voorbeeld hieronder elementen aan de ruwe tekst in het HTML-veld toe, zodat die als een kop en twee paragrafen in het resultaat scherm verschijnt.

-> Maak van eerste lijn een titel en 2e en 3e lijn een paragraaf.

Link naar oefening

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.

3.2 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.

Actief leren: Een geordende lijst opmaken

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: Een geordende lijst opmaken

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.

maak een recept pagina na

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.

3.3 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.

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>

Hyperlinks zijn heel belangrijk – ze maken van het web een Web. Dit artikel toont de vereiste syntaxis voor het maken van een koppeling en bespreekt de beste werkwijzen om met koppelingen te werken.

Vereisten: Basiskennis van HTML, zoals beschreven in Beginnen met HTML. Kennis over HTML-tekstopmaak, zoals beschreven in Grondbeginselen van HTML-tekst.
Doel: U leert hoe u een hyperlink op een doeltreffende manier aan uw inhoud kunt toevoegen en meerdere bestanden met elkaar kunt verbinden.

Hyperlinks zijn een van de meest opwindende vernieuwingen die het web ons biedt. Eigenlijk horen ze er al sinds het allereerste begin bij, maar zij zijn wat van het web een Web maakt - hiermee kunnen we onze documenten met andere documenten (of met een andere informatiebron) verbinden. Ook kunnen we specifieke onderdelen van documenten met elkaar verbinden, en we kunnen apps op een eenvoudig webadres beschikbaar maken (in tegenstelling tot ‘native’ apps, die op voorhand moeten worden geïnstalleerd). Bijna alle webinhoud kan in een koppeling worden omgezet, zodat wanneer hierop wordt geklikt (of deze op een andere manier wordt geactiveerd), de webbrowser naar een ander webadres zal gaan (URL.)

Noot: een URL wijst ook naar HTML-bestanden, tekstbestanden, afbeeldingen, tekstdocumenten, video- en audiobestanden en alles wat er op het web kan leven. Als de browser niet weet hoe deze het bestand moet weergeven of behandelen, zal worden gevraagd of u het bestand wilt openen of downloaden (in dat geval kunt u er later uw ding mee doen). Als u wordt gevraagd het bestand te openen, wordt de verantwoordelijkheid voor die taak doorgegeven naar een geschikte systeemeigen app op het apparaat.

De startpagina van de BBC bijvoorbeeld bevat een groot aantal koppelingen die niet alleen naar meerdere nieuwsartikelen wijzen, maar ook naar verschillende gebieden van de website (navigatiefunctionaliteit), aanmeldings-/registratiepagina’s (gebruikershulpmiddelen) en meer.

frontpage of bbc.co.uk, showing many news items, and navigation menu functionality

Anatomie van een koppeling

Een eenvoudige koppeling wordt gemaakt door de tekst (of andere inhoud, zie Koppelingen op blokniveau) die u in een koppeling wilt omzetten binnen een <a>-element op te nemen, en dat element een [href](https://developer.mozilla.org/nl/docs/Web/HTML/Element/a#attr-href)-attribuut te geven (ook bekend als een Hypertext Reference of target) dat het webadres zal bevatten waarnaar u de koppeling wilt laten wijzen.

<p>Ik ben een koppeling naar
<a href="https://www.mozilla.org/nl/">de Mozilla-startpagina</a> aan het maken.
</p>

Dit geeft het volgende resultaat:

Ik ben een koppeling naar de Mozilla-startpagina aan het maken.

Ondersteunende informatie toevoegen met het title-attribuut

Een andere attribuut dat u mogelijk aan uw koppelingen wilt toevoegen is title; dit is bedoeld voor extra nuttige informatie over de koppeling, zoals het type informatie dat de pagina bevat, of zaken waarvan u zich bewust moet zijn. Voorbeeld:

<p>Ik ben een koppeling naar
<a href="https://www.mozilla.org/nl/"
   title="De beste plek om meer informatie over Mozilla’s
          missie te vinden en hoe u daaraan kunt bijdragen">de Mozilla-startpagina</a> 
aan het maken.</p>

De code hierboven zorgt ervoor dat de title als een tooltip verschijnt als u de muisaanwijzer boven een koppeling houdt:

Ik ben een koppeling naar de Mozilla-startpagina aan het maken.

Noot: een hyperlink-titel zal alleen verschijnen als u de muis erboven houdt. Dit betekent dat mensen die een toetsenbord gebruiken om in een webpagina te navigeren moeite zullen hebben om de informatie in de tooltip te lezen. Als de informatie van een titel echt nodig is om de pagina te kunnen gebruiken, zou u die moeten aabieden op een manier die voor alle gebruikers toegankelijk is. U kunt de informatie bijvoorbeeld in de normale tekst van de webpagina zetten.

Actief leren: uw eigen voorbeeldkoppeling maken

oefening

Koppelingen op blokniveau

We hebben al vermeld dat u ongeveer alle inhoud in een hyperlink kunt omzetten, zelfs elementen op blokniveau. Als u een afbeelding in een koppeling zou willen omzetten, kon u die afbeelding gewoon tussen <a></a>-labels zeten.

<a href="https://www.mozilla.org/nl/">
  <img src="mozilla-image.png" alt="mozilla-logo dat naar de mozilla-startpagina verwijst">
</a>