Papieren huizen bouwen: Het nut van semantische HTML

Papieren huizen bouwen: Het nut van semantische HTML

geen css is als een huis bouwen met papierEen artikel van Daan Weijers over Semantiek

Op het forum ben ik de laatste tijd vaak discussies tegen gekomen over het gebruik van semantische html. Vaak was ik zelf de aanvoerder van deze discussies, en daarom heb ik aangeboden een artikel te schrijven voor HTML-site om het voor eens en altijd duidelijk te maken.

Wat is semantiek?

Voor we verder gaan, moeten we eerst de volgende vraag beantwoorden.
Wat is semantiek nou eigenlijk? Als ik op internet ga zoeken naar een definitie, kom ik het volgende tegen:

Door het gebruik van semantische HTML zorg je ervoor dat het doel van de content duidelijk word gemaakt in de juiste manier, zonder hier enige vorm van stijl aan toe te voegen.

Als je dus semantische HTML schrijft, moet je dus zorgen dat je de juiste elementen gebruikt. En dat is precies waar het over gaat. Het gebruiken van de juiste materialen.
Stel dat je je huis gaat verbouwen, en je krijgt de keuze tussen twee materialen; Papier en Baksteen. Die keuze is snel gemaakt toch? Baksteen natuurlijk.

Je krijgt tijdens het scripten van een pagina een keuze tussen twee technieken, het klinkt best logisch dat je hier dan ook de beste keuze zou maken. Maar nog steeds zijn er mensen die dat niet doen. Ze kiezen voor technieken die helemaal niet aansluiten op de bedoeling van de HTML die ze gebruiken, zoals een table die gebruikt word voor layout.

Een klassiek voorbeeld

Het bekendste voorbeeld van verkeerde semantiek is waarschijnlijk het argument tussen het gebruik van div-elementen of tables. Voor dat ik hier op in ga, zou ik graag een punt duidelijk maken.

Tables zijn niet verboden! Tables zijn niet verdoemd! Tables zijn niet slecht!

Zolang je ze maar op de juiste manier gebruikt! En daar gaat semantiek over.

Een vaak gebruikt argument dat tegen tables gebruikt word is “Tables zijn uit de tijd”, ik zeg onzin. Het gebruiken van tables voor layout is niet uit de tijd! Simpelweg, omdat het nooit ‘in’ de tijd is geweest! De table-tag was nooit bedoeld om een layout, een grid of een stramien te coden. De tag was gemaakt, en alleen voor dit doel, om tabellen te maken.

Dit betekent dat als je een table-tag gebruikt voor het opmaken van een layout, je semantisch gezien verkeerd bezig bent. Niet omdat het een zogenaamd ‘verouderde’ techniek is, maar gewoon omdat het nooit zo bedoeld was. Als het verouderd was hadden ze de tag wel uit de hele rits gehaald.

Content, opmaak en andersinds

Aan het begin van het leven van HTML bestond er nog geen CSS (Cascading Style Sheets). De opmaak van pagina’s werd toentertijd gedaan door het gebruiken van tags als font, center, enzovoorts en door het toevoegen van allerlei attributen aan de desbetreffende tag. Nu is er wel CSS, maar jammergenoeg zijn er nog steeds mensen die dit niet snappen.

Het nut van CSS is om je content op te maken, maar wat heeft dit nou te maken met semantische html? De genestelde scripter gebruikt de font tags gebruiken allang niet meer, en zo hoort het ook. Niet omdat deze technieken “verouderd” zijn, maar gewoon omdat ze semantisch niet correct zijn.
Waarom dan dit onderdeel? De truc zit hem in de zin de vorige zin; “het nut van CSS is om je content op te maken.”
Daar is CSS voor bedoeld; Opmaak. Je HTML? Die is bedoeld voor content. Javascript? Dat is bedoeld voor (interactieve) scripts. Het is semantisch correct om deze allemaal gescheiden te houden, en te bewaren in aparte mappen/bestanden.

Als je goede semantische HTML wilt hebben, moet je er dus voor zorgen dat je geen (of in ieder geval zo min mogelijk) inline/internal styles gebruikt, maar naar je verschillende stijlbladen linkt doormiddel van het link-element in HTML.

