Textauszeichnungen im HTML5
HTML5-Auszeichnungen - Textlevel-Semantics
In diesem Abschnitt geht es um HTML-Auszeichnungen mitten im Fließtext, also um Elemente, mit deren Hilfe Sie einzelnen Wörtern, Ausdrücken, Satzteilen oder Passagen eine besondere Markierung zuweisen können. In HTML 4 wurden diese Elemente als Inline-Elemente bezeichnet.
HTML5 redet stattdessen von textlevel semantics.
Zu diesem Thema Textauszeichnungen im HTML5 existieren noch folgende Artikeln: Physische Textauszeichnung im HTML und Logische Textauszeichnung im HTML.
Elemente für die Textauszeichnung
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
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Lernen - Grundlagen und Tutorials</title>
<meta charset="utf-8" />
</head>
<body>
<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>
</body>
</html>
Info
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 verfügbaren Elemente zur Textauszeichnung auf. Im Anschluss daran werden die Elemente einzeln genauer erklärt.
HTML5 Elemente für Textauszeichnung in Tabelle
| Element | Bedeutung |
|---|---|
<a>...</a> |
Hyperlink und Anker für Hyperlinks |
<abbr>...</abbr> |
Abkürzung |
<b>...</b> |
Stilistische Hervorhebung |
<bdi>...</bdi> |
Automatische Textrichtungsänderung in problematischen Situationen unterstützen |
<bdo>...</bdo> |
Textrichtung ändern |
<cite>...</cite> |
Titel, Bezeichnung eines Werks |
<code>...</code> |
Quelltext |
<dfn>...</dfn> |
Zu definierender Ausdruck |
<em>...</em> |
Betonen |
<i>...</i> |
Stilistische Benennung |
<kbd>...</kbd> |
Über Tastatur eingegebener/einzugebender Text |
<mark>...</mark> |
Selektierter Text |
<q>...</q> |
Wörtliche Rede in einem Text |
<rp>...</rp> |
Ruby-Klammer |
<rt>...</rt> |
Textteil einer Ruby-Annotation |
<ruby>...</ruby> |
Bereich einer Ruby-Annotation |
<s>...</s> |
Nicht mehr gültiger Text (durchgestrichen) |
<samp>...</samp> |
Beispiel-Ausgabe |
<small>...</small> |
Für das Kleingedruckte |
<span>...</span> |
Allgemeines Textlevel-Element |
<strong>...</strong> |
Stilistisch hervorgehoben |
<sub>...</sub> |
Tiefergestellt (z. B. in Formeln) |
<sup>...</sup> |
Höhergestellt (z. B. Exponentialwerte) |
<time>...</time> |
Datums- und/oder Zeitangabe |
<u>...</u> |
Nicht artikulierte Zusatzbemerkung zum Text. Bitte nicht für die frühere Bedeutung unterstrichen verwenden! |
<var>...</var> |
Für frei wählbare Bezeichnernamen |
HTML5 Elemente für Textauszeichnung mit Beschreibung
Das a-Element
Das a-Element ist für Hyperlinks in HTML zuständig.
Beispiel
<p>
Auch der Artikel <a href="https://www.html-lernen-copy.html-lernen.info/html-lernen/html-hyperlink-erstellen.html" target="_blank"> HTML - Hyperlink erstellen</a> empfiehlt sich als weitere Lektüre.
</p>
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 (b = bold). Die optische Wirkungsweise in grafischen Browsern ist nach wie vor Fettschrift.
Das Element wurde in HTML5 zu einem bedeutungstragenden Element umgedeutet. Geeignet ist es beispielsweise für Stichwörter, Firmennamen oder Ähnliches.
Das bdi-Element
Im Gegensatz zum nachfolgend 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 Algorithmus 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:
HTML5-Auszeichnungen - <cite>Textlevel-Semantics</cite>.
Das code-Element
Dieses Element dient zur Markierung von Quelltext-Fragmenten im Fließtext, zum Beispiel werden Code-Fragmente 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">
<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="https://www.html-lernen-copy.html-lernen.info/"><dfn>HTML-lernen.info</dfn></a> Die Gestaltung Ihrer eigenen Webseite mit HTML. HTML bildet immer die Grundlage.
Das Element ist nicht dazu gedacht, 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>HTML-Lernen.info</em> war in diesem Jahr erfolgreich
etwas anderes als:
HTML-Lernen.info 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 (i = italics).
Das Element wurde in HTML5 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 Corona 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 Verzeichnis-Ansicht.
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
Susanne fragte mich:<q>Hast du heute Lust auf Abendessen?</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.
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="https://www.html-lernen-copy.html-lernen.info">
Habe geträumt, bei html-lernen-copy.html-lernen.info gewesen zu sein. Jetzt bin ich schlauer.
</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
<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 wird in <ruby> ... </ruby> eingeschlossen. Zunächst wird das Zeichen als Elementinhalt notiert. Um die Annotation in Klammern zu setzen und um die Klammern auszuzeichnen (rp = ruby parentheses = Ruby-Klammern), gibt es das rp-Element. 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 s-Element für eine dauerhafte inhaltliche Löschung, wobei der gelöschte Inhalt jedoch sichtbar bleiben soll.
Das s-Element war in HTML 4.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>name 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. gilt.
Beispiel
<small>@ 2024 by HTML-Lernen.info</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, Textpassagen auszuzeichnen, für die es kein anderes, passenderes Element gibt, die aber ausgezeichnet werden sollen, weil sie zum Beispiel mit Hilfe von CSS optisch hervorgehoben werden sollen 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">3</span> Punkte.
In dem Beispiel wird das span-Element dazu verwendet, eine Punktzahl zu markieren. Durch das globale Attribut id wird ein dokumentweit eindeutiger Name vergeben. Ein JavaScript-Programm, 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>HTML-Lernen.info</strong> enthält Tutorials, fürs <strong>HTML5</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<sup>8</sup> = 256 Zustände abbildbar.
HTML5 ermöglicht übrigens auch das Einbetten der XML-Sprache MathML für komplexe mathematische Formeln.
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 Weihnachtsfeier an <time datetime="2023-12-24">Heiligabend 2024</time>.
Oder
Hochzeit am <time datetime="2023-05-14T08:00+01:00"> Samstag, den 14. Mai 2023 von 8</time> bis <time datetime="2023-05-14T16:00+01:00">16 Uhr</time>.
Ein Datum wird beim datetime-Attribut in der Form JJJJ-MM-TT (Jahr vollstellig, Monat zweistellig, Tag zweistellig) 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 zweistellig).
Optional können Sie auch die Form HH:MM:SS verwenden (SS = Sekunden zweistellig). 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, Österreich und die Schweiz befinden. 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 HTML 4.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 Eigennamen-Markierungen auszuzeichnen (wer die chinesische Sprache kennt, wird wissen, was damit gemeint ist). Ein anderes Beispiel sind wissentlich orthografisch falsche Inhalte im Text.
Beispiel
<p>
Der Italiener 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.
Info
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, i, s und u. Diese haben in HTML5 eine semantische Bedeutung erhalten.