Zurück: Der Aufbau eines XHTML-Dokumentes
Weiter: Listen

Einige Elemente im body des Dokumentes

Nachdem Sie nun wissen, wie ein XHTML-Dokument generell aufgebaut ist, wollen wir es nun mit Leben füllen. Einige der Elemente, aus denen sich ein XHTML-Dokument zusammensetzt, möchte ich Ihnen auf dieser Seite vorstellen. Ich werde Ihnen zeigen, wie Sie

auszeichnen bzw. einfügen.

Auf Listen, Tabellen, Anker und andere Elemente, die innerhalb von body oder head vorkommen können, werde ich auf den folgenden Seiten eingehen.

Überschriften: Die Elemente h1, h2, h3, h4, h5, h6

Wenn Sie die einzelnen Überschriften in einem Testdokument einsetzen, werden Sie sehen, dass ihr Browser die Überschriften je nach Wichtigkeit unterschiedlich groß und fett darstellt. Die Darstellung lässt sich allerdings beliebig mit CSS beeinflussen. Ihr individuelles Empfinden der einzelnen Schriftgrößen als zu groß, zu klein oder genau richtig sollte Sie daher nicht davon abhalten, Überschriften inhaltlich und logisch richtig einzusetzen.

Paragraphen: Das Element p

Zwischen Textabsätzen hält der Browser automatisch einen gewissen Abstand ein. Sehen Sie sich dazu einfach folgendes Beispiel an:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title>Überschriften und Absätze</title>
</head>

<body>

<h1>Überschrift erster Ordnung</h1>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat.</p>

<p>Duis autem vel eum iriure dolor in hendrerit in vulputate
velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero et accumsan et iusto odio dignissim qui blandit
praesent luptatum zzril delenit augue duis dolore te feugait
nulla facilisi. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim
veniam, quis nostrud exerci tation ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat.</p>

<h2>Überschrift zweiter Ordnung</h2>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat.</p>

<h3>Überschrift dritter Ordnung</h3>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat.</p>

<h3>Überschrift dritter Ordnung</h3>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat.</p>

<h2>Überschrift zweiter Ordnung</h2>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat.</p>

</body>
</html>

Beispieldokument ansehen

Spätestens hier, wenn Sie einen längeren Text mit p ausgezeichnet haben, werden Sie eine der Stärken von XHTML festgestellt haben. Der Browser bricht den Text automatisch am Fensterrand um. Wenn Sie das Browserfenster verkleinern und in der Größe verändern, wird der Text mit der Fenstergröße skaliert. Dieses Verhalten werden Sie bei fast allen Elemente beobachten. Diese Fähigkeit von XHTML, sich an das Ausgabemedium anzupassen, ist ein Grund für die Plattformunabhängigkeit des Mediums World Wide Web.

Zeilenumbruch: Das Element br

Ein Gedicht (hier: »Der Panther« (1903) von Rainer Maria Rilke) würde zum Beispiel wie folgt ausgezeichnet werden:

<p>Sein Blick ist vom Vorübergehn der Stäbe<br />
so müd geworden, daß er nichts mehr hält.<br />
Ihm ist, als ob es tausend Stäbe gäbe<br />
und hinter tausend Stäben keine Welt.</p>

<p>Der weiche Gang geschmeidig starker Schritte,<br />
der sich im allerkleinsten Kreise dreht,<br />
ist wie ein Tanz von Kraft um eine Mitte,<br />
in der betäubt ein großer Wille steht.</p>

<p>Nur manchmal schiebt der Vorhang der Pupille<br />
sich lautlos auf -. Dann geht ein Bild hinein,<br />
geht durch der Glieder angespannte Stille -<br />
und hört im Herzen auf zu sein.</p>

Mehrere Zeilenbrüche hintereinander sollten Sie vermeiden. Eine Leerzeile erreichen Sie durch Absätze, vertikale Abstände zwischen Elementen später durch CSS.

Präformatierter Text: Das Element pre

