HTML en semantiek

HTML werd in 1991 bedacht door Tim Berners-Lee om wetenschappelijk documenten van het CERN toegankelijker te maken, het internet was immers vroeger alleen voor CERN gemaakt. Ook maakte hij de eerste webbrowser, waar netscape uiteindelijk uit voortgekomen is. Tijdens de opmars van internet in de jaren negentig werd HTML nog steeds gebruikt om websites op te bouwen. Vervolgens zijn er veel versies waar ik je maar niet mee lastig ga vallen. Momenteel zitten we aan het eind van HTML 4, aan het begin van HTML 5.

Met HTML gaf je structuur aan je website. Er was geen leuke opmaak, alleen structuur. Het internet was in eerste instantie namelijk bedoelt om documenten met elkaar te delen, niet om het gezellig te hebben!

In 1994 was de mensheid de saaie websites zat en werd CSS bedacht. Het duurde echter tot 1996 tot de eerste CSS echt uitkwam. (saillant detail: pas in 2000 was internet explorer 5 de eerste die CSS1 volledig ondersteunde). Weer een aantal versies verder zijn we nu aangekomen bij CSS3.

CSS bracht de presentatie, en de mooie opmaak!

En toen kwamen de problemen. Je wilde een mooie opmaak voor je site, bijvoorbeeld twee kolommen, en daar bestond geen HTML voor. De developers van toen waren natuurlijk slim, en gebruikten hier tabellen voor. Ging prima. Vervolgens werden tabellen een mode om je website vorm te geven, en nu zijn er nog zat mensen die het zo doen. Alles ging in tabellen, omdat het kan, en omdat het resultaat er goed uitzag, toch?

Wat heeft dat te maken met semantiek? Laten we eerst eens kijken wat semantiek betekent. Volgens de Dikke van Dale:

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

Kort gezegd vertelt semantiek je wat dingen betekenen. Dit komt niet alleen voor in programmeren, maar overal om je heen, als je erover nadenkt.

Als ik ‘kast’ zeg, bedoel ik iets waar je spullen in stopt. Maar waarom denk je bij het woord ‘kast’ meteen daaraan? Omdat er waarde in dat woord zit. Het woord ‘kast’ refereert expliciet naar iets waar je spullen in kan stoppen.

Precies dat is er ook in HTML. Het table element refereert expliciet naar een tabel, een li element naar een list item, en een p element naar een paragraaf. Dat is gewoon de waarde, de boodschap, die je meegeeft aan dat element.

Wat belangrijk is even te vermelden is dat semantiek geen verplichting is. Wil jij jouw website met tabellen opbouwen, prima. Maar het heeft een paar belangrijke voordelen:

1) Het vergroot de leesbaarheid van je code. Je code is later veel makkelijker terug te lezen en aan te passen, en ook andere programmeurs zullen je website beter begrijpen.
2) De browser (en daarmee ook zoekmachines) begrijpen je website beter. Je zult hierdoor veel beter op het internet te vinden zijn.
3) Je hoeft minder CSS te gebruiken, omdat er al standaard CSS wordt toegevoegd die te maken heeft met de betekenis van een element.

Maar hoe gebruik je dat nu in de praktijk? Daar hebben we een aantal voorbeelden voor. Die laten je zien hoe je semantiek toepast op je website, met een aantal veel voorkomende voorbeelden.

Er zijn in HTML tegenwoordig heel veel elementen. Er zit er vast eentje tussen die precies uitdrukt wat je bedoelt. Om erachter te komen wat nou de betekenis is van zo’n element hebben de makers van HTML een hele uitgebreide documentatie gemaakt. Deze heet de HTML5 specificaties (vaak afgekort tot HTML5specs) en is hier te vinden: http://www.w3.org/TR/html5/ Je zult in de rest van de tutorial vast wel een paar keer naar deze site verwezen worden, want dit is de bron voor elke HTML developer!

