Weitere Textauszeichnung

Die letzten Lektionen haben die großen Bausteine für Text abgedeckt. Es bleibt eine Handvoll kleinerer Elemente, die man selten braucht und dann sofort. Sie eint dasselbe Muster wie bei strong und em: Es gibt eine Darstellung, die jeder kennt, und darunter eine Bedeutung, die entscheidet, welches Element richtig ist.

01 / 03Hoch und tief

Zwei Elemente für Zeichen, die aus der Zeile herausrutschen:

<p>Ein Liter Wasser ist H<sub>2</sub>O, und die Wohnung hat 82&nbsp;m<sup>2</sup>.</p>

<p>Der Teig ruht über Nacht.<sup>1</sup></p>

sub stellt tief, sup stellt hoch. Das ist kein Layout-Spielzeug, sondern trägt Bedeutung: In einer chemischen Formel steht die 2 in H₂O tiefer, weil sie die Anzahl der Atome angibt. Und Quadratmeter schreibt man mit hochgestellter Zwei, weil es die Potenz ist.

Der zweite Absatz zeigt die häufigste Anwendung im Alltag: die Fußnotenziffer. Wer sie stattdessen mit CSS hochschiebt, hat optisch dasselbe, und beim Vorlesen macht es keinen Unterschied: Screenreader kündigen sup in der Grundeinstellung ebenfalls nicht an. Der Gewinn liegt woanders: Die Bedeutung steht im Dokument statt nur im Stylesheet. Das bleibt bei einem Redesign erhalten, und wer die Ansage in seinem Screenreader eingeschaltet hat, hört sie.

02 / 03Geändert und überholt

Jetzt drei Elemente, die alle irgendwie „nicht mehr aktuell“ heißen und trotzdem nicht dasselbe sind:

<p>Statt <del>200 g Zucker</del> <ins>120 g Zucker</ins> nehmen.</p>

<p>Preis: <s>29 Euro</s> 19 Euro</p>

del markiert etwas als gelöscht, ins als eingefügt. Die beiden gehören zusammen und zeigen eine Änderung an einem Text: eine Korrektur im Rezept, eine Anpassung in den Geschäftsbedingungen, ein Eintrag im Änderungsprotokoll. Der Browser streicht das Gelöschte durch und unterstreicht das Eingefügte.

s sieht genauso aus wie del, meint aber etwas anderes: Der Inhalt ist nicht mehr richtig oder nicht mehr relevant, ohne dass jemand ihn aus dem Dokument entfernt hätte. Der klassische Fall ist der alte Preis neben dem neuen. Da wurde nichts gelöscht, es gilt nur nicht mehr.

Merkhilfe: del beschreibt einen Vorgang am Dokument, s beschreibt einen Zustand des Inhalts. Wenn du nicht sicher bist, frag dich, ob jemand etwas geändert hat. Ja heißt del, nein heißt s.

03 / 03Kleingedrucktes und Anschriften

Zwei zum Schluss, die einen schlechten Ruf haben, weil sie oft nach ihrer Optik gewählt werden:

<p>Alle Rezepte für vier Personen.</p>
<p><small>Angaben ohne Gewähr. Nährwerte sind geschätzt.</small></p>

<address>
  Mario Laurich<br>
  Musterstraße 1<br>
  12345 Musterstadt
</address>

small steht für Nebenbemerkungen: Haftungsausschlüsse, Copyright-Zeilen, rechtliche Hinweise, Angaben ohne Gewähr. Es ist nicht dafür da, Text kleiner zu machen. Wenn du Schriftgrößen ändern willst, ist das ein Fall für CSS.

address ist Kontaktinformation, und zwar zu dem Bereich, in dem es steht: der Seite selbst oder dem umgebenden Beitrag. Die Anschrift im Impressum gehört hinein, der Wohnort einer Person, über die ein Artikel handelt, nicht. Der Browser stellt es kursiv dar, was viele dazu verleitet, es für beliebige Adressen zu nehmen. Auffällig im Beispiel: die br-Elemente. Genau dafür sind sie da, für harte Umbrüche innerhalb eines Blocks, so wie du es in der Absatz-Lektion gesehen hast.

Keines dieser Elemente brauchst du auf jeder Seite. Aber wenn der Fall auftritt, ist der passende Baustein schon da, und du musst nicht mit CSS nachbauen, was HTML von sich aus kann.