Dieses Verhalten ist vorteilhaft, wenn die flexible Darstellung von XHTML die Darstellung Ihres Textes verhindert, zum Beispiel bei Gedichten, Quelltextbeispielen oder ASCII-Zeichnungen:

                          /\          /\
                         ( \\        // )
                          \ \\      // /
                           \_\\||||//_/
                            \/ _  _ \
                           \/|(O)(O)|
                          \/ |      |
      ___________________\/  \      /
     //                //     |____|
    //                ||     /      \
   //|                \|     \ 0  0 /
  // \       )         V    / \____/
 //   \     /        (     /
""     \   /_________|  |_/
       /  /\   /     |  ||
      /  / /  /      \  ||
      | |  | |        | ||
      | |  | |        | ||
      |_|  |_|        |_||
       \_\  \_\        \_\\

pre ist für die Auszeichnung von Fließtext ungeeignet!

Adressen: Das Element address

<address>Fragen an den Webmaster 
<a href="mailto:webmaster@example.com">webmaster@example.com</a></address>

Zitate: Die Elemente blockquote, q und cite

Folgendes Dokument mit einem Beispiel von Michael Nahrath verdeutlicht die Anwendung dieser Elemente:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title>Zitate auszeichnen</title>
</head>

<body>

<p>In <cite>Learning HTML 3.2 by Examples</cite> beschreibt Jukka
Korpela als Zweck des Elementes <code>cite</code> <q cite=
"http://www.cs.tut.fi/~jkorpela/HTML3.2/5.15.html" lang="en">To
present a citation or reference to other sources, such as a book
title.</q></p>

<p>Ebenfalls in <cite>Learning HTML 3.2 by Examples</cite>
führt er aus:</p>

<blockquote cite="http://www.cs.tut.fi/~jkorpela/HTML3.2/5.15.html"
lang="en">
  <p>There are different opinions and practices on whether CITE is
  to be used for such citations as titles of books only or for
  quoting sentences or words in general. The official documents are
  laconic: for example, <cite>HTML 3.2 Reference
  Specification</cite> says that CITE is <q cite=
  "http://www.w3.org/TR/REC-html32.html">used for citations or
  references to other sources</q>.</p>
</blockquote>

<p>Diese Frage wird in <a href=
"http://www.w3.org/TR/html401/struct/text.html#edef-CITE" lang=
"en"><cite>html 4.01</cite></a> zwar auch nicht explizit
beantwortet, durch die Einführung des Elementes <code>q</code> für zitierten
Text implizit allerdings schon.</p>

</body>
</html>

Beispieldokument ansehen

Alle aktuellen Browser stellen die Elemente blockquote und cite anders dar als gewöhnlichen Fließtext, blockquote zumeist eingerückt, cite in kursiver Schrift. Längere Zitate und deren Quellen werden dadurch auch optisch verdeutlicht.

In einigen fehlerhaften Browsern macht das Element q hingegen Probleme. Aktuelle Versionen des WinIE setzen keine Anführungszeichen um zitierten Text. NN4 kennt das Element q überhaupt nicht. Das Zitat ist in diesen Browsern nicht von gewöhnlichen Fließtext zu unterscheiden und dadurch nicht direkt als solches erkennbar.

Ein möglicher Workaround ist eine Verwendung von q und span zusammen. Farb- oder Schriftdeklarationen könnte man dann für span.zitat vornehmen, somit wäre das Zitat auch im NN4 von Fließtext zu unterscheiden. Dazu kommen wir später im Kapitel über CSS. Hier nur der XHTML-Quelltext:

<p>In <cite>Learning HTML 3.2 by Examples</cite> beschreibt Jukka
Korpela als Zweck des Elementes <code>cite</code> <q cite=
"http://www.cs.tut.fi/~jkorpela/HTML3.2/5.15.html" lang="en">
<span class="zitat">To present a citation or reference to other
sources, such as a book title.</span></q></p>

Von der manuellen Setzung von Anführungszeichen ist in jedem Fall abzuraten, da es nicht zu vermeiden ist, dass Doppelungen der Anführungszeichen in dem einen oder anderen User-Agent vorkommen.

Mangelhaft ist auch die Unterstützung des cite-Attributs. Lediglich iCab und Mozilla zeigen die Referenz entweder direkt im Kontextmenü oder unter »Properties« an. Mit CSS oder externen Tools lassen sich die im cite-Attribut angeführten Verweise allerdings zugänglich machen.

Grafiken: Das Element img

Eine typische Einbindung eines Bildes gestaltet sich wie folgt:

<img src="bilder/logo.jpg" width="352" height="91"
 alt="alternativer Text" title="Tooltip" />

Die Attribute alt und title

<img src="bilder/logo.jpg" width="352" height="91"
 alt="Eine Einführung in XHTML, CSS und Webdesign" />

Möchten Sie keinen alternativen Text angeben, was immer dann sinnvoll ist, wenn die Grafik keine Information transportiert, sondern lediglich aus optischen Gründen eingebunden wurde, definieren Sie alt="".

NN4 und selbst aktuelle Versionen des IE zeigen den Inhalt das alt-Attributs als Tooltipp an, wenn kein title-Attribut angegeben ist. Dies ist sehr unglücklich und hat zusammen mit der Tatsache, dass NN4 title überhaupt nicht anzuzeigen vermag, zu der irrigen Annahme geführt, man könne das alt-Attribut als Tooltipp missbrauchen. In aktuellen Browsern (nicht in NN 4) können Sie die Anzeige des alternativen Textes als Tooltipp unterbinden, wenn Sie title="" definieren.

Abkürzungen und Akronyme: Die Elemente abbr und acronym

<abbr title="beziehungweise">bzw.</abbr>
<abbr title="zum Beispiel">z.B.</abbr>

<acronym title="North Atlantic Treaty Organisation">NATO</acronym>
<acronym title="Uniform Resource Locator">URL</acronym>

Trennlinien: Das Element hr

<hr />

Einige Autoren zweifeln den Sinn von derartigen Trennlinien jedoch an, auch ich. Horizontale Linien sind mehr Layout als Textauszeichnung und daher nur bedingt als Anwendungsbereich von XHTML zu sehen. Auch ist es zumeist sinnvoller, direkt für die Elemente per CSS Trennlinien per Rahmen unten oder oben zu deklarieren, wozu wir im vierten Kapitel noch kommen werden.

Zurück: Der Aufbau eines XHTML-Dokumentes
Weiter: Listen
Zum Seitenanfang