Du kennst id schon aus Kapitel 16 (Anker-Links). In diesem Kapitel schauen wir uns id genauer an und lernen sein enges Geschwister kennen: class.

id noch einmal zusammengefasst

• Eine id ist ein eindeutiger Name für genau ein Element auf der Seite.
• Jede id darf auf einer Seite nur einmal vergeben werden.
• Nützlich für Sprungmarken (href="#name") und, wie du bald lernst, für gezieltes CSS-Styling.

class: ein Namensschild für mehrere Elemente

class funktioniert ähnlich wie id, mit einem wichtigen Unterschied: Dieselbe class darf auf beliebig vielen Elementen gleichzeitig vorkommen. Stell dir class wie eine Kategorie-Markierung vor, id dagegen wie einen einzigartigen Eigennamen.

<p class="wichtig">Das Spiel beginnt pünktlich um 15 Uhr.</p>
<p class="wichtig">Bitte 30 Minuten vorher da sein.</p>
<p>Das ist ein ganz normaler Absatz ohne besondere Markierung.</p>

Hier haben zwei Absätze dieselbe class="wichtig" - das ist völlig in Ordnung, im Gegensatz zu id.

Mehrere Klassen gleichzeitig

Ein Element kann sogar mehrere Klassen gleichzeitig haben, getrennt durch Leerzeichen innerhalb des Attributwerts:

<p class="wichtig hervorgehoben">Ganz besonders wichtiger Hinweis!</p>

Wozu das schon heute gut ist, auch ganz ohne CSS

Auch wenn class seine volle Stärke erst mit CSS entfaltet (dort kannst du damit gezielt Farben, Abstände und mehr für eine ganze Gruppe von Elementen auf einmal festlegen), ist es schon jetzt eine gute Angewohnheit, wichtige, wiederkehrende Arten von Inhalt mit sinnvollen Klassennamen zu markieren - das macht deinen Code für dich selbst und andere leichter verständlich, und du bist bestens vorbereitet, sobald du CSS lernst.

id oder class: welche nehme ich wann?

Eine einfache Faustregel:

• id: für genau EIN spezifisches, einzigartiges Element ("die Kopfzeile", "das Hauptmenü").
• class: für eine Kategorie oder einen Typ, der mehrfach vorkommen kann ("alle wichtigen Hinweise", "alle Spielerkarten").

Klassen in Finns Webseite einsetzen

Markiere wichtige Hinweise auf deiner Webseite mit einer gemeinsamen Klasse:

<section>
  <h2>Nächstes Spiel</h2>
  <p class="wichtig">Das Spiel beginnt pünktlich um 15 Uhr, bitte 30 Minuten vorher da sein!</p>
</section>