HTML Text-Formatierung

Text ist mehr als nur Buchstaben! In diesem Artikel lernst du, wie du Text hervorhebst, betonst und markierst.

Fett & Kursiv - Der Unterschied

Es gibt zwei Arten von Fett und Kursiv in HTML:

Semantisch vs. Visuell

Semantisch = Hat Bedeutung für die Bedeutung des Texts Visuell = Nur für's Aussehen

Moderne Best Practice: Nutze IMMER die semantischen Tags!

<strong> - Wichtiger Text (fett)

Für wichtigen oder dringenden Text:

<p>
    <strong>Achtung:</strong> Diese Aktion kann nicht rückgängig gemacht werden!
</p>

<p>
    Das Passwort muss <strong>mindestens 8 Zeichen</strong> lang sein.
</p>

Wann nutzen?

• ✅ Warnungen
• ✅ Wichtige Informationen
• ✅ Schlüsselwörter
• ❌ NICHT nur für Design!

<em> - Betonter Text (kursiv)

Für Betonung oder Emphasis:

<p>
    Du <em>musst</em> das wirklich lesen!
</p>

<p>
    Das ist <em>sehr</em> wichtig.
</p>

Unterschied zu strong:

• <em> = Betonung (wie beim Sprechen)
• <strong> = Wichtigkeit/Dringlichkeit

<mark> - Markierter Text

Für hervorgehobenen Text (wie mit Textmarker):

<p>
    Die Prüfung findet am <mark>15. Januar</mark> statt.
</p>

<p>
    Suchergebnis: Die <mark>HTML</mark>-Grundlagen sind wichtig.
</p>

Standard: Gelber Hintergrund (kann mit CSS geändert werden)

Wann nutzen?

• ✅ Suchergebnisse hervorheben
• ✅ Wichtige Daten/Zahlen markieren
• ✅ Aktuelle Auswahl zeigen

<small> - Kleingedrucktes

Für Nebensächliches oder Kleingedrucktes:

<p>
    Preis: 99,99€ <small>inkl. MwSt.</small>
</p>

<p>
    Copyright © 2025 WebDev Academy.
    <small>Alle Rechte vorbehalten.</small>
</p>

Wann nutzen?

• ✅ Copyright-Hinweise
• ✅ Disclaimer
• ✅ Nebeninformationen

<del> und <ins> - Gelöscht & Eingefügt

Für Änderungen im Text:

<p>
    Preis: <del>149,99€</del> <ins>99,99€</ins>
</p>

<p>
    Das Treffen findet am <del>15.</del> <ins>16.</ins> Januar statt.
</p>

Darstellung:

• <del> = Durchgestrichen
• <ins> = Unterstrichen

Wann nutzen?

• ✅ Preisänderungen
• ✅ Korrekturen zeigen
• ✅ Dokument-Versionen

<sub> und <sup> - Tiefgestellt & Hochgestellt

Für mathematische/chemische Formeln:

<!-- Tiefgestellt -->
<p>
    H<sub>2</sub>O (Wasser)
</p>

<p>
    CO<sub>2</sub> (Kohlendioxid)
</p>

<!-- Hochgestellt -->
<p>
    E = mc<sup>2</sup>
</p>

<p>
    5<sup>3</sup> = 125
</p>

Wann nutzen?

• ✅ Chemische Formeln
• ✅ Mathematische Formeln
• ✅ Fußnoten-Nummern¹

<code> - Code-Text

Für Inline-Code in Text:

<p>
    Verwende das <code>&lt;p&gt;</code>-Tag für Absätze.
</p>

<p>
    Die Variable <code>userName</code> speichert den Namen.
</p>

Darstellung: Monospace-Schrift

Für Code-Blöcke nutze <pre> + <code>:

<pre><code>function hello() {
    console.log("Hallo Welt!");
}
</code></pre>

<kbd> - Tastatur-Eingabe

Für Tastatur-Tasten:

<p>
    Drücke <kbd>Strg</kbd> + <kbd>C</kbd> zum Kopieren.
</p>

<p>
    Speichern mit <kbd>Ctrl</kbd> + <kbd>S</kbd>.
</p>

<abbr> - Abkürzungen

Für Abkürzungen mit Erklärung:

<p>
    <abbr title="HyperText Markup Language">HTML</abbr> ist eine Auszeichnungssprache.
</p>

<p>
    Die <abbr title="Europäische Union">EU</abbr> hat 27 Mitgliedsstaaten.
</p>

Beim Hover: Zeigt title als Tooltip

