HTML-Elemente mit einer Klasse oder ID benennen
Ein Element mit einer eindeutigen id benennen
Obwohl es nicht erforderlich ist, können Sie Ihren HTML-Elementen einen eindeutigen Identifikator geben bzw. sie einer bestimmten Klasse (oder mehreren Klassen) zuweisen oder beides. Danach können Sie diese Elemente je nach ihrem id- oder class-Namen formatieren. Das ist sicher die hauptsächliche, aber nicht die einzige Verwendung (siehe Tipps in diesem Abschnitt).
Innerhalb des Start-Tags des Elements tippen Sie id="name", wobei name das Element eindeutig identifiziert. name kann praktisch alles sein, solange es nicht mit einer Zahl beginnt oder Leerzeichen enthält.
Einem Element eine Klasse zuweisen
Innerhalb des Start-Tags des Elements tippen Sie class="name", wobei name der identifizierende Name der Klasse ist. Wenn Sie mehr als eine Klasse zuweisen wollen, trennen Sie diese mit einem Leerzeichen so wie hier: class="name anderername". (Man kann mehr als zwei Klassennamen zuweisen.)
Jede id in einem HTML-Dokument muss eindeutig sein. Anders gesagt dürfen nicht zwei Elemente in der gleichen Seite mit der gleichen id bezeichnet werden und jedes Element darf nur eine id haben. Die gleiche id kann auf mehreren Seiten erscheinen und muss nicht jedes Mal dem gleichen Element zugewiesen werden, obwohl das normalerweise so gehandhabt wird.
Umgekehrt kann ein bestimmter class-Name einer beliebigen Zahl Elementen auf einer Seite zugewiesen werden und ein Element kann mehr als eine class besitzen.
Das class-Attribut und Mikroformate
Es gibt das übliche Missverständnis, dass das class-Attribut einzig dafür erstellt wurde, um CSS auf Gruppen von Elementen anzuwenden. Das ist aber nicht der Fall. Es wurde auch deswegen designt, um die Semantik von HTML zu bereichern, ohne mehr Elemente in die Markup-Sprache einzuführen.
Mikroformate machen genau das: Sie arbeiten mit vereinbarten class-Namen, um ein Stück HTML z.B. als Ereignis oder Kalendereintrag zu identifizieren (das hCalendar-Mikroformat), um Personen, Organisationen und Firmen zu identifizieren (hCard) oder um die Beziehung zwischen Personen zu beschreiben (XFN). Das sind nur ein paar der vielen bis heute definierten Mikroformate, und weitere sind immer in Arbeit.
Anwendungen, Suchroboter und andere Software können die Mikroformate in Ihrem HTML lesen und nutzen. Das Firefox-Add-on Operator zeigt beispielsweise die Mikroformate einer beliebigen Seite an.
Über die Implementierung von Mikroformaten erfahren Sie mehr unter https://microformats.org
Vergeben Sie ein eindeutiges Attribut id an ein Element, um es später formatieren oder darauf verlinken zu können oder ein JavaScript-Verhalten zuzuweisen. Geben Sie einer Gruppe von Elementen das Attribut class, um alle Elemente in dieser Gruppe auf einen Rutsch formatieren zu können. Die Klassen architect und project könnten zum Beispiel auf Inhalte über andere Architekten angewendet werden, um die Formatierung zu vereinheitlichen. Die Links im nav zeigen auf die ids der h1- und h2-Elemente. Die anderen ids sind für die Formatierung. Die Attribute id und class wirken sich nicht auf das Erscheinen eines Elements aus, außer sie werden im CSS referenziert.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 Lernen - Grundlagen und Tutorials</title>
</head>
<body>
<div id="container">
<header>
<nav role="navigation">
<ul id="nav-1">
<li><a href="#titel-html5">Der Titel im HTML5</a></li>
<li lang="de"><a href="#überschriften-html5">Überschriften im HTML5</a></li>
<li><a href="#textabsätze-html5">Textabsätze im HTML5</a></li>
</ul>
</nav>
</header>
<article class="html5" role="main">
<h1 id="html5-lernen-grundlagen">
HTML5 Lernen - Grundlagen und Tutorials
</h1>
<p>
Die neuen Features von HTML5. So setzen Sie anspruchsvolle Web-Layouts mit HTML5. Wir wollen Ihnen einen ausführlichen Einblick in die neuen Möglichkeiten von HTML5 geben.
</p>
...
<section class="html5">
<h2 id="titel-html5" lang="de">
Der Titel im HTML5
</h2>
...
</section>
<section class="html5">
<h2 id="überschriften-html5">
Überschriften im HTML5
</h2>
...
</section>
</article>
...
</div>
</body>
</html>
Die Attribute class und id kann man beliebigen HTML-Elementen hinzufügen. Ein Element kann sowohl eine id als auch eine beliebige Anzahl von class haben.
Wählen Sie aussagekräftige (d.h. semantische) Namen für Ihre id und class, egal wofür Sie sie nutzen wollen. Wenn Sie z.B. eine class zur Formatierung nutzen wollen, vermeiden Sie Namen, die die Präsentation beschreiben, also etwa class="rot". Das wäre eine Todsünde. Im Ernst: class="rot" ist eine schlechte Wahl, weil Sie vielleicht in der nächsten Woche beschließen, das Farbschema Ihrer Site auf Blau umzustellen. Zwar ist es unglaublich einfach, mit CSS die einer class zugewiesene Farbe zu ändern, aber dann stünde in Ihrem HTML eine class namens rot, die in Wirklichkeit eine andere Farbe darstellt. Alle class-Namen im HTML zu ändern, ist meist nicht so simpel.
Wenn man wählen kann, ob man zur Formatierung eine
class oder eine id auf ein Element anwendet, sollte man meist lieber eine class nehmen,
weil man die damit verknüpften Formatierungen auf andere Elemente mit der gleichen class erneut verwenden kann. Doch es kann aber auch Situationen geben, bei denen Sie Ihre Formatierungen über dessen id auf ein Element (und vielleicht auch auf dessen Nachfahren) anwenden wollen.
Das Attribut id verwandelt das Element automatisch in einen benannten Anker (anchor), mit dem Sie eine direkte Verknüpfung (Link) vornehmen können.
Sie können mit dem class-Attribut Mikroformate implementieren.
Sie können mit JavaScript auf die Attribute id und class zugreifen, um Verhalten für bestimmte Elemente anzuwenden.