In Texten kommen häufig einzelne Ausdrücke oder Passagen vor, die eine erkennbare besondere Bedeutung haben. Beispielsweise Namensnennungen, Abkürzungen, Datums- und Zeitangaben, wörtliche Rede usw. HTML hält zur Feinauszeichnung solcher Inhalte im Text ein Set an bedeutungstragenden Elementen bereit.

Machen Sie in Ihren Texten Gebrauch von solchen Feinauszeichnungen! Bedenken Sie, dass das Markieren von Textpassagen mit semantisch passenden Auszeichnungen redaktionell gesehen nicht weniger wertvoll ist als die Texterstellung selbst!

Beispiel

<p>Die Sprache heißt <b><abbr title="Hypertext Markup Language">HTML</abbr></b>. 
Sie ist <em>nicht</em> zum Formatieren gedacht, sondern zum Strukturieren. 
In einem Dokument mit dem Titel <cite>Information Management: A Proposal</cite> 
vom  <time datetime="1989-03-13">13. März 1989</time> stellte 
<a href="http://www.w3.org/People/Berners-Lee/">Tim Berners Lee</a> 
wichtige Thesen auf, die maßgeblich zur Entwicklung von HTML beitrugen. 
In dem Dokument heißt es unter anderem: 
<q cite="http://www.w3.org/History/1989/proposal.html">The system must allow 
any sort of information to be entered. Another person must be able to find the 
information, sometimes without knowing what he is looking for.</q></p>

Manche Textauszeichnungen sind per Default optisch sichtbar, andere nicht

Erläuterung

Elemente zur Textauszeichnung können innerhalb gruppierender Elemente, aber auch direkt innerhalb des Dokumentkörpers oder innerhalb von Elementen für Webseiten-Bereiche, innerhalb von Tabellenzellen oder innerhalb von Formularen vorkommen. Das obige Beispiel zeigt einen Textabsatz mit verschiedenen markierten Textpassagen.

Alle Elemente für die Textauszeichnung bestehen aus Start- und End-Tag. Einige Elemente erwarten Attribute oder sind zumindest nur sinnvoll in Verbindung mit Attributen.

Einige der Elemente haben eine sichtbare Wirkung im Browser, z.B. Fettschrift, Kursivschrift oder Unterstreichung. Verwenden Sie diese Elemente jedoch niemals, um eine bestimmte Textformatierung zu erreichen. Für die Textformatierung sind CSS bzw. CSS-Eigenschaften zuständig. Indem Sie jedoch Textpassagen mit Elementen zur Textauszeichnung markieren, versehen Sie den Text nicht nur mit semantisch wichtigen Informationen, sondern schaffen auch die Grundlage für die Textformatierung. Denn in CSS können Sie nur formatieren, was an Elementen vorhanden ist. Je reichhaltiger und präziser ein Inhalt strukturiert ist, desto genauer lässt er sich am Ende auch mit CSS formatieren.

Nachfolgende Tabelle listet die in HTML5 definierten Elemente zur Textauszeichnung auf:

Das a-Element

Das a-Element wird im Buchabschnitt über Hyperlinks beschrieben.

Das abbr-Element

Das abbr-Element ist für Abkürzungen wie MwSt. oder F.A.Z., aber auch für Akronyme wie NATO oder PubSubHubbub gedacht. Sehr sinnvoll ist es, bei diesem Element das globale Attribut title= zu notieren, so wie bei <abbr title="Hypertext Markup Language">HTML</abbr>. Beim title-Attribut können sie die Abkürzung ausschreiben. Der Inhalt wird dem Anwender in einem grafischen Browser beim Überfahren der Textstelle mit der Maus als Tooltipp-Fenster angezeigt.

Das b-Element

Das b-Element hatte früher die Bedeutung Fettschrift, wurde in HTML5 jedoch zu einem bedeutungstragenden Element umgedeutet. Geeignet ist es beispielsweise für Stichwörter, Firmennamen oder ähnliches. Die optische Wirkungsweise in grafischen Browsern ist nach wie vor Fettschrift.

Das bdi-Element

