XHTML enthält sowohl Elementtypen zur logischen Auszeichnung von (inzeiligem) Text als auch Elementtypen zur physischen Textauszeichnung. Logische Auszeichnung versieht Inhalte mit einer bestimmten Semantik, während die physische Textauszeichnung eine Aussage über die Darstellung der Elemente trifft.

Logische Textauszeichnung: Die Elementtypen em, strong, dfn, code, samp, kbd und var

Elemente der logischen Textauszeichnung versehen Teile eines (inzeiligen) Texts mit einer inhaltlichen Bedeutung. Neben weiteren, die an anderen Stellen dieser Einführung erläutert werden, gehören die folgenden zu den Elementen der logischen Textauszeichnung. Abbildung 5.5 zeigt die Standarddarstellung in Firefox 3 und in Safari 3.

Abb. 5.5: Firefox 3 und Safari 3 stellen die Elemente em, strong, code, dfn, samp, kbd und var ähnlich dar

Das Element em kennzeichnet Text als betont.

<p>Denken Sie <em>nicht</em> an einen rosa Elefanten!</p>

Das Element strong kennzeichnet Text als stark betont.

<p><strong>Es ist ein Fehler aufgetreten!</strong></p>

Da strong-Elemente in Browsern im Allgemeinen fett und em-Elemente kursiv dargestellt werden, glauben viele Webautoren, strong und em seien die besseren b und i. Dieser Gedanke ist nicht von der Hand zu weisen, schließlich wird ein Text tatsächlich dadurch betont, dass er fett oder kursiv formatiert wird, jedoch bleibt diese Betonung rein visuell. Andere Arten von Benutzerprogrammen, beispielsweise Screenreader oder Suchmaschinen, bemerken von der Betonung nichts – anders als bei der semantischen Auszeichnung mit strong oder em.

Das Element code kennzeichnet Text als Quelltext.

<p>Ein Element <code>p</code> darf nur Inline-Elemente enthalten.</p>

Das Element dfn kennzeichnet Text als Definition.

<p><dfn>Das Element <code>dfn</code></dfn>
  kennzeichnet Text als Definition.</p>

Beachten Sie, dass nicht die Definition, sondern der zu definierende Term ausgezeichnet wird.

Das Element samp kennzeichnet Text als Ausgabebeispiel unter anderem von Programmen oder Scripts.

<p>Die Verwendung eines ungültigen Elements
  moniert der Validator wie folgt: <samp>Error Line 146
  column 14: element "h" undefined.</samp></p>

Das Element kbd kennzeichnet Text als Benutzereingabe.

<p>Bitte bestätigen Sie mit <kbd>ENTER</kbd>.</p>

Das Element var kennzeichnet Text als Variable oder Programmargument.

<p>Wählen Sie zur Abstimmung 0123 456789-<var>x</var>
  und die Endziffer Ihres Favoriten.</p>

Zum Seitenanfang

Kennzeichnen von Dokumentänderungen: Die Elementtypen del und ins

Die Elemente del und ins kennzeichnen Text als nicht mehr gültig beziehungsweise als neu hinzugefügt.

<p>Der Verein hat <del>42</del>
  <ins>68</ins> Mitglieder.</p>

Abb. 5.6: Alle Browser stellen del durch- und ins unterstrichen dar

Über die Attribute cite und datetime können Webautoren nähere Angaben zum Grund der Änderung machen.

Das Attribut cite dient der Angabe einer Ressource mittels eines URI, die als Grund für die Änderung gelten kann – beispielsweise eine W3C-Empfehlung oder eine Norm.

<p>Bei sehr umfangreichen Dokumenten kann es sinnvoll
  sein, Querverweise innerhalb des Dokuments zu setzen.
  In <acronym>HTML</acronym> können Webautoren
  dies über ein Element <code>a</code> mit dem
  Attribut <code>name</code> realisieren. <ins
  cite="http://www.w3.org/TR/xhtml1/#h-4.10">In
  <acronym>XHTML</acronym> ist dieses Attribut für
  Anker missbilligt.</ins></p>

