Text über XHTML strukturieren (Teil 2)
Weitere Elemente zur Textstrukturierung
Bestimmte XHTML-Elemente dienen dazu, einzelne Teile eines Absatzes besonders auszuzeichnen. So markiert beispielsweise em einen betonten Text. Wie der sogenannte Text jedoch angzeigt wird, ist nicht vorgesehen, sondern Sache des Browsers. Die genaue Formatierung sollten wir daher über CSS steuern. Diese Elemente werden auch logische Auszeichnungen genannt.
| Elementname | Formatierung |
|---|---|
| em | betont |
| strong | stärker betont als em |
| cite | Zitat oder Verweis auf eine andere Quelle |
| dfn | Definition |
| code | Codefragment |
| samp | Output von Script oder einem anderem Programm |
| kbd | Benutzereingabe |
| var | Variable |
| abbr | Abkürzung |
| acronym | Akronym |
| sub | Text hochgestellt |
| sup | Text tiefgestellt |
XHTML Text- und Absatzformatierung
Darüber hinaus gibt es mehrere XHTML-Elemente, die direkt zur Textformatierung dienen. Diese Elemente werden auch als physikalische Auszeichnungen bezeichnet, da sie dem Browser vorgeben, wie ein Text dargestellt werden soll. Dazu zählen zum Beispiel die Elemente b (bold = fett) und i (italic = kursiv).
<p><i>Kursiv</i> und <b>fett</b> innerhalb eines Absatzes. Diese beiden Elemente können auch <b><i>kombiniert</i></b> werden.</p>
Nicht alle diese Elemente sind vom W3C als deprecated (veraltet) eingestuft. Trotzdessen empfiehlt es sich statt ihrer auf CSS zurückzugreifen.
| Elementname | Formatierung |
|---|---|
| tt | steht für Teletyp, d.h. eine Schrift, bei der alle Buchstaben gleich breit sind (diktengleich). Besser ist aber stattdessen die Schriftart über die CSS-Eigenschaft font-family festzulegen |
| i | italic - kursiv. Ersetzen durch CSS-Eigenschaft font-style: italic. |
| b | bold - fetter Text. Ersetzen durch CSS-Eigenschaft font-weight: bold. |
| big | größere Schrift. Besser stattdessen Schriftgröße über CSS (font-size) festlegen. |
| small | kleinere Schrift. Besser stattdessen Schriftgröße über CSS (font-size) festlegen. |
| strike | deprecated: durchgestrichener Text. Ersetzen durch CSS-Eigenschaft text-decoration: line-through. |
| s | deprecated: strike-through - durchgestrichener Text. Ersetzen durch CSS-Eigenschaft text-decoration: line-through. |
| u | deprecated: underlined - unterstrichener Text. Ersetzen durch CSS-Eigenschaft text-decoration: underline. |
Ob die drei als deprecated gekennzeichneten Elemente - strike, s, u - im Dokument offiziell noch erlaubt sind, hängt vom Dokumententtyp ab. Bei HTML Strict und XHTML Strict sind sie nicht gestattet, bei HTML Transitional und XHTML Transitional hingegen schon.
Veraltete Formatierungen über XHTML
Ebenfalls veraltet ist das Element font zur Schriftformatierung. Über Attribute lassen sich hier weitere Formatierungen bestimmen. So kann man über <font-color="red" size="4" family="Arial">... Text ...</font> einen roten Text in Arial in Schriftgröße 4 gestalten.
Eine ebenfalls veraltete Art, Text- und Hintergrundfarbe eines Dokuments global festzulegen, ist über spezielle Attribute im body-Element.
<body text="black" link="blue" vlink="red" alink="green" bgcolor="white">... ...</body>
Hiermit wird als Textfarbe schwarz, für normale Links (link) blau, für besuchte Links (vlink) rot und für aktive Links (alink) grün festgelegt. Die Hintergrundfarbe (bgcolor) ist weiß.
Genauso ist auch das Attribut align veraltet, das zur Ausrichtung von Blockelementen wie Absätze oder Überschriften dient.
<h1 align="center">Zentrierte Überschrift</h1>
Von einem Einsatz der vorangestellten Elemente/Attribute ist abzuraten, da, abgesehen davon, dass sie veraltet sind, ihre Handhabung sehr umständlich ist. So müssten wir zum Beispiel beim Einsatz von font jedes Element extra auszuzeichnen. Über CSS geht dies wesentlich komfortabler und effektiver.
Inline- und Blockelemente
Man unterscheidet in XHTML Inline- und Blockelemente. Blockelemente sind zum Beispiel Überschriften (h1-h6) oder Absätze (p). Sie erzeugen einen eigenen Block, d.h., ein Zeilenumbruch davor und danach. Inline-Elemente hingegen ordnen sich im Textfluss an und unterbrechen ihn nicht. Typische Vertreter sind strong, em, abbr oder acronym.
Diese vorgestellten Elemente haben jedoch meist noch andere Eigenschaften und damit verbunden ist eine standardmäßige Darstellung im Browser. Anders ist es bei dem Blockelement div (division = Bereich) und bei dem Inline-Element span, welche eigenschaftslos sind. So erzeugt das Blockelelement p (Absatz) zusätzlich zum Zeilenumbruch auch standardmäßig einen Abstand nach oben und unten, div hingegen nicht.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>div und p im Vergleich</title>
</head>
<body>
<h1>Einsatz von div</h1>
<div>Ein Beispieltext</div>
<div>Ein Beispieltext</div>
<div>Ein Beispieltext</div>
<h1>Einsatz von p</h1>
<p>Ein Beispieltext</p>
<p>Ein Beispieltext</p>
<p>Ein Beispieltext</p>
</body>
</html>
span erzeugt als Inline-Element keinen Zeilenumbruch und hat für sich allein im Dokument eingesetzt keine sichtbare Auswirkung und auch keine eigene Bedeutung. div und span eignen sich deswegen hervorragend zur Formatierung mit CSS.
div wird häufig eingesetzt, um die großen Bereiche von Webseiten zu kennzeichnen, wie die Navigation, den Inhaltsbereich oder die Fußzeile, um dann eine eigene Formatierung per CSS zu erhalten.
Im Allgemeinen können in XHTML Inline-Elemente in Blockelementen enthalten sein, zum Beispiel kann innerhalb eines Absatzes p ein Ausschnitt durch das Element strong besonders betont werden. Umgekehrt dürfen jedoch Inline-Elemente selbst keine Blockelemente enthalten.