Im Gegensatz zum unterhalb beschriebenen bdo-Element ist das bdi-Element nicht zum expliziten Vorgeben der Textrichtung gedacht. Stattdessen verlässt es sich auf die automatische Textrichtungsänderung bei unicode-fähigen Browsern. Seine Aufgabe besteht darin, in nicht eindeutigen Textumgebungen die genauen Grenzen für eine Textrichtungsänderung zu markieren. Die HTML5-Spezifikation nennt als Beispiel diesen Code: <li>User <bdi>إيان</bdi>: 3 posts</li>. Der arabische User-Name wird zwar trotz seiner Einbettung in einen englischsprachigen, von links nach rechts notierten Kontext automatisch von rechts nach links ausgegeben. Doch ohne das bdi-Element, das exakt den User-Namen auszeichnet, könnte der Alghorithmus durcheinander kommen und den nachfolgenden Doppelpunkt sowie die danach folgende Zahl möglicherweise noch mit in der anderen Schreibrichtung ausgeben.

Das bdo-Element

Mit dem bdo-Element können Sie die Textrichtung ändern. Wenn Sie HTML in Verbindung mit Sprachen benutzen, die eine andere Textrichtung als von links nach rechts haben, kann es zu Konflikten bei der Textrichtung kommen, vor allem, wenn Sie zwei Sprachen mit unterschiedlicher Textrichtung im Text gemischt verwenden. Wenn Sie Unicodes in HTML notieren, wird dabei normalerweise automatisch auch die Textrichtung der jeweiligen Sprache berücksichtigt. Wenn Sie etwa die Unicodes für ein arabisches Wort von links nach rechts notieren, sollte die Software die Zeichenkette dennoch so auflösen, dass die Darstellung von rechts nach links erfolgt, weil das die Textrichtung im Arabischen ist. Sollte das nicht funktionieren, können Sie mit Hilfe des bdo-Elements nachhelfen.

Mit <bdo dir="rtl"> leiten Sie einen Text ein, der von rechts nach links dargestellt wird, und mit <bdo dir="ltr"> einen Text, der von links nach rechts dargestellt wird. </bdo> stellt die ursprüngliche Schreibrichtung wieder her (bdo = bidirectional overwrite = Überschreiben der automatischen Bidirektionalität, rtl = right to left = von rechts nach links, ltr = left to right = von links nach rechts).

Das cite-Element

Mit diesem Element markieren Sie Titel von Büchern, Musikstücken, Filmen usw., die im Fließtext erwähnt werden. Das Element ist ausschließlich für Werktitel gedacht, nicht für Personennamen. Eine korrekte Auszeichnung ist also beispielsweise Steven Spielbergs <cite>Jurassic Park</cite>.

Das code-Element

Dieses Element dient zur Markierung von Quelltext-Fragmenten im Fließtext, zum Beispiel Code-Fragmente werden durch <code>…</code> markiert.

Die HTML5-Spezifikation schlägt vor, die im code-Element enthaltene Computersprache durch ein class-Attribut im Start-Tag zu kennzeichnen. Diesem Attribut soll der Wert "language-" plus der Name der Sprache zugewiesen werden. Also beispielsweise <code class="language-html">, <code class="language-css">, <code class="language-javascript">, <code class="language-php"> oder <code class="language-sql">. Diese Konvention können Scripts nutzen, um den enthaltenen Code durch Syntax-Highlighting besser lesbar zu gestalten.

Das dfn-Element

Dieses Element umschließt einen Ausdruck, der an eben dieser Textstelle definiert oder dessen Bedeutung in der umgebenden Textpassage erklärt wird. Beispiel: <a href="http://twick.it/"><dfn>Twick.it</dfn></a> ist ein Internetservice, bei dem User Begriffe mit jeweils 140 Zeichen erklären, wodurch ein sozialgepflegter Glossar entsteht.
Das Element ist nicht dazu gedacht, um die Definition zu markieren.

Das em-Element

Dieses Element ist für Textpassagen gedacht, auf die beim lauten Aussprechen durch Betonung das Gewicht gelegt wird. So bedeutet <em>Peter</em> war in diesem Jahr erfolgreich etwas anderes als Peter war in <em>diesem</em> Jahr erfolgreich. Die Emphasis zeigt an, wo die Betonung liegt.

Das i-Element

Das i-Element hatte früher die Bedeutung Kursivschrift, wurde in HTML5 jedoch zu einem bedeutungstragenden Element umgedeutet. Gedacht ist es demzufolge, um beispielsweise Fachausdrücke, anderssprachige Phrasen, Eigennamen oder vergleichbare Textpassagen zu markieren. Beispiel: Wenn es um Google geht, regiert in Deutschland die <i>German Angst</i>.

