R-pd.3.15

Beschrijvende namen voor class en id attributen

Het is belangrijk om class en id attributen beschrijvende namen te geven, die de betekenis omschrijven ('waarschuwing'), in plaats van de vormgeving ('rode-tekst'). Hierdoor zijn de namen nog steeds te begrijpen als de vormgeving zou veranderen. Het overdragen van het beheer van de website aan een andere webontwikkelaar of het uitbreiden van de website wordt hierdoor veel eenvoudiger.

Uitleg van deze richtlijn

Elementen kunnen worden gemarkeerd met de HTML-attributen class en id. Vervolgens kunnen ze eenvoudig worden gemanipuleerd met CSS (Cascading Style Sheets). Ook kan een beschrijvende naam worden gegeven aan een verder anoniem element (bijvoorbeeld, om er naartoe te linken).

Voorbeelden

Voorbeeld van een class attribuut op een element (HTML)

Dit element kan door middel van CSS anders worden weergegeven dan andere em elementen op de pagina, vanwege de class op de <em> tag. Webontwikkelaars moeten betekenisvolle, logische namen geven aan class en id attributen.

Voorbeeld van slecht gebruik (HTML)

Voorbeeld van goed gebruik (HTML)

Voordelen van beschrijvende namen

Het scheiden van structuur en vormgeving moet ook doorgevoerd worden in de naamgeving van id's en classes. Goede id en class namen omschrijven de betekenis, en niet de vormgeving. Dit maakt het voor andere ontwikkelaars en beheerders bovendien een stuk eenvoudiger om de website te beheren en uit te breiden.

Het gebruik van namen die het uiterlijk beschrijven in plaats van de functie van het element heeft dus de volgende nadelen.

• Geen scheiding van structuur en vormgeving. Het uiterlijk van het element wordt beschreven in de structuur, terwijl het juist de bedoeling is deze gescheiden te houden. Zodra de CSS voor de voetnootlink wordt aangepast en deze er niet langer klein uitziet, slaat de klasse “klein” nergens meer op en kan deze zelfs verwarring opleveren bij aanpassing of uitbreiding van de site.
• Bemoeilijking van de uitbreidbaarheid van de site. Wanneer een webontwikkelaar of content-beheerder de site uitbreidt en een nieuwe voetnootlink wil plaatsen, zal hij zich moeten herinneren dat het hier gaat om een link van de klasse “klein”. Een link van de klasse “voetnoot” is logischer en laat zich gemakkelijk onthouden.

“Good names don't change”

W3C, Use class with semantics in mind.

Links en referenties

• Aan de slag: Beschrijvende markup

Gerelateerde richtlijnen

• R-pd.2.9: Bouw een website volgens de Web Content Accessibility Guidelines (WCAG 1.0) van het W3C.

Bijbehorende ijkpunten normdocument

• IJkpunt 13.2: Lever metadata om semantische informatie toe te voegen aan pagina's en sites.