Die Sidebar beinhaltet zum einen das Kontaktfeld, zum anderen den Teaser auf das Rezept des Tages.
Das Kontaktfeld ist eine gute Übung, Darstellung von Semantik zu unterscheiden. Nicht immer ist das, was wie eine Überschrift aussieht (groß und fett), auch tatsächlich eine.
Werfen wir einen Blick auf den Text, der im Kontaktfeld steht, losgelöst von Formatierungen wie Schriftgröße oder -gewicht. Das hilft uns, ihn semantisch einzuordnen.
Kontaktdaten
0123 654321-0
Musterstr. 123 – 43210 Musterstadt
»Kontaktdaten« ist offensichtlich
die Überschrift für die darunterstehenden
Kontaktinformationen. Aber welche Art von Überschrift? In
Kapitel 5.1.1 weise ich darauf hin, dass Überschriften eine
Hierarchie bilden sollen. Eine Überschrift erster Ordnung
gibt es bereits, das Logo, also müssen wir nun das Element
h2 verwenden.
Wie die Telefonnummer und die Adresse
auszuzeichnen sind, darüber lässt sich streiten. Als
eine ungeordnete Liste von Kontaktdaten (ul)? Das erscheint
mir »übertrieben semantisch« zu sein. Mit
div? Eher zu wenig Semantik. Hier
mag p der richtige Elementtyp
sein.
<body>
<h1><img src="images/logo.png" alt="Kochbar" width="288" height="100" /></h1>
<ul>
<li><strong title="Hier befinden Sie sich gerade.">Startseite</strong></li>
<li><a href="ueber-uns.html">Kochbar</a></li>
<li><a href="speisekarte.html">Speisekarte</a></li>
<li><a href="oeffnungszeiten.html">Öffnungszeiten</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
</ul>
<h2>Kontaktdaten</h2>
<p>0123 654321-0</p>
<p>Musterstr. 123 – 43210 Musterstadt</p>
</body>
Übung: Kontaktdaten und Teaser
- Ergänzen Sie Ihre
index.html. - Überlegen Sie sich nun, wie Sie den Teaser auf das Rezept des Tages auszeichnen wollen. Gibt es Überschriften? Falls ja, welche?
Sind Sie auch zu folgendem Ergebnis gekommen?
<body>
<h1><img src="images/logo.png" alt="Kochbar" width="288" height="100" /></h1>
<ul>
<li><strong title="Hier befinden Sie sich gerade.">Startseite</strong></li>
<li><a href="ueber-uns.html">Kochbar</a></li>
<li><a href="speisekarte.html">Speisekarte</a></li>
<li><a href="oeffnungszeiten.html">Öffnungszeiten</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
</ul>
<h2>Kontaktdaten</h2>
<p>0123 654321-0</p>
<p>Musterstr. 123 – 43210 Musterstadt</p>
<h2>Rezept des Tages</h2>
<h3>Mulligatawny</h3>
<p>Eine ursprünglich sehr scharfe indische Hühnersuppe, gewürzt mit Curry und Ingwer. Wir empfehlen die sanfte, englische Version. <a href="rezepte/mulligatawny.html">Rezept ansehen</a></p>
</body>
»Rezept des Tages« ist eindeutig eine Überschrift. Sie ist gleichrangig mit der Überschrift »Kontaktdaten«, also ebenfalls eine Überschrift zweiter Ordnung. »Mulligatawny« ist dieser Überschrift unter- und dem darunterstehenden Absatz übergeordnet: Eine Auszeichnung als Überschrift dritter Ordnung bietet sich an.
Folgende Auszeichnung hat übrigens ebenfalls einen gewissen Charme:
<dl> <dt>Mulligatawny</dt> <dd>Eine ursprünglich sehr scharfe indische Hühnersuppe, gewürzt mit Curry und Ingwer. Wir empfehlen die sanfte, englische Version. <a href="rezepte/mulligatawny.html">Rezept ansehen</a><dd> </dl>
Allerdings bin ich kein Freund von Listen, die
nur aus einem Listenpunkt bestehen. Die Auszeichnung mit
h3 und p gefällt mir
besser – belassen wir es dabei.
Mit der Auszeichnung der Sidebar-Inhalte sind
wir zwar fertig, allerdings ist das Ergebnis noch nicht ganz
zufriedenstellend. Was haben wir erreicht? Eine lose Abfolge von
Überschriften und Absätzen. Es ist nicht erkennbar,
dass es sich um die Sidebar handelt, die zwei voneinander
getrennte Inhalte umfasst. Diese Informationen sollten wir
abschließend mittels einiger div-Elemente
hinzufügen.
<body>
<h1><img src="images/logo.png" alt="Kochbar" width="288" height="100" /></h1>
<ul>
<li><strong title="Hier befinden Sie sich gerade.">Startseite</strong></li>
<li><a href="ueber-uns.html">Kochbar</a></li>
<li><a href="speisekarte.html">Speisekarte</a></li>
<li><a href="oeffnungszeiten.html">Öffnungszeiten</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
</ul>
<div id="sidebar">
<div id="contact">
<h2>Kontaktdaten</h2>
<p>0123 654321-0</p>
<p>Musterstr. 123 – 43210 Musterstadt</p>
</div>
<div id="teaser">
<h2>Rezept des Tages</h2>
<h3>Mulligatawny</h3>
<p>Eine ursprünglich sehr scharfe indische Hühnersuppe, gewürzt mit Curry und Ingwer. Wir empfehlen die sanfte, englische Version. <a href="rezepte/mulligatawny.html">Rezept ansehen</a></p>
</div>
</div>
</body>
div-Elemente fassen zusammen, was zusammengehörtUm Elemente zu Gruppen zusammenzufassen,
hätten die div-Elemente allein genügt;
die Bezeichner sidebar, contact und
teaser hätten wir nicht
hinzufügen müssen. Allerdings erläutern diese den
Zweck der div-Elemente für jene, die
einen Blick in den Quelltext werfen, und werden uns später
zunutze sein, wenn es um das Styling der Website geht.
Übung: Feinstrukturierung der Sidebar
- Ergänzen Sie Ihre
index.html. - Speichern Sie und betrachten Sie das Ergebnis im Browser. Vergleichen Sie es mit Abbildung 8.10.
- Entfernen Sie die
div-Elemente oder fügen Sie weitere hinzu. Ändern Sie die Namen der Bezeichner. Sie werden feststellen, dass die Feinstrukturierung keinen Einfluss auf die Darstellung des Dokuments hat – zumindest so lange, wie wir noch kein Stylesheet eingebunden haben.
Kümmern wir uns als Nächstes um den Inhaltsbereich.