Das kbd-Element

Mit diesem Element können Sie in einer Dokumentation Inhalte auszeichnen, die eine Tastatureingabe darstellen. Beispiel: Mit <kbd>ls -l [Enter]</kbd> erhalten Sie ein ausführliches Verzeichnislisting. Wenn Tastenkombinationen abgebildet werden sollen, wird das Verschachteln des Elements empfohlen. Beispiel: Durch Drücken von <kbd><kbd>Alt</kbd>+<kbd>F4</kbd></kbd> wird das aktive Fenster geschlossen.
Eine etwas freizügigere Verwendung ist ebenfalls erlaubt. So etwa in diesem Beispiel: Zum Speichern bitte <kbd>Datei / Speichern</kbd> wählen. Ob der Anwender dabei die Tastatur, die Maus oder ein anderes Eingabegerät benutzt, bleibt offen.

Das mark-Element

Dieses mit HTML5 neu eingeführte Element dient dazu, markierten Text auf HTML-Ebene auszuzeichnen. In der Praxis wird das Element wohl am ehesten in Verbindung mit dynamisch generierten Inhalten zum Einsatz kommen. Wenn der Anwender zuvor beispielsweise nach einem Wort gesucht hat, könnte das gesuchte Wort in einem ausgegebenen Inhalt an allen Fundstellen optisch hervorgehoben werden. Dazu könnte das Script, das die Ausgabe generiert, das Wort jeweils in <mark>…</mark> einschließen.

Das q-Element

Dieses Element markiert wörtliche Rede oder ein Zitat mitten im Text. Beispiel: Susi fragte mich: <q>Hast du heute Lust auf Kino?</q>.

Bei dieser Art von Markierung sollte der Browser die Anführungszeichen von selbst setzen. Das q-Element wird allerdings nicht von allen noch im Einsatz befindlichen Browsern erkannt. Auch sind die Anführungszeichen, die ein Browser, der das Element kennt, setzt, nicht unbedingt die gewünschten typografischen Anführungszeichen. Lösungen zu dieser Problematik werden im Buchabschnitt über CSS und Typografie beschrieben.

Wenn es sich um ein Zitat handelt, zu dessen Quelle im Internet eine URL-Adresse existiert, sollten Sie diese in einem cite-Attribut angeben. Beispiel: <q cite="http://twitter.com/jooobi/statuses/10210000091">Habe geträumt, bei Mario Barth mit einem Witzigkeitsindikator gewesen zu sein. Kein Ausschlag. #wirr</q>. Browser sollten dem Anwender die Möglichkeit anbieten, die so angegebene URL-Adresse aufzurufen. Leider ist das bislang nicht Praxis.

Die Elemente ruby, rp und rt

Wenn Sie Texte in westlichen Alphabetsprachen erstellen, sind diese Elemente uninteressant.

In fernöstlichen Sprachen ist mitunter nicht klar, wie ein Schriftzeichen ausgesprochen wird. Zum Beispiel bei seltenen Schriftzeichen oder Zeichen für Eigennamen. Die chinesische und japanische Typografie kennt für diesen Zweck eine spezielle Annotationssyntax (Annotation = Anmerkung). Dabei wird oberhalb betroffener Schriftzeichen ein kleiner Aussprachehinweis notiert. Da sich solche Annotationen nicht allein durch Unicode-Zeichen umsetzen lassen, stellt HTML eine Syntax-Grundlage für solche Annotationen zur Verfügung.