Laten we beginnen met een menu. Vrijwel iedere website heeft een menu, om je op een duidelijke manier te laten navigeren. Velen zullen hierbij alle links onder elkaar zetten met achter elke link een <br> tag. Maar semantisch is dit niet juist.

Een menu is 1 blok die bestaat uit meerdere menu-items. De semantische betekenis die hier het dichtst bij komt is die van een lijst. Een menu moet eigenlijk gezien worden als een lijst van menu items.

Dan gaan we weer terug naar HTML. Hierin heb je ook een element die als semantische betekenis een lijst heeft. Namelijk de ul (unordered) en ol (ordered) elementen.
Kijken we in de HTML5specs, zien we bij de ul tag staan:

The ul element represents a list of items, where the order of the items is not important — that is, where changing the order would not materially change the meaning of the document.

Precies wat we wilden. het menu is feitelijk een lijst met inhoud, waarbij de volgorde niet uitmaakt, zelfs niet bij verandering (dat het een vreemdere indeling wordt is een ander verhaal). Dus het wordt het ul ipv het ol element, want de volgorde maakt niet uit.

De menu items worden gezien als list items en dus komen we terecht bij li (list items). Kijken we weer in de HTML5specs:

The li element represents a list item. If its parent element is an ol, ul, or menu element, then the element is an item of the parent element's list, as defined for those elements. Otherwise, the list item has no defined list-related relationship to any other li element.

Voordat we gaan kijken of we het li element moeten gebruiken, eerst even wat parent betekent, want dat is vrij belangrijk in HTML, CSS en JavaScript. De sitestructuur (of DOM) speelt hierbij een zeer grote rol

Parent: een parent is de eeh.. ouder. In HTML wordt vaak genest, een element in een ander element plaatsen. Zoals het body element in het html element staat. En enige verdere content weer in het body element. De ouder (of parent) van de content elementen zijn dan het body element en de ouder van het body element zelf is het html element. (het html element is dan weer de voorouder (ancestor) van de content elementen)

Terug naar het menu. Een aparte link is inderdaad een onderdeel van de totale lijst (het menu was een lijst, hadden we al gezien). We hebben dus een li element nodig. Bijkomend, deze li wordt dan genest in het ul element, wat resulteert in een relatie met andere li elementen. Mooi, want ze hebben ook een relatie, het zijn allemaal items van hetzelfde menu.

Kort samengevat: Een menu bouw je dus op de juiste HTML manier met een unordered list op, met daarin li elementen, waarin de links staan.

Dan de uiteindelijke code:

<ul>
	<li><a href=”page1.php”>page 1</a></li>
	<li><a href=”page2.php”>page 2</a></li>        
    <li><a href=”page3.php”>page 3</a></li>
</ul>

Nu komen we op een nogal heikel punt voor velen. Wanneer we (laten we het simpel houden) 2 kolommen op een website willen hebben, gebruiken velen daar een tabel voor. Dat is semantisch fout. Waarom? Laten we de specs er weer eens bij halen, dit keer voor het <table> element:

The table element represents data with more than one dimension, in the form of a table.

Het table element gebruik je dus alleen wanneer je data (gegevens e.d.) hebt met meer dan 1 dimensie. (dus dat de gegevens op de een of andere manier een relatie met elkaar hebben). Is de indeling van een website data? In zekere zin wel. Maar hebben deze een relatie met elkaar, of met andere woorden, is dit meer dan 1 dimensie? Nee. Dus gebruiken we geen tabellen.

Laat ons je niet afschrikken om het table element te gebruiken, wanneer je data hebt die prima in een tabel passen, is het juist wel correct om deze te gebruiken.

Genoeg over tabellen, wat gebruiken we dan wel voor een indeling van een website? Het div element is hier het antwoord. Volgens de specs:

The div element has no special meaning at all. It represents its children. (…)

Oftewel, je bent vrij om het altijd te gebruiken, wanneer er sprake is van inhoud. Maar bij de specs staat nog een opmerking:

Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. (…)

