Semantiek - Waarom zou je?

Introductie

Deze why-to is geschreven omdat ik niet op de hoogte ben van een Nederlandstalige why-to over semantisch HTML.
Deze why-to is geschreven voor mensen die HTML al onder de knie hebben, maar niet weten waarom ze zouden overstappen en het aanleren van semantische HTML.

Als je...

dan is dit document iets voor jou.

Dit document vertelt je niet hoe je een site met een automemagische knop omzet naar semantische HTML. Het vertelt je ook niet hoe je je eigen layout voor elkaar krijgt. Het vertelt ook niets over de problemen met cross-browser CSS. Ook het belang van doctype's, meta-tags, abbr- en andere tags wordt niet uitgelegd.
Dit document legt alleen uit waarom je semantische HTML zou will gebruiken. Hierna zul je zelf aan de slag moeten gaan met tutorials, guidelines etc.

Succes, en veel plezier.

De geschiedenis van HTML

HTML is eind jaren '80 bedacht door Tim Berners-Lee. Tim was bezig met SGML, en heeft daar een subset van gemaakt; HTML. De reden voor de subset was onder andere om de complexiteit van SGML in greep te houden en de wetenschappers (voor wie HTML voor een goed deel bedacht was) zich bezig konden houden met de inhoud, en niet met de weergave.

In de jaren '90 heeft het internet een enorme groei doorgemaakt. Aangezien het internet door een steeds grotere groep gebruikers werd ontdekt, en het maken van websites een echte tak van inkomsten werd, werd het ontwerpen van grafisch fraaie en gebruikersvriendelijke websites een noodzaak. De sites werden steeds groter, en het navigeren steeds lastiger. Ook maakten reclamebureaus ontwerpen die op dat moment zeer moeilijk te realiseren waren.

Om deze nieuwe wensen op het gebied van het grafisch weergeven van de informatie tegemoet te komen, is het gebruik van tabellen voor het positioneren van elementen begonnen. Indien men een 3-vlaks verhouding wilde, maakte men een tabel met 1 rij en 3 cellen; simpel, en begrijpelijk.

Naast het misbruiken van tabellen voor het positioneren van elementen, hebben de webdevelopers meer gedaan om aan de wensen van de klanten te voldoen. Ze hebben hierbij de mogelijkheden van HTML gerekt en gestrekt, waarbij 1 aspect langzaam maar zeker steeds minder belangrijk werd; de semantiek.

De komst van CSS

In 1998 heeft het W3C de CSS standaard in het leven geroepen. Indertijd vooral geroemd om het makkelijker te maken de visuele aspecten van websites te beheren, bracht deze de mogelijkheid om een webpagina te stijlen door elementen (een paragraaf, een lijst etc.) te selecteren en daar de attributen van te wijzigen.

Door het toevoegen van de div- en span-tag kon men elementen groeperen en positioneren & stijlen. Tabellen waren niet meer nodig; een element kon op elke willekeurige plaats geplaatst worden. Ook konden elementen bovenop elkaar geplaatst worden.

Toen CSS aangekondigd werd, hebben de browsers deze standaard overgenomen. Men had echter nu 2 mogelijkheden in 1; ouderwetse HTML, en de nieuwe HTML met CSS.
Om dit probleem te overkomen heeft men de interne werking aangepast, en is men voor alle webpagina's CSS gaan gebruiken. In de browser zijn een aantal stylesheets ingebakken voor de verschillende HTML versies.

De interne stylesheet zorgt er ook voor dat de elementen weergegeven worden zoals ze dat worden. Een heading is groot, een lijst staat onder elkaar en een emphasized stuk tekst is schuin gedrukt. Ook de afstanden tussen de elementen worden door de interne stylesheet bepaald.

Een van de voordelen van CSS is de mogelijkheid om stylesheets aan een medium te koppelen. Zo kan je een pagina voor het scherm stylesheet A laten gebruiken, maar bij het printen stylesheet B.
De gebruiker kan je dan een betere printversie aanbieden, bijvoorbeeld zonder navigatie-items of andere poespas - maar wel met een duidelijke URL waar het document vandaan komt, en hoe het document op de site terug te vinden is.

