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.
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>
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?
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>
abbr
und acronym
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.
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
undstrong
(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