Das nachfolgende Beispiel stammt aus dem Wikipedia-Artikel über Ruby-Annotation
(http://de.wikipedia.org/wiki/Ruby_Annotation):

<ruby>東<rp>(</rp><rt>とう</rt><rp>)</rp></ruby>
<ruby>京<rp>(</rp><rt>きょう</rt><rp>)</rp></ruby>

Das Beispiel zeichnet zwei Zeichen mit Annotationen aus. Das Zeichen inklusive Annotation werden in <ruby>…</ruby> eingeschlossen. Zunächst wird das Zeichen als Elementinhalt notiert. Um die Annotation in Klammern zu setzen, gibt es das rp-Element, um die Klammern auszuzeichnen (rp = ruby parentheses = Ruby-Klammern). Innerhalb davon wird ein rt-Element notiert (rt = ruby text). Innerhalb davon wird die Annotation notiert.

Das s-Element

Dieses Element ist anwendbar, wenn frühere Inhalte zwar stehen bleiben, aber als inhaltlich überholt gekennzeichnet werden sollen. Beispiel: Der Mörder war <s>wie immer der Gärtner</s>. So ausgezeichnete Inhalte werden in grafischen Browsern durchgestrichen dargestellt.

Wichtig ist beim Verständnis dieses Elements der Unterschied zum del-Element, das entfernten Text in Änderungsmarkierungen auszeichnet. Während das del-Element Löschkorrekturen in einem redaktionell noch nicht abgeschlossenen Dokument kennzeichnet, steht das das s-Element für eine dauerhaft inhaltliche Löschung, wobei der gelöschte Inhalt jedoch sichtbar bleiben soll.

Das s-Element war in HTML4.01 zuletzt als deprecated (missbilligt) eingestuft und sollte aus dem Standard entfernt werden, weil es ursprünglich keine semantische Bedeutung hatte, sondern einfach eine Abkürzung für die physische Auszeichnung strike-through (durchgestrichen) war. In HTML5 wurde es jedoch semantisch wie oben beschrieben umgedeutet.

Das samp-Element

Wie mehrere andere Elemente zur Textauszeichnung ist dieses Element vor allem in der technischen Dokumentation von Bedeutung. Mit dem Element lassen sich Bildschirmausgaben, Fehlermeldungen von Programmen und Ähnliches auszeichnen. Beispiel: Wenn der Name schon vorhanden ist, wird <samp>template is already existing</samp> angezeigt.

Das small-Element

Dieses Element gehört ebenfalls zu denen, die bereits in früheren HTML-Versionen existierten, dort jedoch die physische Bedeutung „kleiner dargestellt als normal“ hatte. In HTML5 wird das Element semantisch so umgedeutet, dass es nur noch für typischerweise kleingedruckte Inhalte wie Copyright-Angabe, Disclaimer usw. Beispiel: <small>@ 2010 by Example International</small>.

Das span-Element

Das span-Element ist mit dem div-Element vergleichbar. Es ist ein allgemeines Element, das im Browser nichts bewirkt. Sein Zweck besteht darin, eine Textpassage auszuzeichnen, für die es kein anderes, passenderes Element gibt, und die aber ausgezeichnet werden soll, weil sie zum Beispiel mit Hilfe von CSS optisch hervorgehoben werden soll, oder weil ein Script auf den Elementinhalt zugreifen soll. Sinnvoll ist das span-Element vor allem in Verbindung mit globalen Attributen. Beispiel: Aktueller Spielstand <span id="points">0</span> Punkte. In dem Beispiel wird das span-Element dazu verwendet, um eine Punktzahl zu markieren. Durch das globale Attribut id= wird ein dokumentweit eindeutiger Name vergeben. Ein JavaScript, das beispielsweise ein Spiel steuert, könnte dadurch direkt auf den Elementinhalt zugreifen und die Punktzahl während eines Spiels aktualisieren.
Verwenden Sie das span-Element nur, wenn es kein semantisch besser geeignetes Element gibt.

Das strong-Element

Dieses Element ist zur Markierung besonders wichtiger Textstellen gedacht. Beispiel: <strong>Warnung:</strong> Ein Abbrechen des Vorgangs kann zu Datenverlust führen!
Oder: Das <strong>Schülerhandbuch</strong> enthält Aufgaben, das <strong>Lehrerhandbuch</strong> die zugehörigen Lösungen. Die Abgrenzung zum em-Element besteht darin, dass die Hervorhebung durch das strong-Element keine subjektive Betonung darstellt, sondern Inhalte hervorhebt, die beim Lesen Signalwirkung haben sollen.

Das Element kann auch verschachtelt werden, um die Bedeutung zu steigern:
<strong><strong><strong>Achtung:</strong></strong></strong> Bei unsachgemäßer Behandlung Stromschlag-Gefahr!

Die Elemente sub und sup

sub steht für tiefgestellt (sub = Subscript), sup für hochgestellt (sup = Superscript). Beide Auszeichnungen kommen beispielsweise in technisch/mathematischen Formeln zum Einsatz. Das sup-Element wird für Exponentialzahlen verwendet. Beispiel: Mit einem Byte sind 2⁸ = 256 Zustände abbildbar.

HTML5 ermöglicht übrigens auch das Einbetten der XML-Sprache MathML für komplexe mathematische Formeln. Details dazu werden im nächsten Buchabschnitt Mathematische Formeln beschrieben.

Das time-Element

Dieses mit HTML5 neu eingeführte Element ist zur Auszeichnung von Datums- und Zeitangaben gedacht. Seinen eigentlichen Zweck erreicht es durch das Attribut datetime. Während der Elementinhalt von <time>…</time> nämlich eine von der Sprache und vom Kontext abhängige Angabe sein kann, enthält das datetime-Attribut eine maschinenlesbare, präzise Angabe.
Beispiel: Das Bild zeigt Oma und Enkelkinder an <time datetime="2007-12-24">Heiligabend 2007</time>.
Oder: Flohmarkt am <time datetime="2011-05-14T08:00+01:00">Samstag, den 14. Mai 2011 von 8</time> bis <time datetime="2011-05-14T16:00+01:00">16 Uhr</time>.

Ein Datum wird beim datetime-Attribut in der Form JJJJ-MM-TT (Jahr vollstellig, Monat 2stellig, Tag 2stellig) notiert. Wenn Sie zusätzlich eine Uhrzeit angeben möchten, notieren Sie hinter dem Datum den Großbuchstaben T (steht für time = Zeit), und dahinter die Uhrzeit in der Form HH:MM (Stunden 2stellig von 00 bis 23, Minuten 2stellig). Optional können Sie auch die Form HH:MM:SS verwenden (SS = Sekunden 2stellig). Bei Uhrzeiten sollten Sie auch noch den Zeitzonen-Offset gegenüber UTC (Greenwich-Zeit) angeben. Die Angabe +01:00 bedeutet beispielsweise Greenwich-Zeit plus 1 Stunde (und 0 Minuten) — diese Angabe ist beispielsweise für die Zeitzone geeignet, in der sich Deutschland befindet. Für Zeitzonen westlich des Nullmeridians stellen Sie ein Minuszeichen voran.

Das u-Element

Dieses Element gehörte ähnlich wie das s-Element bereits früher zum HTML-Standard, hatte seinerzeit jedoch eine physische Bedeutung, nämlich underlined (unterstrichen). In HTML4.01 war es deswegen zuletzt als deprecated (missbilligt) gekennzeichnet. HTML5 hat das Element wieder in den Standard aufgenommen, jedoch mit der neuen, semantischen Bedeutung für nicht artikulierte Zusatzbemerkungen zum aktuellen Inhalt.

In der neuen Bedeutung ist es beispielsweise geeignet, um chinesische Eigennamenmarkierungen auszuzeichnen (wer die chinesische Sprache kennt, wird wissen, was damit gemeint ist. Ein anderes Beispiel sind wissentlich orthografisch falsche Inhalte im Text. Beispielsweise <p>Der Franzose sagte: <q><u>isch abe</u> gar <u>keine</u> Auto</q></p>.

Das var-Element

Mit dem var-Element können Sie Variablen auszeichnen. Beispiel: Das System sorgt dafür, dass bei <var>n</var> gleichzeitigen Besuchern jeder von <var>m</var> Hostrechnern gerundet <var>n</var> geteilt durch <var>m</var> Besucher zugewiesen bekommt.

Weitere Hinweise

Mit HTML5 hat man sich endgültig von den sogenannten physischen Textauszeichnungen verabschiedet. Der Grund ist, dass es für solche Auszeichnungen CSS-Eigenschaften gibt und CSS für physische Textformatierung zuständig ist. Nur zwei Elemente, die einst zu den physischen Markierungen gehörten, hat man in HTML5 übernommen: die Elemente b und i. Diese haben in HTML5 eine semantische Bedeutung erhalten. Lesen Sie für weitere Details zu diesem Thema den Buchabschnitt semantische und physische Textauszeichnung.

Korrekturen, Hinweise und Ergänzungen
Bitte scheut euch nicht und meldet, was auf dieser Seite sachlich falsch oder irreführend ist, was ergänzt werden sollte, was fehlt usw. Dazu bitte oben aus dem Menü Seite den Eintrag Diskutieren wählen. Es ist keine Anmeldung erforderlich, um Anmerkungen zu posten. Unpassende Postings, Spam usw. werden allerdings kommentarlos entfernt.