Het internet in normaal Nederlands

De WebVakman blog over HTML is nog maar kort in ontwikkeling. Heb je vragen of suggesties? Stuur ons dan even een berichtje.

Het class-attribuut

Samen met het id-attribute is het class-attribute een van de meest gebruikte attributes op een HTML-element. Ook in functionaliteit lijken de twee attributes een beetje op elkaar. Met het id-attribute geef je een unieke waarde aan een HTML-element waarmee je dat ene element kan identificeren. Met het class-attribute geef je een waarde aan meerdere elementen waarmee je die elementen kan groeperen onder dezelfde naam.

Dit een een globaal attribuut (global attribute). Je kan dit attribute op elk HTML-element gebruiken.

Schrijfwijze (syntax)

  • De waarde van je class, de classnaam (of classname) mag je op een onbeperkt aantal HTML-elementen zetten.
  • De waarde van je class moet met een letter beginnen. Cijfers en bijzondere tekens mogen daarna.
  • Je kan meerdere classname aan één HTML-element geven. De classname worden dan met een spatie van elkaar gescheiden.
  • Je mag bijzondere tekens gebruiken.
  • Je mag hoofdletters, kleine letters en cijfers gebruiken. Ook zijn het minteken (-) en de underscore (_) toegestaan.
  • De classname is niet hoofdlettergevoeling
Op de rest van de site gebruiken we het Engelse woord “classname” in plaats van het Nederlandse “klassenaam”.
HTML

<!--De classname mag op alle elementen worden gebruikt en verschillende elementen mogen dezelfde classname hebben-->
<div class="groot">product</div>
<h1 class="groot">product</h1>
<p class="groot">product</p>


<!--Er mogen meerdere classnames op één element worden gebruikt-->
<div class="product video">product</div>
<div class="product audio">product</div>
<div class="product text">product</div>

<!--Je kan classnames goed combineren met id's-->
<div id="productnummer1" class="product video">product</div>
<div id="productnummer2" class="product audio">product</div>
<div id="productnummer3" class="product text">product</div>

Classnames worden net als id’s gebruikt voor het selecteren van HTML-elementen. Deze selectie wordt gebruikt bij het opmaken van de layout voor de elementen in CSS en bij het programmeren van extra functionaliteit in JavaScript.