ID's & Klassen

Nun da wir angefangen haben unseren Inhalt auch semantisch zu unterteilen, ist es an der Zeit weitere Attribute/Werte vorzustellen. Bisher haben wir noch nicht groß am Aussehen der Seite gearbeitet, aber irgendwann wollen wir ja auch in der Lage sein das Aussehen unserer Webseite zu verändern. Und das ist der Punkt an die ID und Klassen Attribute ins Spiel kommen.

ID

Dieses Attribut weißt einem Element einen Namen zu. Der Name miss einzigartig sein und darf im gleichen Dokument nicht noch einmal verwendet werden. ID ist die Abkürzung für Identifier (Identifikation) - man verwendet das ID Attribut also wenn man ein Element eindeutig identifizieren möchte.

Man könnte das ID Attribut zum Beispiel verwenden um Spalten einer Webseite zu identifizieren. Das zugehörige HTML würde so aussehen:

<div id="right-column">Content of the right column</div>
<div id="left-column"> Content of the left column </div>

Wie gesagt, das ID Attribut muss eindeutig sein, was heißt man darf nicht zweimal den gleichen Wert festlegen. Das folgende Beispiel würde im Browser nicht korrekt dargestellt:

<div id="menu">This would be your menu</div>
<div id="blog-entry">Your first blog-entry</div>
<div id="blog-entry">Your second blog-entry</div>

Klassen

Klassen werden genutzt um generelle Einstellungen für ein Element festzulegen. Das heißt man kann mehrere Elemente im Dokument haben, die den gleichen Klassennamen verwenden. Man macht das weil man möchte, dass verschiedene Elemente alle gleich aussehen oder das gleiche Verhalten zeigen. Normalerweise wird dies für Links oder Bilder genutzt, da man hier meist möchte das alles gleich dargestellt wird. Im nächsten Beispiel weißen wir verschiedene Klassen zu, sowohl auf den gesamten Blog-Eintrag wie auch auf den Teil, der den Inhalt aufnimmt.

<div class="blog-entry">
	<p> Just Another Day<br />
	Written by Christina<br />
	On January 11th </p>
	<p class="content">This is my second blog entry, and I just wanted to check in on you </p>
</div>
<div class="blog-entry">
	<p> My First Blog Entry<br />
	Written by Christina<br />
	On January 10th </p>
	<p class="content">I’m so happy to write my first blog entry – yay!</p>
<div>

Man kann dies auch in Kombination mit Cascading Style Sheets (CSS) benutzen. CSS sagt dem Browser wie ein HTML Element dargestellt werden soll, also wie es formatiert ist (oder sein soll). Das geschieht losgelöst vom HTML Dokument und wird in einer separaten Datei ausgelagert, die im HTML Dokument als "style sheet" referenziert werden muss. Dieses Tutorial wird CSS nicht weiter behandeln, aber es ist wichtig, dass ihr wisst, dass es so etwas wie einen style sheet gibt und dass das Aussehen eurer Webseite darin definiert werden kann.

Was wir gelernt haben

• IDs und Klassen sind Attribute
• IDs sind zur eindeutigen Identifikation eines Elements
• Klassen können auf mehreren Elementen definiert werden
• IDs und Klassen werden normalerweise in Kombination mit CSS genutzt