HTML levert je een setje elementen om je documenten mee te markeren. Aangezien HTML oorspronkelijk is bedoeld voor het markeren van wetenschappelijke documenten [1], en daarna langzaamaan uitgebreid is naar de wensen van gebruikers, is het vaak niet compleet genoeg om alles te kunnen beschrijven wat we zouden willen. Gelukkig is er een mechanisme om de boel betekenisvol uit te breiden, in de vorm van het class attribuut.

HTML 5

Uiteraard is men continu bezig HTML aan te passen aan de wensen van de gebruikers. Dit kost tijd, heel veel tijd, maar vordert gestaag [2]. Hierbij moet men rekening houden dat de boel backwards en forwards zoveel mogelijk compatible blijft. De hele reeks aan nieuwe elementen in HTML 5 is nu al te gebruiken, met een trucje [3] zelfs in Internet Explorer. Dit heeft als nadeel dat je document (uiteraard) niet meer HTML 4.01 valideert. Wil je dat toch, gebruik dan HTML 4.01 elementen met een class die refereert naar de HTML 5 elementen.

De volgende elementen (of klassenamen) kan je overwegen:

Door gebruik te maken van deze naamgeving, zorg je ervoor dat we (over de hele wereld) naar beter behapbare documenten gaan. Bovendien, zorgt het ervoor dat tools hier makkelijker op in kunnen springen en iets nuttigers doen met je content. Een belangrijke consensus hiervoor is vastgelegd in microformats.

Microformats

Microformats [4] zijn kleine stukjes html die je het mogelijk maken veel gebruikte structuren op een vaste manier vast te leggen. Een Firefox add-on als Operator [5] kan hier weer op inspringen.

Er zijn er nogal wat, dus die ga ik niet allemaal oplepelen, een voorbeeld(je) is de hCard [6] microformat voor contactgegevens.

<span class="tel">
  <span class="type">home</span>:
  <span class="value">+1.415.555.1212</span>
</span>

Wat hier van belang is, is het class attribuut. Deze markup kan je gebruiken in een lopende zin. Een veelgebruikte andere markup is een dl element, waarin je een en ander opsomt.

Een handige cheatsheet [pdf] is hier te vinden.

Drukwereld

Andere handige klassenamen zijn te vinden in de drukwereld. Hiervoor zijn (nog) geen HTML 5 elementen. Overweeg de volgende namen:

Wat de rest doet

Als je nog geen goede beschrijving hebt gevonden, dan kan je altijd nog kijken wat common practice [7] is. De volgende hebben we nog niet eerder gezien:

Als laatste

We hebben een aantal zinvolle klassenamen behandeld. Houdt altijd in het achterhoofd dat class niets te maken heeft met styling, maar aangeeft hoe een bepaalde groep elementen zich onderscheidt van de rest (terwijl ze wel dezelfde functie hebben). Dit is iets heel anders dan het id attribuut, welke een unieke identifier voor een element bevat, bijvoorbeeld om er heen te kunnen linken. Het is soms verleidelijk om een klassenaam die maar één keer voorkomt, in het id attrubuut te stoppen, maar dat is niet de bedoeling [8].

Waarom?

En nu de hamvraag. Waarom zou ik dit doen? Als allereerste en belangrijkste is het vooral intern handig. Als je met z’n allen binnen in een bedrijf eenzelfde manier van naamgeving aanhoudt, snappen ontwikkelaars onderling wat ze bedoelen met hun HTML. Verder is het handig om bijvoorbeeld stukken css eenvoudig te kunnen hergebruiken.

Als je vervolgens naamgeving aanhoudt die over heel de wereld gebruikt wordt, help je het hele internet consistenter te worden. Over de tagnamen van HTML 5 elementen wordt bijvoorbeeld uitgebreid gediscussieerd. Zoals je in de eerder genoemde link [7] hebt gemerkt doen ook search engines als google onderzoek naar gebruikte classes om sites beter te kunnen indexeren.

referenties

1. http://en.wikipedia.org/wiki/HTML
2. http://whatwg.org/html5
3. whatwg blog: Supporting New Elements in IE
4. Microformats home
5. Firefox addons: Operator
6. Microformats: hCard specification
7. Google web statistics: classes
8. Naar voren: het nut van class