Semantiek

Door Arjan op 19 augustus 2007

Trefwoorden: .

Mede naar aanleiding van een reactie op de vraag naar artikeltips van de lezer en de vraag van Erik-Jan wanneer je nu wel of niet tabellen mag gebruiken heb ik maar besloten om deze blog over semantiek te schrijven.

Wat is semantiek eigenlijk? Meneer van Dale zegt het er het volgende over:

se?man?tiek (de ~ (v.))
1 leer van de betekenis van de woorden en woordgroepen => betekenisleer
2 [fil.] leer van de interpretatie van formele systemen

Duidelijk lijkt mij. Wat houdt semantiek dan in op het gebied van het web, of beter gezegd: op het gebied van HTML?

Als we het hebben over semantiek in combinatie met HTML dan bedoelen we dat je de elementen moet gebruiken waarvoor ze bedoeld zijn. De semantische waarde van een element geeft aan waarvoor je het element moet gebruiken. Simpele voorbeelden hiervan zijn een <h1> voor een koptekst, een <p> voor een paragraaf of aan <a> voor een link. Dit klinkt allemaal vrij logisch, maar helaas zien we nog maar al te vaak dat kopteksten door middel van een <font> element ‘groot’ worden gemaakt of dat paragrafen met <br>’s worden opgemaakt.

Tabellen

Bovenstaande voorbeelden zoals paragrafen of kopteksten zijn misschien inmiddels voor de meesten wel duidelijk, maar net als Erik-Jan zijn er nog steeds veel mensen die de vraag stellen of je nog tabellen mag gebruiken. Tabellen zijn namelijk vaak misbruikt voor het opmaken van je website. En omdat in veel artikelen over semantiek of webstandaarden tabellen vaak als hoe-het-niet-moet-voorbeeld worden genoemd is de vraag best te begrijpen. Maar het antwoord is vrij simpel: natuurlijk mag je tabellen nog gebruiken. Sterker nog, als het nodig is moet het zelfs. Maar wanneer is het dan nodig? Nou tabellen zijn, net als dat je ze in Excel of Word gebruikt, voor het weergeven van data. Bijvoorbeeld een vergelijkingsoverzicht van bepaalde producten, of het weergeven van financiële gegevens. In ieder geval niet om blokken op je pagina te definiëren voor de layout; daar hebben we <div>’s voor.

Semantiek gaat verder

Semantiek gaat m.i. echter ook verder dan de HTML alleen. Als we namelijk het voorbeeld van de kopteksten die door middel van <font> elementen worden opgemaakt bekijken dan zien we hier een ander probleem, namelijk (het ontbreken van) de scheiding tussen structuur en opmaak. Het <font> element heeft niet alleen geen enkele semantische waarde, maar hier wordt ook een HTML element gebruikt om tekst op te maken. En dat is niet de bedoeling. HTML gebruiken we namelijk alleen voor de structuur. Dus de scheiding tussen kopteksten, paragrafen, lijsten etc. Wat doen we dan met de opmaak? Die definiëren we met CSS.

Twijfelgevallen

Een minder voor de hand liggend voorbeeld is het gebruik van het <strong> element. Je zult misschien wel denken dat dit element niet meer gebruikt mag worden, omdat deze de tekst ‘vet’ maakt. Maar dat is onjuist. Het <strong> element gebruik je om nadruk aan een tekst te geven. Waarom wordt ie dan vet? Dat is de interpretatie van de browser(s) en dat komt denk ik doordat hij in de plaats is gekomen voor het <b> element (net als <em> is gekomen voor <i>). Gebruik dus het <strong> (of <em>) element alleen als je specifiek nadruk wilt geven aan een tekst, niet puur alleen voor opmaaktechnische redenen. Is dit wel het geval gebruik dan een <span> element in combinatie met CSS.

Conclusie

De belangrijkste conclusie bij het semantisch opbouwen van je site is gewoon dat je goed moet nadenken. Wat zet ik hier neer? Wat voor element past daarbij? Is de verhouding van kopteksten op mijn pagina op deze manier goed? Geef ik zo het juiste gewicht mee aan deze tekst?

