“Mijn site valideert bij W3C qua XHTML en CSS code, dus ik voldoe aan de standaard!” Juist, je code voldoet, maar enkel en alleen aan de syntax van de standaard. Helaas zegt dit niks over de semantiek van je code. In dit artikel wordt dieper ingegaan op het gebruik van semantiek in je XHTML code.

In theorie

Wat is semantiek eigenlijk? Letterlijk spreekt de Dikke van Dale 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

Dat is feite waar het om draait. Semantiek van XHTML elementen is niets meer en niets minder dan dat je alle XHTML-elementen zó gebruikt dat de betekenis van de elementen volledig tot hun recht komen. Dit om de interpretatie door systemen (lees: browsers, search engine bots, e.d.) te optimaliseren. Aan de hand van de onderstaande voorbeelden wordt het verschil tussen semantisch correcte en semantisch incorrecte code duidelijk.

Voorbeelden

Om het verschil tussen semantisch correcte en incorrecte code te laten zien geef ik je deze twee identiek ogende voorbeelden. Eén beeld zegt immers meer dan duizend woorden. Of toch niet?

Menu

Content titel

Menu item 1 Menu item 2

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Content subtitel Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Voorbeeld 1.

Voorbeeld 2.

Zoals je in de bovenstaande voorbeelden ziet, is op het eerste oog geen verschil te merken tussen semantisch incorrecte of correcte code. Totdat we de onderliggende code te voorschijn halen. Zie hier onder de verschillen. De onderstaande code is gereduceerd tot enkel XHTML, zodat er geen stijlattributen van CSS te zien zijn. Is de content nog steeds zo duidelijk?

Voorbeeld 1 – Zonder opmaak.

Voorbeeld 2 – Zonder opmaak.

Voorbeeld 1 is zonder opmaak ineens een stuk onduidelijker dan voorbeeld 2. Het onderscheid tussen koppen, lijsten en tekst is totaal verdwenen. De borders van de tabel en de gekozen positionering (door middel van een tabel) komen de leesbaarheid ook niet ten goede.

In voorbeeld 2 is de positionering naast elkaar verdwenen, terwijl het onderscheid tussen koppen, lijsten en tekst goed zichtbaar is gebleven. Zeg nu zelf: voorbeeld 2 leest toch veel lekkerder op een PDA, een smart phone of in Lynx?

<table>
  <tbody>
    <tr>
      <td>
        <span>Menu</span>
      </td>
      <td>
        <span>Content titel</span>
      </td>
    </tr>
    <tr>
      <td>
        <span>Menu item 1</span>
        <span>Menu item 2</span>
      </td>
      <td>
        <span>Lorem ipsum dolor sit amet, consetetur
        sadipscing elitr, sed diam nonumy eirmod  
        tempor invidunt ut labore et dolore magna
        aliquyam erat, sed diam voluptua. At vero eos  
        et accusam et justo duo dolores et ea rebum.
        Stet clita kasd gubergren, no sea takimata  
        sanctus est Lorem ipsum dolor sit amet.</span>
        <span>Content subtitel</span>
        <span>Lorem ipsum dolor sit amet, consetetur
        sadipscing elitr, sed diam nonumy eirmod  
        tempor invidunt ut labore et dolore magna
        aliquyam erat, sed diam voluptua. At vero eos  
        et accusam et justo duo dolores et ea rebum.
        </span>
      </td>
    </tr>
  </tbody>
</table>

Code voorbeeld 1. – Semantisch incorrect

<div>
  <div>
    <h1>Menu</h1>
    <ul>
      <li>Menu item 1</li>
      <li>Menu item 2</li>
    </ul>
  </div>
  <div>
    <h1>Content titel</h1>
    <p>Lorem ipsum dolor sit amet, consetetur
    sadipscing elitr, sed diam nonumy eirmod  
    tempor invidunt ut labore et dolore magna
    aliquyam erat, sed diam voluptua. At vero eos  
    et accusam et justo duo dolores et ea rebum.
    Stet clita kasd gubergren, no sea takimata  
    sanctus est Lorem ipsum dolor sit amet.</p>
    <h2>Content subtitel</h2>
    <p>Lorem ipsum dolor sit amet, consetetur
    sadipscing elitr, sed diam nonumy eirmod  
    tempor invidunt ut labore et dolore magna
    aliquyam erat, sed diam voluptua. At vero eos  
    et accusam et justo duo dolores et ea rebum.</p>
  </div>