Daarnaast is de C van CSS erg handig. Door de Cascading eigenschappen kun je je opmaak logischer in elkaar zetten (eerst de body, dan de koppen etc.), en kun je meerdere stylesheets over elkaar heen leggen.

Semantiek

De van Dale leert ons;

se·man·tiek (de ~ (v.))
1 leer van de betekenis van de woorden en woordgroepen => betekenisleer

In andere woorden; semantiek is vertelt ons wat woorden en woordgroepen (bv. zinnen) betekenen.

HTML en semantiek

In het geval van HTML komt het erop neer, dat men de inhoud (content) van de webpagina markeert (de markup) om aan te geven wat die inhoud betekent. Een voorbeeld. De fiets van piet van pa. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce arcu. Proin eget neque. Donec adipiscing, mi nec condimentum aliquet, mi lorem fermentum erat, sed vestibulum orci libero sed wisi. Nullam lobortis ipsum nec odio. Etiam nec elit in metus feugiat imperdiet. Maecenas dictum volutpat nunc. Pellentesque blandit orci a felis. Mauris risus justo, consectetuer ac, pulvinar eu, vehicula eu, lorem. In aliquet luctus dui. Donec euismod. Sed blandit dictum lectus. Vestibulum nec ante vel risus euismod sagittis. Etiam convallis, orci quis gravida consectetuer, lorem sapien pharetra leo, in volutpat velit risus eu turpis. Sed ultricies accumsan libero. In hac habitasse platea dictumst. Vivamus volutpat elit a odio. Je ziet een titel en een stuk tekst. In HTML noemen we dat een heading, en een paragraaf. Dus: <h1>De fiets van piet van pa.</h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce arcu. Proin eget neque. Donec adipiscing, mi nec condimentum aliquet, mi lorem fermentum erat, sed vestibulum orci libero sed wisi. Nullam lobortis ipsum nec odio. Etiam nec elit in metus feugiat imperdiet. Maecenas dictum volutpat nunc. Pellentesque blandit orci a felis. Mauris risus justo, consectetuer ac, pulvinar eu, vehicula eu, lorem. In aliquet luctus dui. Donec euismod. Sed blandit dictum lectus. Vestibulum nec ante vel risus euismod sagittis. Etiam convallis, orci quis gravida consectetuer, lorem sapien pharetra leo, in volutpat velit risus eu turpis. Sed ultricies accumsan libero. In hac habitasse platea dictumst. Vivamus volutpat elit a odio.</p>

Indien we de content van een webpagina niet voorzien van tags (markeringen), dan zal de browser alles als 1 brok tekst laten zien. Om de tekst witregels, koppen en lijsten te laten worden gebruiken we dus tags.

Maar semantiek is meer dan content markeren. Het is ook het juist markeren wat belangrijk is. Feitelijk is het markeren met tags het proces van het toevoegen van meta-informatie aan de inhoud. Meta-informatie maakt geen onderdeel van de inhoud, maar beschrijft de inhoud.

HTML, CSS en semantiek

Nu weten wat HTML, CSS en semantiek zijn, gaan we het eens tesamen bekijken.

De scheiding van inhoud en weergave

We hebben nog 1 ding niet behandeld, en dat is de scheiding van inhoud en weergave.
Als je ooit een klant (of een reclamebureau van de klant) gehad hebt die elke paar dagen iets aan de site veranderd willen hebben, dan zul je wel begrijpen wat het betekent als je de presentatie in je HTML document verwerkt. Zo wil men een andere afmeting voor het logo, toch maar nummers in plaats van bullets, de tekst een ander lettertype et cetera. Voor elke wijziging moet elk document aangepast worden - een bijzonder tijdrovende klus.

Met CSS en semantische HTML is het mogelijk om die scheiding aan te brengen. Door de presentatielaag buiten je HTML-document te houden (en dus in de CSS) kan je de weergave van de documenten op 1 plek regelen. Je hoeft dus niet elk HTML-document aan te passen voor een nieuw lettertype etc.

Korte samenvatting

