Textformatierung

HTML bietet eine Vielzahl von Tags zur Textformatierung, die semantische Bedeutung haben oder das Erscheinungsbild von Text beeinflussen. Hier sind die wichtigsten typografischen Tags mit Beispielen:

Überschriften (<h1> bis <h6>)

Definieren hierarchische Überschriften, wobei <h1> die wichtigste und <h6> die am wenigsten wichtige ist.

Beispiel:

<h1>Hauptüberschrift</h1>
<h2>Unterüberschrift</h2>
<h3>Weitere Untergliederung</h3>

<h1>Hauptüberschrift</h1>
<h2>Unterüberschrift</h2>
<h3>Weitere Untergliederung</h3>

Absätze (<p>)

Definiert einen Textabsatz mit Abstand nach unten.

Beispiel:

<p>Dies ist ein Absatz.</p>
<p>Dies ist ein weiterer Absatz.</p>

<p>Dies ist ein Absatz.</p>
<p>Dies ist ein weiterer Absatz.</p>

Zeilenumbruch (<br>)

Erzwingt einen Zeilenumbruch ohne neuen Absatz.

Beispiel:

Erste Zeile<br>Zweite Zeile

Erste Zeile<br>Zweite Zeile

Horizontale Linie (<hr>)

Erzeugt eine horizontale Trennlinie.

Beispiel:

<p>Text vor der Linie</p>
<hr>
<p>Text nach der Linie</p>

<p>Text vor der Linie</p>
<hr>
<p>Text nach der Linie</p>

Textauszeichnungen (fett, kursiv, unterstrichen, durchgestrichen)

• <strong> oder <b> → Fett (semantisch wichtig vs. rein visuell)
• <em> oder <i> → Kursiv (Betonung vs. technische Begriffe)
• <u> → Unterstrichen (selten verwendet)
• <s> oder <del> → Durchgestrichen (nicht mehr relevant)

Beispiel:

<strong>Wichtiger Text</strong> oder <b>fett</b><br>
<em>Betont</em> oder <i>kursiv</i><br>
<u>Unterstrichen</u><br>
<s>Durchgestrichen</s> oder <del>gelöscht</del>

<strong>Wichtiger Text</strong> oder <b>fett</b><br>
<em>Betont</em> oder <i>kursiv</i><br>
<u>Unterstrichen</u><br>
<s>Durchgestrichen</s> oder <del>gelöscht</del>

Hoch- und Tiefgestellt (<sup>, <sub>)

• <sup> → Hochgestellt (z. B. für Exponenten)
• <sub> → Tiefgestellt (z. B. chemische Formeln)

Beispiel:

x<sup>2</sup> + y<sup>3</sup><br>
H<sub>2</sub>O

x<sup>2</sup> + y<sup>3</sup><br>
H<sub>2</sub>O

x² + y³ – H₂O

Zitate (<blockquote>, <q>, <cite>)

• <blockquote> → Langer, eingerückter Zitatblock
• <q> → Kurzes Inline-Zitat (automatische Anführungszeichen)
• <cite> → Quelle des Zitats

Beispiel:

<blockquote>
    Dies ist ein langes Zitat, das eingerückt wird.
</blockquote>
<q>Kurzes Zitat</q> - <cite>Max Mustermann</cite>

<blockquote>
    Dies ist ein langes Zitat, das eingerückt wird.
</blockquote>
<q>Kurzes Zitat</q> - <cite>Max Mustermann</cite>

Code und Präformatierung (<code>, <pre>, <kbd>)

• <code> → Inline-Code (monospace Schrift)
• <pre> → Vorformatierter Text (behält Leerzeichen bei)
• <kbd> → Tastatureingabe (z. B. STRG + C)

Drücke <kbd>STRG + C</kbd> zum Kopieren.<br>
<code>console.log("Hallo Welt");</code><br>
<pre>
function hello() {
    return "Hallo!";
}
</pre>

Drücke <kbd>STRG + C</kbd> zum Kopieren.<br>
<code>console.log("Hallo Welt");</code><br>
<pre>
function hello() {
    return "Hallo!";
}
</pre>

Markierter Text (<mark>)

Hervorhebung mit gelbem Hintergrund (wie ein Textmarker).

Beispiel:

Dies ist ein <mark>wichtiger</mark> Hinweis.

Dies ist ein <mark>wichtiger</mark> Hinweis.

Abkürzungen (<abbr>)

Zeigt eine Abkürzung mit Titel-Erklärung an (Tooltip).

Beispiel:

<abbr title="HyperText Markup Language">HTML</abbr>

<abbr title="HyperText Markup Language">HTML</abbr>

Tags für die Textformatierung

Diese Tags helfen, Text strukturiert und semantisch korrekt darzustellen. Moderne Webentwicklung verwendet oft CSS für das Styling, aber die HTML-Tags bleiben grundlegend für die Bedeutung und Zugänglichkeit.

Beispiel-Code kombiniert:

<h1>Typografie in HTML</h1>
<p>Hier wird <strong>fett</strong>, <em>kursiv</em> und <mark>markiert</mark>.</p>
<blockquote>
    Webdesign ist <q>die Kunst der Textformatierung</q> – <cite>Unbekannt</cite>
</blockquote>
<hr>
<p>Mathematik: x<sup>2</sup>, Chemie: H<sub>2</sub>O</p>
<pre><code>const greeting = "Hallo Welt";</code></pre>

<h1>Typografie in HTML</h1>
<p>Hier wird <strong>fett</strong>, <em>kursiv</em> und <mark>markiert</mark>.</p>
<blockquote>
    Webdesign ist <q>die Kunst der Textformatierung</q> – <cite>Unbekannt</cite>
</blockquote>
<hr>
<p>Mathematik: x<sup>2</sup>, Chemie: H<sub>2</sub>O</p>
<pre><code>const greeting = "Hallo Welt";</code></pre>