Oftewel, wanneer je een ander element vind dat beter bij de inhoud past, gebruik dat dan. dat vermindert het gebruik van een div element aanzienlijk: je gebruikt het vaak alleen maar om te stijlen. Je selecteert als het ware een blok met een div. div komt van division (gedeelte), dus het is eigenlijk wel passend, je neemt een gedeelte van je site.

Inmiddels heb je hopelijk ook al door waarom je een division moet gebruiken voor de indeling van een website: het vertegenwoordigt alle soorten inhoud, en er zijn geen andere elementen voor. Dat laatste is inmiddels al weer wat achterhaald, want in HTML 5 zijn er nieuwe elementen bijgekomen voor bijvoorbeeld header, footer, etc. Deze geven een veel betere semantische betekenis en daardoor zul je divisions bijna nergens tegenkomen in HTML5 code’s.

Dus hoe delen we nu de site in? Simpel, je creëert een aantal divjes na elkaar, en met CSS geef je ze de plaats die je wilt. Het is helemaal niet erg om CSS de opmaak helemaal te laten bepalen, daar is CSS immers voor. Je geeft met het divje aan dat hier een blok zit, en met CSS geef je de plaats en styling aan. Oftewel HTML structuur, CSS presentatie. Precies waar de talen voor bedoelt zijn.

Stukje code dan nog, er is nog een deel CSS opgenomen om tot de opmaak van 2 tabellen te komen. Omdat deze tutorial niet over CSS gaat, wordt dit hier ook niet uitgelegd. Een tutorial die zich focust op een site indeling met CSS vind je hier.

<!doctype html>
<html>
	<head>
        <meta charset=utf-8> 
		<title>semantisch site indeling</title>
		<style>
			#content {
				width : 900px;
				height : 900px;
				float : left;
			}

			#menu {
				width : 200px;
				height : 900px;
				float : left;
			}
		</style>
	</head>
	<body>
		<div id="content">
			Hier een content div
		</div>
		<div id="menu">
			Hier een menu div
		</div>
	</body>
</html>

Een blogpost is denk ik iets wat je vast wel een keer hebt gemaakt, iedereen wil tegenwoordig wel zijn eigen blog. Alleen een blogpost is best ingewikkeld om goed semantisch te maken. Het heeft namelijk zo veel verschillende onderdelen die wel iets met elkaar te maken hebben, maar niet veel.

Nu heb ik me even helemaal uitgeleefd en is dit een blogpost ontwerp dat ik voor deze tutorial heb gemaakt:

We gaan eerst eens kijken welke basis onderdelen deze blogpost heeft. Zo op het eerste gezicht kan ik er 4 onderdelen uithalen:

• [li]Header de header bevat de titel van het bericht, het intro, de datum en eventuele thumbnail.[/li]
  [li]Body de body bevat de echte tekst van een bericht.[/li]
  [li]Footer extra informatie als de serie, biographie van de schrijver en social media hoort niet echt bij de content. Dit plaatsen we dus in een footer.[/li]
  [li]Comments dan krijgen we de comments.[/li]

Je zou het ook op een andere manier kunnen bekijken:
En er zullen vast nog wel andere methoden zijn. Alleen de eerste klinkt voor mij het meest logisch, dus die gaan we volgen.

De Header
Laten we maar eens met de header beginnen. Je eerste gedachte, als je even bezig bent in HTML5, zou zijn "kunnen we hier de <header> tag voor gebruiken"? Om daar antwoord op te krijgen kijken we wat de uitvinders van de header tag in hun gedachte hebben. Dat doen we door in de HTML5 specificaties te lezen. Ik citeer:

The header element can also be used to wrap a section's table of contents, a search form, or any relevant logos.

We mogen, of eigenlijk moeten, hier dus deze tag voor gebruiken.

Oké, die basis hebben we. Laten we nu verder kijken wat er nou precies allemaal in de header zit. We hebben de publish date, de titel, een thumbnail en een intro stukje.