Dat dit soort vragen discussies kunnen oproepen is dan uiteraard logisch. Want wat is nu het belangrijkste op je pagina? Dit blijven dingen waar je denk ik nooit een eenduidig antwoord op kunt geven. Het zal per site ook verschillen denk ik. Maar blijf gewoon nuchter nadenken en vraag anderen naar hun mening. Dan kom je vaak een heel eind.

Je kunt een reactie, achterlaten of een trackback van uw eigen site.

12 Reacties op “Semantiek”

  1. 19 augustus 2007 om 22:24
    killerog

    Ik ben geen fan van layout met tabellen, maar ik snap wel waarom men dat gebruikt. Het bestaat gewoon al veel langer waardoor het beter in de browsers werkt. Terwijl je voor div based layout vaak allerlei hacks en trucjes moet toepassen om hetzelfde resultaat te bereiken.

    Reageer
  2. 19 augustus 2007 om 22:46
    arjaneis

    Over het artikel… de titel is net iets te algemeen, ‘Semantische opmaak’ had beter gestaan. Ook zie ik dat je een element vaak met een tag verwart. Elementen en tags zijn verschillende dingen.

    Ik ben het niet helemaal eens met Killerog. Als je je verdiept in CSS en je er een beetje goed in wordt, kun je prima zonder tabellen een lay-out maken. Sterker nog, tabellen in tabellen in tabellen… vind je dat zelf lekker werken?

    Jammer ook dat veel mensen denken dat je dan ook ineens alleen maar divjes mag gebruiken. Ik heb ontwerpen gezien waarbij gewoonweg elk font en table element vervangen werd door een div element.

    Niet voor niets wordt semantische opmaak verplicht gesteld voor alle nieuw te bouwen overheid websites. Bestaande overheid websites moeten voor 2010 zijn aangepast aan dit kamer besluit. Meer daarover op http://webrichtlijnen.overheid.nl/.

    Reageer
  3. 19 augustus 2007 om 23:00
    Joost de Valk

    Mooi vervolg hierop zou zijn de combinatie van semantiek en microformats Arjan :)

    Reageer
  4. 19 augustus 2007 om 23:05
    Arjan

    @Killerog:
    daar ben ik het ook totaal niet mee eens. Als jij gewoon netjes je sit opbouwt volgende ‘de regels’ zul je merken dat je zo goed als geen hacks nodig hebt.

    Verder:
    2010 klinkt ver weg. Op zich mooi dat zo’n initiatief/regel er is, maar ik vraag me af waarom zoetis 3 a 4 jaar moet duren. Nu is het bekend dat overheidsinstanties niet de snelste zijn, maar het zou me niets verbazen als er 2010 weer nieuwe ontwikkelingen zijn waardoor de huidige regels overbodig zijn. En afgezien daarvan vraag ik me af in hoeverre dit nageleeft gaat worden. Krijg je boetes als je dit niet naleeft? Ik geloof er niks van.

    Reageer
  5. 20 augustus 2007 om 08:49
    André Scholten

    We zouden eigenlijk de regels voor de Engelse overheidssites hier over moeten nemen. Elke site dient verplicht (ondanks het woord guidelines) semantisch correct opgezet te worden met het in acht nemen van de regels van het WAI.

    Reageer
  6. 20 augustus 2007 om 09:51
    hayo

    doe mij eigenlijk maar die van de nederlandse overheid, andré: http://webrichtlijnen.overheid.nl/eisen-richtlijnen/richtlijnen/alle-richtlijnen/

    heb ik liever dan de engelse, en ze zijn nog uitgebreider ook ;)

    Reageer
  7. 20 augustus 2007 om 10:05
    Arjan

    de titel is net iets te algemeen, ‘Semantische opmaak’ had beter gestaan.

    Tsja, das best een grappig titel, want wat is opmaak? :-)

    Ik neem aan dat je daarmee het engelse ‘markup’ bedoelt, welke ik hier dus de structuur noem. Maar je ziet wel dat 99% procent van de NL’ers denk dat als je over ‘opmaak’ praat dat je het over uiterlijk/styling hebt. Nu zal het ‘webstandaarden-wereldje’ het wel snappen, maar is het juist niet het idee dat we heel NL willen aanspreken?

    Dus misschien is het handig als we dit soort termen eens definieren. Wat bedoelen we als het hebben over opmaak? Is dat hetzelfde als ‘structuur’, van het engelse ‘markup’?

    Zo ja, welke naam geven we het uiterlijk? In het engels zou je het hebben over styling, maar dat is niet echt NL.

    Iemand suggesties?

    Reageer
  8. 20 augustus 2007 om 14:09
    pieturp

    Persoonlijk vind ik dat de termen “opmaak” en structuur erg algemeen klinken. Als iemand bijvoorbeeld de term “html-opmaak” gebruikt denk ik “een bestand in html formaat”. “Goede html-opmaak” is dan het netjes uitlijnen (inspringen) van de html tags.
    Hetzelfde voor structuur: bestandsstructuur, navigatieboom, html-’indeling’… :-S
    Ik pleit voor de termen uiterlijk, semantiek en gedrag (dat laatste alleen in het geval van scripts).

    Reageer
  9. 20 augustus 2007 om 23:16
    killerog

    Volgens mij denkt iedereen nu dat ik nog met tabellen websites maak, maar dat is niet zo hoor :)

    Ik weet niet of iedereen dezelfde definitie van “hacks” als mij hanteert. Maar elke extra regel die ik moet typen omdat een browser niet aan de standaarden voldoet vind ik een “hack”.

    Nu ben ik pas ongeveer een jaar bezig met sites d.m.v. div’s op te maken en aangezien ik nog geen tientallen sites heb gemaakt zit ik vaak nog te stoeien met wat er nu weer verkeerd gaat. Ik moet dus vaak nog lange tijden zoeken voordat ik een goede oplossing heb gevonden als ik er zelf niet meer uitkom.

    Binnenkort ga ik daadwerkelijk aan de xhtml voor mijn eigen site beginnen en daar ga ik geen hacks toepassen die mijn css invalide maken. Ik wil wel eens zien hoe ik dan uitkom in IE :)

    Reageer
  10. 21 augustus 2007 om 13:15
    Sandra

    Nu ben ik pas ongeveer een jaar bezig met sites d.m.v. div’s op te maken

    Semantiek is iets anders dan je site opmaken in divs.

    Binnenkort ga ik daadwerkelijk aan de xhtml voor mijn eigen site beginnen en daar ga ik geen hacks toepassen die mijn css invalide maken. Ik wil wel eens zien hoe ik dan uitkom in IE :)

    Internet Explorer ondersteunt sowieso geen XHTML ;-), dus je kunt beter voor HTML 4.01 strict gaan.

    En stel dat je Internet Explorer 6 uit wilt sluiten, dan kan het nog wel te doen zijn zonder ‘hacks’ (of beter: conditional comments).

    Reageer
  11. 21 augustus 2007 om 21:44
    killerog

    Semantiek is iets anders dan je site opmaken in divs.

    Dat klopt, maar het is vaak wel het begin van (enigszins) semantisch bewustzijn.

    Internet Explorer ondersteunt sowieso geen XHTML ;-), dus je kunt beter voor HTML 4.01 strict gaan.

    Ik blijf niet in de vorige eeuw hangen omdat Internet Explorer dat zo graag doet ;), dit kan je nog makkelijk server-side handlen:

    < ?php
    if (stristr($_SERVER[HTTP_ACCEPT], "application/xhtml+xml"))
    {
    header("Content-Type: application/xhtml+xml; charset=UTF-8");
    echo('‘ . “\n”);
    }
    else
    {
    header(“Content-Type: text/html; charset=UTF-8″);
    }
    ?>

    Reageer
  12. 26 augustus 2007 om 01:25
    Pascal77

    We zouden eigenlijk de regels voor de Engelse overheidssites hier over moeten nemen. Elke site dient verplicht (ondanks het woord guidelines) semantisch correct opgezet te worden met het in acht nemen van de regels van het WAI.

    Dat is een Europese richtlijn die geldt voor elk Europees land.

    Reageer

Reageer!