Textauszeichnung

In HTML existiert eine ganze Reihe von Elementen, die der semantischen Textauszeichnung dienen. Einige davon sind Relikte aus der Zeit von HTML4, das noch Elemente zur grafischen Textauszeichnung enthielt, wie z. B. <b> für fetten Text, <i> für kursiven Text, <u> für unterstrichenen oder <s> für durchgestrichenen Text. Da diese Elemente eine weite Verbreitung besitzen, wurden sie in HTML5 übernommen, jedoch mit einer semantischen Bedeutung versehen. Diese Elemente erzeugen keinen Block.

<b> – hervorgehobener Text
<strong> – wichtiger Text
<i> – abweichender Text
<em> – betonter Text
<u> – sonstiger besonderer Text
<ins> – eingefügter Text
<del> – gelöschter Text
<s> – ungültiger Text
<sup> – höher gestellter Text
<sub> – tiefer gestellter Text
<var> – Variablen, Maße, Größen, Werte etc.
<code> – Computerbegriffe
<samp> – Computerausgaben
<kbd> – Tastatur
<mark> – markierter Text
<small> – nebensächlicher Text
<span> – allgemeines Element zur Textauszeichnung

Code auswählen
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
      <div>
        <b>Anwendung:</b> Nach jeder Mahlzeit eine Tablette.<br>
        <strong>Achtung!</strong> Teilnahme nur nach Anmeldung.<br>
        Die Blaualge <i>Spirulina platensis</i> ist ein Bakterium.<br>
        Wann, wenn nicht <em>jetzt</em>?<br>
        „Teodor von Tane [<u>sic!</u>] war ein deutscher Schriftsteller.“<br>
        Am Wochenende gehen wir baden<ins>, sofern es nicht regnet</ins>.<br>
        Paula <del>kriegte</del> bekam Masern.<br>
        Jetzt für nur <s>19,98 €</s> 14,98 €!<br>
        25,3 m<sup>2</sup><br>
        H<sub>2</sub>CO<sub>3</sub><br>
        Die Temperatur beträgt 25 <var>°C</var>.<br>
        Das Attribut <code>href</code> gibt das Verweisziel an.<br>
        Der Computer meldete: <samp>Press any key to continue!</samp><br>
        Melden Sie sich mit dem Passwort <kbd>pw007</kbd> am System an.<br>
        Fehler in Zeile 98: Br<mark>ai</mark>n Cohen lebte in Jud<mark>e</mark>a.<br>
        <small>© 2014 by Uriel Löwenherz</small><br>
        Ich liebe <span style='color:green;'>grüne</span> Smoothies!
     </div>

Darüber hinaus gibt es aber auch einige Elemente, deren semantische Bedeutung offenkundig ist und die daher auch nicht zweckentfremdet werden sollten. Diese Elemente erzeugen ebenfalls keinen Block.

<cite> – Quellenangabe
<q> – Inline-Zitat
<abbr> – Abkürzung
<dfn> – Definition
<time> – Zeit und Datum
<data> – konkrete Werte
<output> – Ausgabe von Berechnungen, ausgewerteten Formularen etc.
<meter> – grafische Mengenanzeige
<progress> – Fortschrittsbalken

Code auswählen
1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
      <p>The W3C page <cite>About W3C</cite> says the W3C's mission is
        <q cite='http://www.w3.org/Consortium/'>To lead the World Wide Web to its full
        potential by developing protocols and guidelines that ensure long-term growth for
        the Web</q>. I disagree with this mission.
      </p>
      <div>
        <abbr title='Digital Subscriber Line' lang='en'>DSL</abbr><br>
        <dfn><abbr title='Central Processing Unit'>CPU</abbr></dfn><br>
        <time datetime='2014-09-11T10:14:00+02:00'>11. September 2014, 10:14 Uhr</time><br>
        <data value='12'>XII</data> + <data value='28'>XXVIII</data> = <data value='40'>XL</data><br>
        Ergebnis: <output>3.8734</output><br>
        <meter min='0' max='20' value='16'>16</meter><br>
        <progress value='33' max='100'>33%</progress>
     </div>

Andere Schriftsysteme

Die Elemente <bdi> und <bdo> können verwendet werden, um die Laufrichtung eines Textes festzulegen. Insbesondere für arabisch/persischen und hebräischen Text ist dies von Bedeutung, da dieser von rechts nach links läuft.

<bdi> – Bidirektionaler Text (automatisch)
<bdo> – Bidirektionaler Text (benutzerdefiniert)

Code auswählen
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
    <ul>
      <li>User <bdi>jcranmer</bdi>: 12 posts.
      <li>User <bdi>hober</bdi>: 5 posts.
      <li>User <bdi>إيان</bdi>: 3 posts.
    </ul>

    <ul>
      <li>User <b>jcranmer</b>: 12 posts.
      <li>User <b>hober</b>: 5 posts.
      <li>User <b>إيان</b>: 3 posts.
    </ul>

    <ul>
      <li>User <bdo dir='ltr'>jcranmer</bdo>: 12 posts.
      <li>User <bdo dir='ltr'>hober</bdo>: 5 posts.
      <li>User <bdo dir='rtl'>إيان</bdo>: 3 posts.
    </ul>

Die folgenden Elemente dienen der Darstellung der Ruby-Annotation in chinesischem bzw. japanischem Text:

<ruby>
<rb>
<rp>
<rt>
<rtc>

Code auswählen
1
2
3
4
5
6
 
      <p style='font-size:30px;'>
        <ruby>鬼<rt>き</rt>門<rt>もん</rt></ruby>の<ruby>方<rt>ほう</rt>角<rt>がく</rt></ruby>を<ruby>凝<rt>ぎょう</rt>視<rt>し</rt></ruby>する
      </p>
      <p style='font-size:30px;'>
        <ruby>漢<rp> (</rp><rt>かん</rt><rp>) </rp>字<rp> (</rp><rt>じ</rt><rp>) </rp></ruby>
      </p>