# Structuur en semantiek

# Inleiding

Een webpagina bestaat uit een combinatie van structurele en semantische (betekenisvolle) HTML-elementen. Structurele elementen bepalen de algemene structuur van een webpagina, zoals het gebruik van hoofdingen, alinea's, afbeeldingen en formulieren. Semantische elementen geven informatie over de inhoud tussen de openings- en sluitingstag van het element. Denk hierbij aan de onderverdeling in navigatie, inhoud, footer, titelbalk, enz... maar ook aan het leggen van nadruk op een woord of zin, aanduiden van een tekstblok als adresgegevens, enz...

# Structurele elementen

HTML bestaat uit een groot aantal structurele elementen. In dit hoofdstuk bekijken we enkel de structurele elementen die bijdragen tot het opstellen van tekstblokken op een pagina.

# Koppen <h1-6>

Om een inhoudsblok te voorzien van een hoofding gebruik je het header-element <h>. De h wordt gevolgd door een cijfer van 1 tot 6. Het cijfer bepaalt de rang of hiërarchie van de hoofding in de structuur. Zo is het mogelijk een tekst onder te verdelen in meerdere delen, waarbij elke kop fungeert als titel of subtitel van de tekst. De browsers geven de verschillende koppen in verschillende groottes weer, waarbij een <h1> kop de grootste is en <h6> de kleinste. Dit hoofdstuk zou kunnen onderverdeeld worden in de volgende koppenstructuur:

<h1>Structuur en sematiek</h1>

<h2>Inleiding</h2>
<p>We bekijken structurele en semantische elementen...</p>

<h3>Structurele elementen</h3>
<p>Een lijst van structurele elementen...</p>

<h3>Semantische elementen</h3>
<p>Een lijst van semantische elementen...</p>

De standaardgrootte van de koppen is afhankelijk van de browser. We concentreren ons niet op de opmaak van de koppen, enkel de structuur.

# Alinea's <p>

Een alinea-element dient om blokken tekst onder te verdelen in, je raadt het, alinea's. Omdat tekst altijd binnen een element moet staan is het alinea-element het go-to element hiervoor. Het vertelt niets over de inhoud van de alinea, maar laat de auteur toe tekst te schrijven op een natuurlijke manier, zoals men dit zou doen in eender welke context (tekstverwerker, op papier, ...). De witruimte die onderaan een alinea toegevoegd wordt is vaak handig, maar kan ook veranderd worden met CSS.

<p>Dit is een alinea. Binnen een alinea staat vaak tekst
   over één bepaald thema.</p>
<p>Gebruik alinea's niet gewoon om witruimte toe te voegen.</p>

# Nieuwe lijn <br>

Het element <br> begint een nieuwe lijn. Het komt overeen met het gebruik van de enter toets in tekstverwerkers. Het is een leeg element en heeft dus enkel een openingstag. Gebruik nooit het <br> element om regels witruimte toe te voegen!

<p>
    Beste,<br>
    Hierbij meld ik u het volgende:<br>
    Ik zal niet aanwezig zijn op de volgende afspraak:<br>
    Maandag 12/4
</p>

# Horizontale lijn <hr>

Je kan een horizontale lijn invoegen door het lege element <hr> te gebruiken. De lijn strekt zich over de ganse breedte van het ouderelement. Het kan gebruikt worden om onderdelen af te bakenen.

<p>Maandagavond werd er tijdens de eindejaarsfeesten diep in het glas gekeken...</p>
<hr>
<p>Het nieuwe jaar is ook het moment van de goede voornemens...</p>

# Zelfgemaakte blokken <div> en <span>

Wanneer je een stuk inhoud will opnemen binnen een blok, maar de bestaande structurele of semantische elementen niet van toepassing zijn, kan je gebruik maken van de elementen <div> en <span>. Deze elementen spelen geen enkele structurele of semantische rol en mogen dus vrijuit gebruikt worden. Let wel, het gaat om een laatste redmiddel en het is zeker niet de bedoeling deze elememten veelvuldig te gebruiken zonder goede reden!

# Blokelement <div>

Om een eigen blokelement toe te voegen gebruik je het element <div>. Aan div elementen wordt vaak een id-attribuut gegeven om er naar kunnen te refereren met een unieke, zelfgekozen naam. Dit is vooral handig in combinatie met CSS en Javascript.

<div id="boodschap">
    <h1>Boodschap van vrede</h1>
    <p>De koning legde in zijn speech opnieuw de nadruk op de vrede...</p>
</div>

Er kan maar één element op de ganse pagina aangeduid worden met hetzelfde id!

# Inline-element <span>

Om een stukje tekst in een element op te nemen zonder hieraan extra betekenis te geven, kan je gebruikmaken van het element <span>. Het gaat om een inline-element en voegt dus nergens witruimte toe. Het wordt vaak gebruikt om specifieke opmaak toe te passen op een zelfgekozen categorie van woorden of zinnen. Zo zou je alle persoonsnamen in een tekst kunnen omringen met <span> elementen om ze later een aparte opmaak te geven.