Ook als je Javascript gebruikt is het slim om te zorgen deze gescheiden te houden van je HTML, gewoon omdat HTML niet bedoeld is voor scripts maar voor de content die je je bezoeker wilt voorschotelen.
Als je dit doet zal je .html file er niet alleen schoner uit zien, maar zal hij ook semantisch correcter zijn.

De juiste elementen gebruiken

In een (Engels) artikel over Semantiek, geschreven door Chris Coyier, neemt de schrijver een deel van een site en de bijbehorende code. Uit zijn artikel blijkt dat de code die gebruikt werd weliswaar niet verkeerd was en gewoon goed werkte, maar semantisch niet in orde was. Dit vond ik zelf een heel simpel voorbeeld van de “verkeerde” elementen gebruiken.

Een klassiek (eerder genoemd) voorbeeld hiervoor is het div/table geval. Maar er zijn nog genoeg andere voorbeelden waar je misschien nog niet aan had gedacht.

Er zijn verschillende manieren om iets of iemand te quoten. De correcte tags die hiervoor gebruikt moeten worden zijn <q> en <blockquote>. Het verschil ligt hem in de lengte van de quote. Voor een korte quote waarbij het toch nodig is aan te duiden dat het een quotatie betreft gebruik je het q-element. Voor de langere quotaties die meerdere regels betreffen is het blockquote-element beter op zijn plaats. Ik moet wel toegeven dat de grens tussen deze twee elementen zeer dun is.

Een ander voorbeeld dat je waarschijnlijk ook al gebruikt (hoewel velen nog steeds niet) is het maken van een linklijst. Je vroeg je misschien wel eens af waarom je eigenlijk een ul-element gebruikte om een navigatie te maken. De reden waarom dit aangeraden word is (behalve dat het zeer makkelijk aan te passen is) omdat het semantisch correct is. Je maakt een (grote) lijst van een aantal links, en dit geldt zeker voor een verticale navigatie.

De heading tags zijn een ander goed voorbeeld. Menig keren ben ik code tegen gekomen die een subheading als volgt geconstrueerd had: <p class=”subheading_3”>. Dit is natuurlijk volkomen nutteloos, aangezien er een zestal tags hiervoor gemaakt is. Voor headings gebruik je dus h1 – h6 tags, en geen paragrafen met aparte stijlen.

De juiste benaming

Behalve het gebruik van de juiste elementen en tags is de benaming van deze elementen ook belangrijk. Met de benaming doel ik op de namen van ID’s en classes, gedefiniëerd met hun respectievelijke html-attribuut.
Dit is vooral belangrijk voor de usability van je site. Niet zozeer voor de gemiddelde gebruiker, maar wel voor de mensen die geïnteresseerd zijn in je broncode. Dit zijn ook niet alleen hackers etc, maar misschien ook webdevelopers die met een site die jij gemaakt hebt aan de slag moeten. Misschien ben jij het zelf wel, als je na 3 jaar je site een kleine update wilt geven.

De juiste benaming in voor ID’s en classes (hierna: naamattributen) ligt hem vooral in het benoemen van de functie. Een goed voorbeeld dat ik ooit gevonden heb in een ander artikel dat deels over hetzelfde onderwerp gaat is het “red” voorbeeld. Als je een waarschuwingsblok wilt maken wil je deze misschien rood/roze maken (rood is in veel culturen de kleur van waarschuwing). Als je vervolgens je ontwerp om gaat zetten in code, ben je misschien tot de verleiding gekomen om een naamattribuut te gebruiken dat “red” of “rood” heet. Allemaal leuk en aardig, totdat er na 3 jaar iemand anders, of jijzelf, aan je website begint te frutselen. Als je elementen een naamattribuut van “rood” meegeeft, heb je daar later niet veel aan, je kunt best wat tijd kwijt zijn aan het zoeken van dat ene element met het ID “rood”. Daarom is het slim om je elementen een naamattribuut te geven die de functie weergeven. Een naam die lijkt op “waarschuwing” klinkt veel logischer, en iemand die in de toekomst aan je website gaat werken zal dit waarschijnlijk ook denken. Dit kan je later dus veel tijd besparen.

