U bent hier:

  1. Handleiding
  2. Ontwikkeling
  3. Beschrijvende markup
  4. Het schrijven van
  5. Class en id attributen

Beschrijvende markup: Beschrijvende namen voor class en id attributen

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).

Geef betekenisvolle namen aan id en class attributen.

Richtlijn R-pd.3.15

Voorbeeld van een class attribuut op een element (HTML)

<em class="waarschuwing">Pas op!</em>

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)

<a class="klein"...>

Voorbeeld van goed gebruik (HTML)

<a class="voetnoot" ...>

Het gebruik van namen die het uiterlijk beschrijven in plaats van de functie van het element heeft 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.


 Webrichtlijnen versie 1.3, november 2007.