Goed, we hebben nu het volgende behandeld.

  1. CSS kan gebruikt worden om de weergave van elementen aan te passen.
  2. Stiekem gebruikt elke webpagina CSS, zelfs al is er geen specifieke CSS aan het document gekoppeld door de webdeveloper
  3. HTML is het markeren van content met HTML-tags om aan te geven wat de tekst betekent.

Dit betekent dat goed en wel beschouwd, het feit dat een stuk tekst in strong-tags wel wordt weergegeven als een bold-tag (door de ingebouwde CSS), maar dat het een totaal andere tag is. En een andere tag, betekent dat de tekst iets anders betekent.

Dit is het essentiële verschil tussen HTML "vroeger" en HTML "nu". We zijn niet meer beperkt tot de weergave mogelijkheden die van te voren gedefinieerde HTML-tags ons geven. We kunnen de inhoud markeren om aan te geven wat het betekent (de inhoud van meta-informatie voorzien), en daarmee aan de slag gaan.

Nu we weten dat we niet beperkt zijn bij het visualiseren van een webpagina door tabellen, bold-, italic- en andere tags, kunnen we gaan kijken welke tags gebruikt kunnen worden, die je nu waarschijnlijk helemaal nooit gebruikte. Denk daarbij aan...

En uiteraard nog veel meer. Om dit wat concreter uit te leggen neem ik een voorbeeld; de frontpage van nl.tv.

HTML, CSS en semantiek in de praktijk

Vanaf dit punt is het gebruiken van FireFox, of een andere browser die instaat is een pagina volgens alleen de interne stylesheet weer te geven sterk aan te raden.

Zoals gezegd, gaan we nl.tv bekijken om te zien hoe we een pagina semantisch kunnen taggen, en vervolgens stijlen.
Open nl.tv met je browser, en kijk eens rond. Je ziet ...

  1. Bovenaan een logo
  2. Links een navigatie-menu
  3. In het midden de content, verdeeld over kolommen
  4. Per kolom een header, uitleg en een lijst van filmpjes
  5. Rechtsboven een hoofdnavigatie-lijst

De ervaren HTML-in-tabellen bouwer zou dit zonder problemen oplossen met een tabel. Bovenaan een tabelcel die over alle kolommen gaat met een afbeelding erin, en de rest in 1+3 kolommen verdeeld.
Simpel, toch?

Simpel, maar niet erg handig. Als een element verplaatst moet worden, betekent dat graven in de broncode en het eindeloos pielen met cellen…
Een ware nachtmerrie. Om nu te zien hoe het document echt in elkaar zit kan men de standaard gekoppelde stylesheet uitschakelen. Voor FireFox kan men dit doen onder

Zoals je nu ziet, staat alles onder elkaar en komt de volgorde van de elementen niet overeen met hoe deze met stylesheet worden weergegeven. Ook ziet men ineens allemaal lijsten, koppen etc.

Wat in eerste instantie niet snel zal opvallen, is dat alles wat niets met de inhoud te maken heeft, niet in de HTML broncode staat. Denk hierbij aan afbeeldingen zoals het logo, maar ook de bullets van lijsten en de versieringen van de koppen.
Daarnaast zijn er elementen die in de normale weergave helemaal niet naar voren komen; zo is de heading-1 "nl.tv" helemaal niet terug te vinden in de gestijlde versie.

En hoe is dat gedaan?

Alles is gedaan met HTML en CSS. We zullen een aantal zaken behandelen om je een idee te geven van wat je kunt doen om een écht semantisch correct document te bouwen.

Verwijderen van visuele elementen uit de broncode

Door visuele elementen uit de broncode te halen, en in de CSS te zetten verbeteren we niet alleen de semantiek van het document; we scheiden ook inhoud en weergave - en zoals we al gezien hadden heeft dat de nodige voordelen.

Afbeeldingen omzetten naar tekst - en terug