<p>Toen <span class="naam">Sofie</span> aan de deur belde,
   kwam <span class="naam">Bert</span> snel opendoen.</p>

Aan <span> elementen wordt vaak een class-attribuut toegevoegd om er later naar te referen voor de opmaak. Meerdere elementen mogen dezelfde class toegewezen krijgen.

# Semantische elementen

Naast structurele elementen bestaan er ook semantische elementen. Bij semantische elementen draait het louter om de betekenis van de inhoud tussen de openings- en sluitingstag. Ze geven betekenis aan tekst en schetsen de layout (zonder opmaak of vormgeving). De gebruiker merkt hier weinig of niets van, maar schermlezers en zoekmachines krijgen op deze manier hulp bij het interpreteren van de inhoud. Zo zal een schermlezer weten wanneer een woord moet gelezen worden met sterke nadruk of weet een zoekmachine dat een bepaalde paragraaf adresgegevens bevat. Veelvuldig gebruik van semantische elementen wordt dus sterk aangeraden!

# Betekenis geven aan tekst

We behandelen in dit hoofdstuk de belangrijkste semantische elementen voor het geven van betekenis aan tekst.

# <strong>

Het inline-element <strong> legt een sterke nadruk op een woord of zin. Vergelijk het met de klemtoon leggen op iets in gesproken taal. Schermlezers zullen dit voor <strong> elementen ook doen.

<p><strong>Pas op!</strong>: de deur sluit automatisch!</p>
<p>In dit park zijn honden <strong>niet</strong> toegelaten!</p>

# <em>

Je kan ook subtiele nadruk leggen op woorden met het inline-element <em>. Ze wijzigen vaak de eigenlijke betekenis van een woord door bijvoorbeeld de intonatie of klemtoon lichtjes te veranderen. Schermlezers zullen proberen de juiste intonatie te kopiëren.

Bekijk het volgende voorbeeld om dezelfde zin op drie verschillende manieren van betekenis te veranderen door het gebruik van subtiele nadruk.

<p><em>Ik</em> vind dat HTML gemakkelijk is.</p>
<p>Ik vind dat <em>HTML</em> gemakkelijk is.</p>
<p>Ik vind dat HTML <em>gemakkelijk</em> is.</p>

# <b>

Het inline-element <b> duidt op sleutelwoorden, productnamen, ... Omdat het geen duidelijk beschreven betekenis heeft wordt het gebruik van <b> minder aangeraden, vooral als een ander semantisch element geschikter is. Traditioneel werd dit element gebruikt om tekst in het vet te zetten, maar sinds de splitsing van structuur en opmaak (HTML en CSS) is het niet meer de bedoeling dit element hiervoor te gebruiken.

<p>Volgende week begint het nieuwe seizoen van <b>The Simpsons</b>.</p>

# <i>

Het inline-element <i> duidt op gedachten, technische termen of woorden uit een andere taal. Het wordt cursief weergegeven, maar zoals bij het <b> element is het niet de bedoeling het voor dit doel te gebruiken. Denk steeds aan de betekeniswaarde!

<p>De superfamilie van de bijen (<i>Apoidea</i>) zijn insecten die behoren
   tot de orde van de vliesvleugeligen (<i>Hymenoptera</i>).<p>
<p>Op het menu staan Oosterse gerechten zoals <i>Nasi Goreng</i> en <i>Uru­ma­ki sus­hi</i>.</p>

# <address>

Het blokelement <address> duidt op contact- of auteursinformatie. Het is een belangrijk element voor zoekmachines, omdat ze meer en meer snelle informatie tonen bij de zoekresultaten, onder meer over de locatie of contactinformatie van een bedrijf. Het element wordt vaak in de footer van een pagina gebruikt of op het einde van een artikel.

<address>
    Fun Interactive<br>
    Plezierstraat 44<br>
    2235 Hulshout
</address>

Willekeurige vermeldingen van adressen die niets te maken hebben met de pagina horen niet thuis in een <address> blok.

# <cite>

Het inline-element <cite> duidt op een referentie naar een creatief werk. Voorbeelden van creatieve werken zijn:

• Een boek
• Een TV-serie
• Een toneelstuk
• Een schilderij
• Een forumbericht
• ...

<p>De technieken worden verder beschreven in 
   het boek <cite>Strips tekenen voor beginners</cite>.</p>
<p>De lach van de <cite>Mona Lisa</cite> is mysterieus.</p>

# Citaten

Voor het opnemen van citaten in tekst bestaat een inline- en blokelement: <q> en <blockquote>. De bron van het citaat wordt opgenomen in het attribuut cite en moet een geldige URL zijn. Gebruik van het attribuut wordt sterk aangeraden en geeft de nodige informatie over de bron van het citaat aan zoekmachines. Gebruikers zien de bron echter niet in de tekst staan!

Verwar het attribuut cite niet met het element <cite>.

# <q>

Een kort citaat dat middenin een alinea gebruikt wordt kan met het inline-element <q> afgebakend worden.

<p>Volgens Wikipedia <q cite="https://nl.wikipedia.org/wiki/Egyptische_kalender">
   werd in het oude Egypte een kalenderjaar verdeeld in drie seizoenen
   van 120 dagen</q>.</p>