Laten we beginnen met die publish date. Hiervoor zou ik het time element gebruiken. Alleen er is wel een heel gedoe over dit element, hij is namelijk verwijderd, terug gekomen en aangepast. Wat er met dit element gaat gebeuren in de toekomst zou ik niet weten, maar we gaan er voor het gemak maar vanuit dat dit element nu blijft bestaan. Het element heeft een datetime attribuut waarin je de datum zet, vervolgens kun je als tekst in het element jou versie van een datum gebruiken. In ons voorbeeld zou het zoiets worden

<header>
    <time datetime="2012-04-14">14 Apr</time>
</header>

Nu weten de zoekmachines en andere robots dat het artikel is geplaatst op 14 April 2012, maar onze bezoeker krijgt alleen 14 Apr te zien. We zien in ons design voor onze blog dat de maand een aparte stijl krijgt. Die zullen we dus een element moeten meegeven, zodat het goed te stijlen is. Omdat dat element totaal geen semantisch nut mag hebben komen we uit bij een span of een div element. Een div is voor Block elementen zonder betekenis en een span voor inline elementen. We gebruik hier dus een span voor.

De titel van een bericht is moeilijker. Wat duidelijk is is dat we een Heading element (h1 t/m h6) moeten gebruiken. Maar welk getal? Een H1 element is uniek per pagina en behoort de belangrijkste titel te zijn. Stel dat je nu op de pagina zit waar de blog post alleen opstaat, dus waarbij je hem kan lezen. Dan is de titel van die blogpost het belangrijkst en behoort naar mijn mening dus een H1 te krijgen. Maar als het tussen de andere blogposts op de homepagina staat is bijv. een sitenaam veel unieker en belangrijker en krijgt een blogtitel bijv. een H2.

Ik ga er vanuit dat dit een design is voor 1 blog post, omdat de comments enzo erbij staan. En dus gebruiken we hier een H1 element voor:

<header>
    <time datetime="2012-04-14">14 <span>Apr</span></time>
    <h1>Hello World</h1>
</header>

Nu de thumbnail, veel makkelijker kun je het niet hebben. Voor een afbeelding is maar 1 element: Het image element (<img>). We kunnen dus gewoon die gebruiken:

<header>
    <time datetime="2012-04-14">14 <span>Apr</span></time>
    <h1>Hello World</h1>
    <img src="path/to/thumbnails/hello-world.png">
</header>

Dan de intro tekst. Het is een mooie alinea, in het engels paragraph, en dus gebruiken we hier ook gewoon een paragraph element (<p>) voor:

<header>
    <time datetime="2012-04-14">14 <span>Apr</span></time>
    <h1>Hello World</h1>
    <img src="path/to/thumbnails/hello-world.png">
    <p>Pellentesque habitant ... eleifend leo.</p>
</header>

Ik ben nu wel klaar met de header, laten we verder gaan met de content zelf!

We gaan verder met de content. We moeten er even vanuit gaan dat het Lorem Ipsum en het Foobar and Hello World gedeelte 2 andere onderwerpen zijn die wel iets met elkaar te maken hebben (ze zijn wel samen 1 artikel).

Die 2 titels die ik net noemde zijn onderdeel van de blogpost. Als de blogtitel dus een H1 element kreeg moet dit iets van H2 of H3 zijn. Ik kies gewoon voor het gemak H2, maar ik kan me ook voorstellen dat je in sommige gevallen H3 wilt gebruiken (omdat bijv. de sitetitel al in een H2 staat).

De tekst eronder is gewoon weer een paragraaf dus we gebruiken gewoon weer het paragraph element.

Vervolgens gaan we dus verder op een ander onderwerp. Stel dat je nu hier helemaal geen semantische waarde aan hecht dan lijkt het net alsof het hele artikel 1 onderwerp is, dat wil je niet! Om duidelijk te maken dat het om 2 aparte delen (in het engels sections) gaat zetten we ze allebei in een eigen section element.

Die Wat is foobar? titel is weer een sub van die titel daarboven, deze krijgt dus een H3 of H4 element mee. De totale code wordt zoiets:

<section>
    <h2>Lorem Ipsum</h2>
    <p>Lorem ipsum ... inceptos himenaeos.</p>
</section>
<section>
    <h2>Foobar and Hello World</h2>
    <p>Etiam et ... blandit magna.</p>

    <h3>Wat is foobar?</h3>
    <p>Nunc dictum ... feugiat id.</p>
</section>

De Footer
Dan gaan we nu verder met de footer. Wat is eigenlijk de footer van het bericht? Is dat alleen die grijze balk of is dat die grijze balk + de comments? Ik ben voorstander om de footer alleen die grijze balk te laten zijn en die comments dan hun eigen element mee te geven, maar je kan er ook voor kiezen om dat in het totaal in de footer te zetten.

Die grijze balk is dus de footer, welk element kunnen we hier voor gebruiken? Nou, dat is nou heel simpel: Het footer element. Want wat zegt de specifications hierover?

The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.

Ideaal hiervoor dus. De nearest sectioning content is in dit geval ons article element om de blogpost heen. De code voor de footer wordt dan:

<footer>
	<ul>
		 <li><a href="http://twitter.com/tweetMe/">Tweet</a></li>
		 <li><a href="http://facebook.com/likeMe/">Like</a></li>
	</ul>
</footer>

Wat je eventueel nog kunt uitbouwen met allerlei leuke extra dingen als related blogposts, author info, enz.
"Waarom een lijst?" zul je zeggen, dat komt omdat het eigenlijk een opsomming van social media buttons is. Meer hierover bij het kopje 'Een Menu'. Dat is wel een menu, maar hetzelfde geldt hiervoor.

De comments
En dan als laatste de comments. Een comment is op zichzelf een klein artikeltje met een author, publish datum enz. Dus ik stel voor dat we dit ook in een article element zetten. Vervolgens heeft dit commentje ook een header met daarin de author en de datum.

Laten we dus verder gaan met de header van ons comment. Hierin staat de author en een author is eigenlijk contact informatie over die persoon. We schrijven het dus in een address element, of zoals de specificaties zeggen:

The address element represents the contact information for its nearest article or body element ancestor.

De datum behoort, precies zoals het artikel, in een time element. In het totaal wordt de header dus:

<header>
    <address>Peter Pan</address> op <time datetime="2012-04-17">17 April 2012</time>
</header>

Nu gaan we verder met de content en de thumbnail. Deze plaatsen we weer in een img en paragraph elementen en dus wordt de totale comment:

<article>
    <header>
		<address>Peter Pan</address> op <time datetime="2012-04-17">17 April 2012</time>
    </header>
    <img src="path/to/user-avatars/peter-pan.png">
    <p>Pellentesque habitant ... turpis egestas.</p>
</article>

Nou dat is het dan wel zo'n beetje. Je kunt het nog optimaliseren met microdata. Dan krijg je ong. dit [size=xsmall](ik heb dat een tijdje geleden gemaakt, de code verschilt dus her en der iets van wat hier besproken is)[/size].

Nou dat was het dan. Semantiek is het eigenlijke doel van HTML, waarom zullen we ons er niet aan houden? Uit ervaring kunnen we allebei zeggen dat het je website verbeterd, je code en ook jezelf. Het geeft een veel leuker gevoel om een HTML document gemaakt te hebben met de juiste element i.p.v. een HTML document met alleen div elementen.

Jeroen vd & Wouter J

Voor deze tutorial hebben we gebruik gemaakt van de volgende bronnen:

• [li]Tutorial HTML & semantiek[/li]
  [li]HTML5 specificaties[/li]

Andere handige sites:

• [li]Een blog waarbij HTML experts geweldig uitleggen hoe je semantiek nou echt toepast (een artikel over semantiek)[/li]
  [li]Een youtube film waarin Paul Irish van alles uitlegt over HTML5[/li]
  [li]Een pagina met alle nieuwe HTML5 form elementen en attributen[/li]
  [li]Een pagina over de toepassingen en voordelen van HTML5[/li]