Zoals gezegd, is het logo bovenaan de pagina in de ongestijlde versie niet terug te vinden. Dit duidt er uiteraard op dat die afbeelding zich in de stylesheet bevindt. Ook is er een nl.tv-heading in de bron die niet terug te vinden is. Dat komt, omdat de heading gestijled wordt als een afbeelding!
We gaan hier geen concrete code geven (dat kan je zelf opzoeken), maar er zijn diverse mogelijkheden. Denk hierbij aan het geven van afmetingen aan de heading + lettergrootte op 0 zetten en een achtergrondafbeelding te plaatsen. Ook mogelijk is een truukjes uit te halen met het boxmodel van CSS; we maken de heading 0 pixels hoog maar geven wel een padding op, waardoor de achtergrondafbeelding toch zichtbaar wordt. De tekst laten we dan met overflow:hidden 'verdwijnen'.
Er zijn meer mogelijkheden, maar die zal je vast zelf kunnen bedenken!

Lijsten hebben een andere bullet

Zoals de lijst van filmpjes per kanaal.
Dit is wel heel eenvoudig; in CSS is het mogelijk om de bullet met list-style-image een afbeelding te laten zijn.
Niet alles is moeilijk ;)

In dit geval, echter, hebben we gekozen voor een achtergrondafbeelding en een vaste hoogte per lijst-item. Dit komt omdat we een titel van een filmpje hebben, met wat gegevens en een afbeelding - een goed moment om een DL te gebruiken en de relatie tussen de titel en de bijbehorende gegevens te koppelen.

Versierde headings

Hier is eenzelfde techniek toegepast als bij het logo. Hier is nog duidelijker wat we bereiken met een gestijlde header, in plaats van een afbeelding.
Zoekmachines gebruiken bijvoorbeeld geen OCR om uit te vogelen wat er in een afbeelding staat, en slaat hem dus gewoon over. En dat is slechts één van de voordelen van deze methode.

Lijsten, lijsten, lijsten

Goed en wel bekeken heeft nl.tv vele lijsten; een lijst voor de navigatie, een lijst van filmpjes - en een lijst van hoofdnavigatie-linkjes.

Maar die lijst is niet onder elkaar?
Nee, maar dat hoeft toch ook niet? Als we terug denken, stelden we al; De interne stylesheet zorgt er ook voor dat de elementen weergegeven worden zoals ze dat worden … een lijst staat onder elkaar ….
Alles wat de interne stylesheet 'aan' zet, kunnen wij weer 'uit' zetten. Door de lijst-items een display:inline te geven worden ze niet langer als block, maar als inline element gezien.

En nog meer lijsten…

Er is nog veel meer mogelijk met lijsten. Je kunt er uitklapmenu's mee maken, grafische menu's etc. etc.
Met de DL kan je normaal gesproken een termenlijst opzetten. Maar het is niet alleen een 1:1 relatie-lijst; het is een n:n relatielijst. Nul of meer dt-tags kunnen gevolgd worden door nul of meer dd-tags.
Zo kan je bijvoorbeeld een gastenboek in dt- en dd-tags plaatsen. De naam van de auteur in de dt-tag en het bericht in de dd-tag. Zo heb je een relatie gelegd tussen de auteur, en het bijbehorende bericht.

De voordelen van semantische HTML

En waarom zou je nu iets gaan doen met deze methode van HTML-documenten opstellen? Tabellen werken ook, en je moet wellicht iets helemaal nieuws leren; CSS als scheiding van inhoud en weergave, in plaats van het stijlen van de inhoud.

De voordelen op een rijtje.

Daarnaast zijn er vele mensen op deze aarde die niet een 'gewone' browser gebruiken. Zij zijn bijvoorbeeld gehandicapt, en gebruiken een speciale browser die het document voorleest, of hele grote letters en knoppen biedt. Dergelijke browsers kunnen veel beter omgaan met semantisch correcte HTML-documenten. Zo kunnen zij afkortingen beter uitspreken, de documentstructuur analyseren en andere truuken uithalen.

Conclusie

Hopelijk heeft dit document je iets kunnen vertellen over het nut van semantische HTML, en wat voorbeelden gegeven hoe je ermee aan de slag kan gaan.
Nog eenmaal de kernpunten herhaald.

En nu?

En nu, waarschijnlijk terug naar de boeken. Lees de HTML-definities van het W3C, en kijk welke tags er bestaan en wat hun doel is.
Kies vervolgens een HTML versie (bv. 4 strict) en probeer het eens. Jaag je document door de html validator van het W3C, en zie waar je nog kan verbeteren.

Interessante links

Michiel Roding, 2005