Waarom zoveel moeite?

Je vraagt je na het lezen van dit artikel misschien af waarom je de moeite zou doen om je HTML semantisch correct te maken. Daarom heb ik een lijstje gemaakt met een aantal redenen waarom je semantisch zou moeten schrijven.

– Zogenaamde “Screen-Readers” zijn programma’s voor mensen die slechtziend/blind zijn. Met deze programmatuur kunnen deze mensen alsnog over het web surfen, maar vaak zien ze de opmaak zelf niet, en de programma’s zien dit al helemaal niet. Als je dus denkt dat een paragraaf-tag met een naamattribuut “quote” er in iedereen zijn ogen uitziet als een quote, heb je het dus mis.

– Google en andere zoekmachines hechten waarde aan semantiek. Omdat de crawlers ook geen stijlen kunnen zien, kunnen ze onderscheid maken tussen verschillende elementen alleen door middel van de HTML die er gebruikt word. Door goede semantiek te handhaven in je HTML zullen deze crawlers zien dat een h1 tag belangrijker is dan een small tag.

– Er zijn (nog steeds) mensen die browsen zonder dat ze stijlbladen aan hebben staan. Dit doen ze om verschillende redenen. Als je in je HTML goede semantiek handhaafd, zullen de standaard browserstijlen het voor deze gebruikers makkelijk maken om verschillende elementen (zoals headings en paragrafen) te onderscheiden.

– Technische vooruitgang. Stel je voor dat er niemand was die wat gaf om semantiek, dan zou het overgrote deel van de websites nog steeds in tabellen opgemaakt zijn. Ook is het belangrijk omdat de nieuwe versie van HTML (versie 5) compleet gericht is op semantiek. Elementen die je vooralsnog een naamattribuut van “header” gaf, hebben nu een eigen tag, net als de footer, een sidebar en het contentgedeelte.

Het belangrijkste is dus uit een usability-perspectief, maar het is vooral handig als je later aan je site gaat knutselen dat alles nog duidelijk is en up-to-date.

Is mijn HTML semantisch correct?

Er is een klein testje dat je hiervoor kunt doen. Open je pagina (in Firefox) en ga vervolgens in het hoofdmenu deze weg: Beeld > Paginastijl > Geen Stijl.

Als je je pagina zonder enige CSS bekijkt, en je nog steeds onderscheid kunt maken tussen verschillende elementen ben je al aardig onderweg.

Daarnaast moet je zorgen dat je de juiste elementen gebruikt waarvoor ze bedoeld zijn. Een simpele Google search met “tagnaam w3schools” brengt je op de site van w3schools die het desbetreffende element beschrijft. Op elke pagina staat ook een “definition” die beschrijft waarvoor de tag bedoeld is, als deze aansluit met waar je hem voor gebruikt zit je over het algemeen goed.

          Leuk als je dit artikel deelt:
Share

7 gedachten over “Papieren huizen bouwen: Het nut van semantische HTML

  1. Ik mis wat stukjes :O

    bijvoorbeeld: Er zijn verschillende manieren om iets of iemand te quoten. De correcte tags die hiervoor gebruikt moeten worden zijn ” en “. Blockquote en q zijn weg. Waarschijnlijk moesten deze vervangen worden door &(lt;) en de andere kant. Nu ziet WP ze als code denk ik :O

    Ook vraag ik me af waarom die quotes overal staan 😀

  2. Interessant hoe je op die vergelijking van papieren en bakstenen huizen bent gekomen!
    Leuk artikel. Moeten we eigenlijk vaker doen.

    Leden voor Leden of zo.

  3. Ten eerste leuk artikel.
    Iets meer dan een half jaar geleden heb ik HTML geleerd en voor mijn site gebruikte ik ook de table-tag voor de lay-out. Later heb ik gelezen dat dit niet correct was en ben overgegaan op div-tags en lay-out in CSS.
    Ik heb nu ook gekeken (met die tip in Firefox) hoe mijn site er zonder stijl eruit ziet en mijn site is nog niet helemaal semantisch correct.
    Ik weet nu wel het nut van semantische HTML. 🙂

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd met *