</div>

Code voorbeeld 2 – Semantisch correct.

Hoe komt het toch dat voorbeeld 1 zonder opmaak er niet betekenisvol meer uitziet? Omdat er dus geen semantiek in de gebruikte code zit. Syntactisch is de code correct, maar we hebben veel gebruik gemaakt van <span> elementen in plaats van <h1>, <p> en <ul> elementen. Zonder stylesheets maakt de browser geen onderscheid meer tussen de verschillende <span> elementen. Voorbeeld 2 daarentegen gebruikt zowel syntactisch als semantisch correcte code om de content weer te geven. Een groepering van menu-elementen is opgenomen in een lijst, de titel heeft een <h1> element gekregen om nadruk te leggen op de titel. Paragrafen zijn als zodanig aangeduid. Zonder stylesheets kan de browser dit stukje XHTML nog steeds zo renderen dat de betekenis van de elementen duidelijk naar voren komt.

Semantisch correct. Wat levert het op?

Leuk die semantiek denk je misschien, maar wat is de toegevoegde waarde voor een klant? Een aantal voordelen.

Door semantisch correcte code te gebruiken zijn search engine bots beter in staat om de code op waarde te schatten. Door het gebruik van <hx> elementen plaats je nadruk op de woorden gebruikt in deze titels. Dit resulteert uiteindelijk in betere rankings in de search engines.

Verbeterde accessibility. Door het gebruik van semantiek verhoog je de toegankelijkheid en leesbaarheid van je code door text-only browsers, text-to-speech browsers en andere browsers die geen stylesheets ondersteunen.

Naast de voordelen voor de klant zijn er ook voordelen voor de ontwikkelaar. De code wordt immers meer zelfverklarend en is dus makkelijker te lezen en aan te passen door een ontwikkelaar. En dat resulteert in kortere ontwikkeltijden.

De praktijk

Helaas is het in de praktijk moeilijk om puur semantisch bezig te zijn in XHTML. Daar zijn diverse redenenen voor. Zo ondersteunen de huidige browsers niet allemaal alle elementen zoals deze zijn gedefinieerd in de XHMTL-standaard. Denk hierbij aan het element <abbr>, dat je – semantisch gezien – zou moeten gebruiken voor afkortingen. Helaas ondersteunt Internet Explorer dit element niet.

Daarnaast is CSS nog te beperkt om je XHTML helemaal zonder elementen op te maken die semantisch gezien weinig tot niets toevoegen aan je document, maar voor je lay-out nodig zijn om bepaalde dingen met CSS te kunnen oplossen.

En door de backward-compatibiliteit van de W3C XHTML standaarden mag je elementen zoals <b> en <i> nog steeds gebruiken en leveren ze ook nog valide code op. Het zou echter semantisch correcter zijn om hiervoor <strong> en <em> te gebruiken. In de XHTML DTD zijn <b> en <i> gedefinieerd als fontstyle entiteit en <strong> en <em> als phrase entiteit. Bij semantiek gaat het om de betekenis en niet de stijl, dus voegen <strong> en <em> meer betekenis toe aan je content, terwijl <b> en <i> betekenis voor je fontstyle toevoegen. Daardoor is het gebruik van <strong> en <em> semantisch beter.

De toekomst

De bewustwording van gebruik van semantiek in XHTML code is volop aan de gang en wordt door meer en meer ontwikkelaars omarmd, ondermeer door de bovenstaande voordelen. Maar uiteindelijk moet het gebruik van semantiek meer worden gezien als een opstap naar een volgende fase van het World Wide Web; het Semantische Web. Vergelijk de onderstaande definitie maar eens met die van de Dikke van Dale:

“The Semantic Web is an extension of the current web in which information is given well-defined meaning, better enabling computers and people to work in cooperation.” — Tim Berners-Lee, James Hendler, Ora Lassila, The Semantic Web, Scientific American, May 2001

Gebruikte bronnen

• W3C XHTML Specs
• W3C CSS Specs
• W3C Semantic Web

Meer lezen

• Dive into mark: Won’t somebody please think of the gerbils?
• Stopdesign: On standards and Semantics
• Simplebits: SimpleQuiz

• Home
• Artikelen
• Colofon