Wenn Sie sich das Beispiel in einem Browser anschauen, werden Sie zwei Dinge feststellen (vgl. Abbildung 5.7):

• Ihr Browser stellt den hinzugefügten Text mit hoher Wahrscheinlichkeit unterstrichen dar. Dies ist sehr unglücklich, schließlich gilt im Web die Regel, dass es sich bei unterstrichenen Texten um Links handelt. Sie sollten die Unterstreichung daher per CSS durch Fettdruck ersetzen.
• Ganz gleich, auf welche Weise der Textabschnitt sich visuell vom Rest des Absatzes unterscheidet, es ist auf den ersten Blick nicht zu erkennen, weshalb er sich davon unterscheidet. Der Verweis auf die Quelle ist entweder überhaupt nicht oder nur über Umwege zugänglich, etwa über ein Eigenschaftenmenü.

Abb. 5.8: Der Wert des cite-Attributs ist in Firefox über das Eigenschaftenfenster zugänglich

Vor allem aus dem zweiten Grund wird das Element ins im Web nur zusammen mit del verwendet, zudem häufig so, dass auch am Kontext ersichtlich ist, dass es sich um eine Änderung handelt.

Das Attribut datetime spezifiziert den Zeitpunkt der Änderung als ISO-Datumsformat.

Das Datumsformat hat die Form YYYY-MM-DDThh:mm:ssTZD. YYYY ist eine vierstellige Jahresangabe, MM eine zweistellige Monatsangabe (01 bis 12), DD eine zweistellige Tagesangabe (01 bis 31). Der Buchstabe T trennt Datums- und Zeitangabe voneinander. hh gibt die Stunde an (00 bis 23), mm die Minute (00 bis 59), ss die Sekunde (00 bis 59) – jeweils zweistellig. TZD steht für die Angabe der Weltzeit UTC. Über eine Angabe in der Form +hh:mm oder -hh:mm geben Sie die Differenz zwischen Weltzeit und lokaler Zeit an. Der Wert 2006-03-12T15:22+01:00 steht beispielsweise für den 12. März 2006, 15 Uhr 22 nach UTC-Zeit plus eine Stunde, also 16:22 Uhr MEZ.

Uhrzeit und Zeitzonenangabe werden häufig weggelassen.

<p>Der Verein hat <del datetime="2005-01-01">42</del>
  <ins datetime="2006-01-01">68</ins> Mitglieder.</p>

Auch der Wert von datetime ist entweder überhaupt nicht oder nur über ein Eigenschaftenmenü zugänglich. Daher kann es sinnvoll sein, den Grund der Änderung zusätzlich genauer (und menschenlesbar) über das Attribut title zu beschreiben.

<p>Der Verein hat <del datetime="2005-01-01"
  title="Stand: Januar 2005">42</del> <ins datetime="2006-01-01"
  title="Stand: Januar 2006">68</ins> Mitglieder.</p>

Abb. 5.8: Im Vergleich zu Abbildung 5.6 ist der Zeitpunkt der Änderung nun zugänglich, aber wer kommt schon auf die Idee, sich den Tooltipp anzeigen zu lassen?

Zum Seitenanfang

Abkürzungen und Akronyme: Die Elementtypen abbr und acronym

Westliche Sprachen machen intensiven Gebrauch von Abkürzungen und Akronymen. Andere Sprachen verwenden analoge Abkürzungsmechanismen, beispielsweise Chinesisch und Japanisch, in denen ein langer Name durch einen Teil der Han-Zeichen des vollständigen Namens repräsentiert wird.

Das Element abbr zeichnet eine Abkürzung aus. Eine Abkürzung ist die verkürzte Form eines Worts oder einer Wortgruppe wie »z. B.«, »usw.« oder »Abk.«.

Das Element acronym zeichnet ein Akronym aus. Ein Akronym ist ein Sonderfall der Abkürzung. Laut Duden handelt es sich um ein Kunstwort, das aus den Anfangsbuchstaben mehrerer Wörter zusammengesetzt ist, beispielsweise »EDV«, »WWW« oder »CDU«.

