Block- und Inline-Elemente
Die meisten der im Dokumentenkörper vorkommenden Elemente sind entweder Block-Elemente oder Inline-Elemente. Die Elemente unterscheiden sich im Wesentlichen in folgenden Punkten:
- Block-Elemente können Inline-Elemente und andere Block-Elemente beinhalten. Inline-Elemente dagegen können für gewöhnlich nur Daten oder andere Inline-Elemente enthalten. Block-Elemente bilden also gröbere Strukturen als Inline-Elemente.
- Block-Elemente werden anders dargestellt als Inline-Elemente. Block-Elemente beginnen in einer neuen Zeile, Inline-Elemente nicht. Oftmals wird zwischen Block-Elementen ein Abstand dargestellt, zum Beispiel bei Absätzen oder Überschriften, um diese voneinander abzugrenzen.
Das Element body darf in der strikten Version von XHTML keine Inline-Elemente beinhalten. Sie müssen solche Elemente also immer in einem Block-Element einschließen.
Später im Kapitel über CSS werde ich noch weiter auf Block- und Inline-Elemente eingehen.
Element Identifier: Die Attribute id und class
- Die Universalattribute
idundclassdienen dazu, ein Element genauer zu bezeichnen. - Eine ID ist ein eindeutiger Bezeichner, d.h. eine ID gleichen Namens darf in einem Dokument nur ein einziges Mal vorkommen. Eine ID hat folgende Funktionen:
- Ziel-Anker für Hyperlinks.
- Mit speziellen CSS-Selektoren können Sie für ein Element, das die entsprechende ID besitzt, eigene Regeln festlegen.
- Die Javascript-Methode
getElementById()greift auf ein Element zu, das die entsprechende ID besitzt. - Feinere Strukturierung des Quelltextes.
- Klassen hingegen können in einem Dokument mehrfach vorkommen. So können auch unterschiedliche Elemente die selbe Klasse aufweisen. Klassen haben folgende Funktionen:
- Mit speziellen CSS-Selektoren können Sie für Elemente, die eine entsprechende Klasse besitzen, eigene Regeln festlegen.
- Feinere Strukturierung des Quelltextes.
IDs und Klassen werden wie gewöhnliche Attribute in das Start-Tag des Elementes geschrieben:
<p id="navigation">
<em class="wichtig">Elemente können auch zu mehreren Klassen gehören, zum Beispiel zu der Klasse »wichtig« und zu der Klasse »extern«. Zählen Sie die Klassennamen einfach mit einem Leerzeichen getrennt auf:
<em class="wichtig extern">- Element Indentifier sollten nach Konzepten benannt werden, nicht nach optischen Gesichtspunkten. Ein Bezeichner »beispiel« ist sinnvoller als als Bezeichner »blau-kursiv«, spätestens dann, wenn Sie das Layout der Seite ändern und ein Beispiel eben nicht mehr blau und kursiv sein soll. Darüber hinaus erhöhen sinnvolle Bezeichnung die Lesbarkeit des Quelltextes.
Gruppierung: Die Elemente div und span
- Die Elemente
divundspanermöglichen es zusammen mit den Attributenidundclass, ein Dokument zusätzlich zu strukturieren. Diese Elemente können immer dann verwendet werden, wenn kein geeignetes Element existiert. Mit dem Block-Elementdivkönnen Sie Elemente zusammenfassen, mit dem Inline-Elementspankönnen Sie Teile eines Elementes besonders kennzeichnen. Beide Elemente werden oft zusammen mit Stylesheets verwendet.
Ein kleines Beispiel: Wir wollen ein XHTML-Dokument erstellen, das auf Datenbankinformationen beruht und eine DVD-Sammlung präsentiert. Da es in XHTML keine Elemente für DVD-Titel, Erscheinungsjahr oder Darsteller gibt, könnte eine Lösung wie folgt aussehen:
<div class="dvd" id="titanic">
<h2>Titanic</h2>
<table>
<tr><th>Originaltitel:</th><td>Titanic</td></tr>
<tr><th>Erscheinungsjahr:</th><td>1997</td></tr>
<tr><th>Darsteller:</th>
<td><span class="hauptdarsteller">Leonardo DiCaprio, Kate Winslet</span>,
Billy Zane, Kathy Bates, Frances Fisher</td></tr>
</table>
</div>
<div class="dvd" id="sieben">
<h2>Sieben</h2>
<table>
<tr><th>Originaltitel:</th><td>Seven</td></tr>
<tr><th>Erscheinungsjahr:</th><td>1998</td></tr>
<tr><th>Darsteller:</th>
<td><span class="hauptdarsteller">Brad Pitt, Morgan Freeman</span>,
Gwyneth Paltrow, Kevin Spacey</td></tr>
</table>
</div>