Die wichtigsten Inline-Tags im Überblick
<p> <!-- Wichtiges Wort hervorheben --> Das ist ein <strong>wichtiges</strong> Wort. <!-- Betontes Wort (beim Lesen betont sprechen) --> Das ist ein <em>betontes</em> Wort. <!-- Schlüsselwort / bedeutungsvolles Wort --> Das ist ein <b>Schlüsselwort</b>. <!-- Quellcode inline --> Verwende den Tag <code><p></code> für Absätze. <!-- Hochgestellt / Tiefgestellt --> E = mc<sup>2</sup> H<sub>2</sub>O <!-- Expliziter Zeilenumbruch --> Erste Zeile<br> Zweite Zeile <!-- Span: Inhalte zusammenfassen für CSS --> Preisangabe: <span class="preis">9,99 €</span> </p>
So sieht das im Browser aus:
Das ist ein wichtiges Wort. Das ist ein betontes Wort.
Das ist ein Schlüsselwort. Verwende den Tag <p> für Absätze.
E = mc2 H2O
Erste Zeile
Zweite Zeile
Allgemeine Auszeichnung
- <a>
- Link — eigenes Beispiel in a_10
- <span>
- Einzelne Textpassagen zusammenfassen (generisch, kein semantischer Wert)
- <br>
- Expliziter Zeilenumbruch — sparsam verwenden!
- <strong>
- Inhaltlich wichtiges Wort oder Passage (dargestellt als fett)
- <em>
- Hervorhebung — Wort das beim Sprechen besonders betont würde (dargestellt als kursiv)
- <small>
- Kleingedrucktes — Nebenbemerkungen, Copyright-Hinweise
- <sub> / <sup>
- Tief- bzw. hochgestellt — z.B. H2O oder E=mc2
Semantische Auszeichnung
- <dfn>
- Definition eines Begriffs
- <abbr>
- Abkürzungen oder Akronyme — z.B. CSS
- <time>
- Datums- und Zeitangaben — z.B.
<time datetime="2025-01-01">Neujahr</time> - <code>
- Computer-Quellcode inline — z.B.
<p> - <b>
- Schlüsselwörter oder bedeutungsvolle Wörter (nicht nur „fett" wegen des Aussehens!)
- <i>
- Fachausdrücke, Fremdwörter, technische Begriffe
- <u>
- Eigennamen-Unterstreichung oder fehlerhafte Schreibweise markieren