# <blockquote>

Het blokelement <blockquote> wordt gebruikt voor langere citaten die in een apart tekstblok worden weergegeven.

<blockquote cite="http://laatjevaccineren.be/laat-griep-deze-winter-in-de-kou-staan">
    Griep treft elke winter 1 op de 10 mensen. Meestal genees je vanzelf,
    maar bij sommige risicogroepen kan griep ernstige gevolgen hebben. Ouderen,
    zwangere vrouwen en mensen met gezondheidsproblemen zoals diabetes of
    een ziekte van longen, hart, lever of nieren laten zich daarom het best vaccineren.
</blockquote>

# <abbr>

Het inline-element <abbr> duidt op een afkorting (abbreviation) die gebruikt wordt in een zin. Browsers geven dit vaak standaard weer met een stippenlijn onder de tekst. De betekenis van de afkorting kan worden opgenomen in het attribuut title. De gebruiker krijgt de betekenis te zien als hij of zij met de muis over de afkorting blijft hangen.

<p>Ik leer wekelijks meer over <abbr title="Hypertext Markup Language">HTML</abbr>.</p>

# <sup> en <sub>

Super- en subscript worden aangeduidt met de inline-elementen <sup> en <sub>. Superscript plaatst tekst hoger in de lijn (zoals bij een machtverheffing) en subscript plaatst de tekst lager in de lijn (zoals bij chemisch element).

<p>Het resultaat van 2<sup>3</sup> is 8.</p>
<p>Hij kwam aan op de 5<sup>de</sup> plaats.</p>
<p>H<sub>2</sub>O is de chemische notatie voor water.</p>

# <ins> en <del>

Revisies (tekstaanpassingen) worden aangeduid met de inline-elementen <ins> (insert) en <del> (delete). Het gaat steeds om een vergelijking met een vorige versie van de tekst. Het laat de gebruiker weten dat er een stukje tekst toegevoegd, verwijderd of vervangen werd.

<p>Het evenement gaat door op woensdag <del>en vrijdag</del>.</p>
<p>De leden van de ouderraad zijn: Stefan, Tanja, <ins>Geert</ins> en Sophia.</p>
<p>De prijs van het kledingstuk is <del>&euro;20</del> <ins>&euro;14</ins>.</p>

# <small>

Het inline-element <small> duidt letterlijk op de kleine lettertjes van een stukje tekst. Denk hierbij aan de kleine lettertjes van een contract of bijsluiter. Het kan ook gebruikt worden om een auteur te vermelden op het einde van een artikel, zoals dit in een magazine of krantenartikel wordt gedaan.

<p>De prijs bedraagt &euro;90.<br>
   <small>Extra kosten voor verzending kunnen aangerekend worden.</small></p>

# <time>

Het inline-element <time> markeert een stukje tekst als een moment in de tijd. Het kan gaan om een datum of exact tijdstip.

<p>De musical start om <time>20:15</time></p>

Je kan het tijdstip ook zeer specifiek aanduiden via het datetime attribuut. Door dit te doen geef je aan apparaten de mogelijkheid het tijdstip exact in te lezen en bijvoorbeeld te gebruiken voor een nieuwe afspraak in de agenda of het chronologisch ordenen van gegevens. De waarde van het datetime attribuut moet beantwoorden aan specifieke regels voor de tijdsnotatie. De notatie ziet er als volgt uit:

YYYY-MM-DDTHH:MM:SS.DD±HH:MM

• YYYY staat voor het jaar, bv. 1998
• MM staat voor de maand, bv. 04
• DD staat voor de dag, bv. 23

Een eenvoudige datum ziet er dan als volgt uit: 1998-04-23.

Met de T wordt het begin van een tijdstip aangeduid. De T mag ook vervangen worden door één spatie.

• HH staat voor het uur, bv. 16
• MM staat voor de minuten, bv. 45
• SS staat voor de seconden, bv. 20
• DD staat voor milliseconden, bv 001 voor 1 milliseconde

De + en - duiden op de tijdszone. Het gebruikt als notatie en referentie de UTC (Universal Coordinated Time) standaard. De standaard komt overeen met de GMT (Greenwich Mean Time) tijdszone. België ligt dus in UTC +01:00.

Seconden en milliseconden mogen worden weggelaten als ze gelijk zijn aan 0.

Het tijdsformaat kan ook gebruikt worden voor het noteren van een periode, zoals 2 weken, 4 maanden of 6 uur. De notatie hiervan komt niet aan bod in dit hoofdstuk.

Enkele voorbeelden van de verschillende notaties:

<h2>Dag, maand en jaar</h2>
<p><time datetime="1950">Het jaar 1950</time><br>
<time datetime="1950-06">Juni 1950</time><br>
<time datetime="1950-06-02">2 juni 1950</time></p>

<h2>Tijdstippen</h2>
<p><time datetime="14:00">14:00u</time><br>
<time datetime="14:00-05:00">14:00u in New York</time></p>

<h2>Combinatie</h2>
<p><time datetime="1950-06-02 14:00">2 juni 1950 om 14:00u</time></p>