Laut Bedingung 4.2 der BITV müssen Abkürzungen und Akronyme bei ihrem ersten Auftreten kenntlich gemacht und erläutert werden (siehe auch [Hellbusch 2005]). Diese Erläuterung erfolgt über das Attribut title:

<p>Webautoren benötigen Kenntnisse in vielen Sprachen, <abbr title="zum Beispiel">z.B.</abbr> in <acronym lang="en" xml:lang="en" title="">HTML</acronym> und <acronym lang="en" xml:lang="en" title="Cascading Style Sheets">CSS</acronym>. <acronym>HTML</acronym> ist noch immer die populärste Sprache des Webs, wird aber zunehmend von <acronym lang="en" xml:lang="en" title="Extensible Hypertext Markup Language">XHTML</acronym> verdrängt.</p>

Abb. 5.9: Erklärung der Abkürzung als Tooltipp

Die Auszeichnung und Erläuterung von Abkürzungen und Akronymen ist sinnvoll, da Webautoren nicht davon ausgehen können, dass alle Nutzer deren Bedeutung kennen, entweder weil die Abkürzung nicht allgemein bekannt oder weil dem Nutzer die deutsche Sprache oder das Thema des Texts nicht so geläufig ist. Darüber hinaus liefert die Auszeichnung dieser Konstrukte nützliche Informationen für Werkzeuge wie Rechtschreibkontrollen, Übersetzungssysteme und Suchroboter. Nutzer von Screenreadern können veranlassen, dass Abkürzungen und Akronyme durch deren Erläuterung ersetzt werden, also nicht die abgekürzte, sondern die ausformulierte Form vorgelesen wird.

Zum Seitenanfang

Physische Textauszeichnung: Die Elementtypen i, b, tt, big und small

Elemente der physischen Textauszeichnung versehen Teile eines (inzeiligen) Texts mit einer visuellen Formatierung. Sie treffen keine Aussage über die Semantik des enthaltenen Texts und gehören daher zu den Elementen, auf die Sie wenn möglich im Sinne der Trennung von Markup und Layout zugunsten von CSS verzichten sollten. Folgende Elemente sind auch in der strikten XHTML-Variante enthalten.

Das Element i formatiert einen Text kursiv.

<p>Ein <i>Text in kursiver Schrift</i>.</p>

Das Element b formatiert einen Text fett.

<p>Ein <b>Text in fetter Schrift</b>.</p>

Die Verwendung der Elemente i und b erübrigt sich häufig aus einem der beiden folgenden Gründe:

• Textpassagen sind aus einem bestimmten visuellen Kontext heraus fett, der häufig über weitere Formatierungsmerkmale verfügt. Denken Sie beispielsweise an ein Navigationsmenü, das in Fettschrift gesetzt ist, aber auch noch über weitere Layouteigenschaften verfügt, beispielsweise Rahmen oder bestimmte Hintergrundeffekte. CSS ist dabei – im Sinne der konsequenten Trennung von Markup und Layout – die bessere Alternative.
• Textpassagen sollen betont werden. Dafür bietet XHTML die deutlich besser geeigneten Elemente der logischen Textauszeichnung em und strong (siehe Kapitel 5.5.1).

Das Element tt formatiert einen Text in Festbreitenschrift (Schreibmaschinenschrift).

<p>Ein <tt>Text in Festbreitenschrift</tt>.</p>

Das Element big formatiert einen Text in größerer Schrift.

<p>Ein <big>Text in großer Schrift</big>.</p>

Das Element small formatiert einen Text in kleinerer Schrift.

<p>Ein <small>Text in kleiner Schrift</small>.</p>

Es gibt Webautoren, die im Element small das Gegenstück zu strong sehen. Dieser Eindruck kann allerdings höchstens in visuellen Benutzerprogrammen entstehen; es gibt keinen Screenreader, der mit small ausgezeichnete Textpassagen leiser spricht oder gar flüstert.

Abb. 5.10: Darstellung der Elemente i, b, tt, big und small in Firefox 3 und in Safari 3