<q> - Inline-Zitat

Für kurze Zitate inline:

<p>
    Einstein sagte: <q>Phantasie ist wichtiger als Wissen.</q>
</p>

Browser fügt automatisch Anführungszeichen hinzu!

<blockquote> - Block-Zitat

Für längere Zitate als Block:

<blockquote cite="https://example.com/quelle">
    <p>
        Dies ist ein längeres Zitat, das als eigener Block
        dargestellt wird. Es kann mehrere Sätze enthalten.
    </p>
    <footer>
        — <cite>Autor Name</cite>
    </footer>
</blockquote>

<b> und <i> - Nur visuell

Diese Tags solltest du vermeiden (nutze strong/em stattdessen):

<!-- ❌ VERALTET -->
<b>Fetter Text</b>
<i>Kursiver Text</i>

<!-- ✅ BESSER -->
<strong>Wichtiger Text</strong>
<em>Betonter Text</em>

Warum vermeiden?

• Keine semantische Bedeutung
• Schlecht für Screenreader
• Schlechter für SEO

Wann doch ok?

• <i> für Icons (z.B. Font Awesome)
• <b> für Produktnamen (ohne besondere Bedeutung)

Kombinationen

Du kannst Tags kombinieren:

<p>
    Das ist <strong><em>sehr wichtig</em></strong>!
</p>

<p>
    Preis: <strong><mark>99,99€</mark></strong>
</p>

<p>
    <del><em>Alter Text</em></del> <ins><strong>Neuer Text</strong></ins>
</p>

Vollständiges Beispiel

<article>
    <h1>HTML lernen in <mark>7 Tagen</mark></h1>

    <p>
        <strong>Achtung:</strong> Dieser Kurs ist <em>sehr</em> intensiv!
        Du wirst <abbr title="HyperText Markup Language">HTML</abbr>
        von Grund auf lernen.
    </p>

    <p>
        <del>Alter Preis: 199€</del>
        <ins>Neuer Preis: <strong>99€</strong></ins>
    </p>

    <blockquote>
        <p>
            HTML ist die Grundlage des Webs. Ohne HTML gäbe es
            keine Webseiten, wie wir sie kennen.
        </p>
        <footer>— <cite>WebDev Academy</cite></footer>
    </blockquote>

    <p>
        <small>* Angebot gültig bis 31.01.2025</small>
    </p>
</article>

Best Practices

✅ DO:

1. Semantische Tags nutzen (strong statt b)
2. Nicht übertreiben (nicht jeden zweiten Satz bold)
3. Kombinationen sparsam nutzen
4. abbr mit title für Erklärungen
5. mark für Suchtreffer

❌ DON'T:

1. Nicht b/i nutzen (außer Spezialfälle)
2. Nicht für Design (nutze CSS!)
3. Nicht zu viel formatieren
4. Kein strong für Überschriften (nutze h1-h6)

Übungsaufgaben

Aufgabe 1: Produktbeschreibung

Erstelle eine Produktbeschreibung mit:

• Produktname (strong)
• Alter/neuer Preis (del/ins)
• Wichtiger Hinweis (strong + mark)
• Kleingedrucktes (small)

Aufgabe 2: Tutorial-Text

Schreibe einen kurzen Tutorial-Text mit:

• 2x Code-Beispiele inline (code)
• 1x Tastenkombination (kbd)
• 1x Abkürzung mit Erklärung (abbr)

Aufgabe 3: Wissenschaftlicher Text

Erstelle einen Text mit:

• Chemischer Formel (sub/sup)
• Zitat (blockquote)
• Betontem Text (em)

Nächste Schritte

Du kennst jetzt:

• ✅ Text-Formatierung (strong, em, mark)
• ✅ Spezial-Texte (code, kbd, abbr)
• ✅ Zitate (q, blockquote)
• ✅ Tief-/Hochgestellt (sub, sup)

Als Nächstes lernst du:

• Listen (ul, ol, dl)
• Links (a)
• Tabellen (table)

Drücke <kbd>Ctrl</kbd> + <kbd>S</kbd> zum Speichern

<p>Die Funktion <code>console.log()</code> gibt Werte aus.</p>

code {
  background: #f4f4f4;
  padding: 2px 6px;
  border-radius: 3px;
  font-family: 'Courier New', monospace;
}

<figure>
  <blockquote cite="https://source.com">
    <p>Ein großartiges Zitat...</p>
  </blockquote>
  <figcaption>—Autor, <cite>Buch</cite></figcaption>
</figure>

Weiter so! 🚀