HTML: Unterschied zwischen ID und CLASS

Elemente innerhalb eines HTML-Dokuments können sowohl das ID-Attribut als auch das CLASS-Attribut haben. Was aber hat steckt hinter den ID- und CLASS-Attributen? Und wo liegen die Unterschiede?

Der Sinn dahinter ist, die Elemente ansprechen zu können, sei es um CSS-Styles zu setzen oder per JavaScript auf Elemente zugreifen zu können. Wenn wir zum Beispiel im CSS nur die Möglichkeiten hätten, die HTML-Basics wie h1, h2, p, ol, ul oder li zu stylen, hätten wir keine Möglichkeit zwei Abschnitte oder Listen unterschiedlich zu stylen. Geben wir dagegen einer Klasse bestimmte CSS-Eigenschaften, können wir verschiedenen Listen einfach ein unterschiedliches Aussehen geben: <ul class="navigation"> oder <ul class="footer">. Dasselbe gilt für JavaScript. Ohne IDs oder Klassen wäre es nicht so einfach möglich, zum Beispiel nur einen ausgewählten DIV-Container sichtbar oder unsichtbar zu machen. Hat unser DIV-Container allerdings einen eindeutigen Namen wie <div id="mydiv">, ist der Zugriff ohne Probleme möglich.

Was aber ist der Unterschied zwischen einer ID und einer Klasse? Der grundlegende Unterschied ist, dass eine ID immer eindeutig ist, während eine Klasse das nicht ist.

Eine ID ist eindeutig

Eine ID ist immer eindeutig. Das betrifft sowohl die HTML-Elemente als auch das gesamte HTML-Dokument:

• Jedes HTML-Element kann nur eine einzige ID haben
• Innerhalb eines HTML-Dokuments darf eine ID nur ein einziges Mal vorkommen

Aus diesem Grund eignet sich eine ID immer dann, wenn wir exakt ein bestimmtes Element ansprechen möchten (zum Beispiel über JavaScript) oder es sich um ein Element handelt, das nur einmal im Dokument auftaucht (zum Beispiel die CSS-Formatierung des Headers oder Footers). Ein HTML-Validator wird entsprechend auch meckern, wenn eine ID mehrfach vorkommt.

Klassen sind nicht eindeutig

Bei Klassen ist das Gegenteil der Fall. Eine Klasse ist nicht eindeutig, auch wenn es kein Problem ist, eine Klasse nur einmal innerhalb eines Dokuments zu vergeben. Wieder betrifft die nicht-Eindeutigkeit sowohl die Elemente als auch das gesamte Dokument:

• Jedes HTML-Element kann beliebig viele Klassen haben
• Innerhalb eines HTML-Dokuments darf dieselbe Klasse beliebig vielen Elementen zugeordnet sein

Um das Beispiel von oben aufzugreifen, können wir also ohne Probleme beliebig viele Listen mit der gleichen Klasse versehen und so zum Beispiel über CSS all diesen Listen zentral das gleiche Aussehen geben. Aber auch für JavaScript-Manipulationen sind Klassen geeignet: Möchten wir zum Beispiel mit jQuery eine Reihe von HTML-Elementen ausblenden oder anzeigen, können wir diese über den Class-Selector $(".classname") ansprechen und verändert, zum Beispiel $(".classname").toggle(); um alle Elemente mit <p class="classname"> ein- und auszublenden.

IDs und Klassen zuweisen

Wie man HTML-Elementen eine ID oder Klasse zuweist, haben wir schon oben angerissen. Im folgenden möchte ich noch Beispiele dazu zeigen.

<h1 id="h">Diese Überschrift hat die eindeutige ID "h"</h1>
<p class="p1">Diese drei Abschnitte haben alle die<p>
<p class="p1">Klasse "p1". Der letzte Abschnitt hat zusätzlich<p>
<p id="last" class="p1 p2">die ID "last" und die Klasse "p2".<p>

An diesem Beispiel sieht man alle Verwendungsweisen. Eine ID können wir mit dem Attribut id="" zuweisen, eine oder mehrere Klassen mit dem Attribut class="". Möchten wir dem gleichen Element mehrere Klassen zuweisen, können wir diese mit einem Leerzeichen trennen.

IDs und Klassen adressieren

Im folgenden möchte ich darauf eingehen, wie wir unsere IDs und Klassen über CSS und JavaScript adressieren können.

#h  {color: red}
.p1 {color: green}

Im CSS können wir eine ID einfach mit einer vorangestellten Raute # ansprechen. Die id="h" aus dem Beispiel bekommen wir entsprechend mit #h. Bei Klassen verwenden wir statt der Raute einen Punkt und können entsprechend mit .p1 auf unsere Klasse class="p1" referenzieren. Wichtig ist, Punkt und Raute nicht in die HTML-Attribute hineinzuschreiben. Die beiden Zeichen werden nur zur Adressierung genutzt.

$("#h").toggle();
$(".p1").toggle();

Ähnlich werde sich mit jQuery. Auch hier benutzen wir Punkt und Raute für den ID Selector und Class Selector.

var element = document.getElementById("h");
element.innerHTML = "Neuer Text";

In reinem JavaScript steht und die Funktion getElementById() zur Verfügung. Diese Funktion können wir den Namen einer ID übergeben und erhalten das entsprechende Element zurück. In unserem Beispiel setzen wir den Text von h auf "Neuer Text". In diesem Fall dürfen wir nicht #h schreiben, da getElementById nur nach IDs schaut.