HTML-Textformatierung

Sie haben bereits das style-Attribut genutzt, um das Aussehen von Text zu ändern. Formatierungs-Tags beantworten eine andere Frage: Was bedeutet dieses Textstück? Wichtige Warnungen, gesprochene Betonung, Hervorhebungen, Änderungen, Kleingedrucktes und Formeln wie H₂O gehören in eigene HTML-Elemente. Browser zeigen sie oft standardmäßig fett oder kursiv, aber Hilfsmittel und Suchsysteme können die Bedeutung ebenfalls nutzen — etwas, das Farbe allein nicht liefert.

Was ist HTML-Textformatierung?

Textformatierungs-Elemente umschließen ein Wort oder eine Phrase in einem Absatz (oder ähnlichem Text), um eine Rolle zu markieren: Wichtigkeit, Betonung, Hervorhebung, Löschung, Einfügung und mehr. Sie sind Inline-Elemente. Sie starten keinen neuen Block wie p oder h1. Sie setzen sie um genau den Textabschnitt, der diese Rolle trägt, und schließen sie, damit der Rest des Satzes wieder normal wirkt.

Direkte Antwort

Nutzen Sie semantische Formatierungs-Tags für Bedeutung: strong für starke Wichtigkeit, em für Druckbetonung (als würden Sie das Wort beim Sprechen betonen), mark für relevante Hervorhebung, small für Kleingedrucktes oder Nebenbemerkungen, del und ins für entfernten oder eingefügten Text sowie sub / sup für tiefgestellt und hochgestellt. Bevorzugen Sie diese Tags, wenn die Bedeutung zählt. Wenn Sie nur fett oder kursiv ohne Extra-Bedeutung wollen, nutzen Sie CSS — einschließlich der Inline-style-Ideen aus der vorherigen Sitzung — statt strong oder em falsch einzusetzen.

Tag-Referenz auf einen Blick

Zuerst strong und em

strong und em sind das Paar, das Sie am häufigsten brauchen. Greifen Sie zu strong, wenn der Inhalt wichtig ist — ein Schlüsselbegriff, eine Warnung, eine Pflichtfeld-Bezeichnung im Text. Greifen Sie zu em, wenn Sie Ihre Stimme ändern würden, um ein Wort zu betonen. Standard-Fett und -Kursiv sind nur die übliche Darstellung; die Tags tragen weiterhin Bedeutung, wenn ein Stylesheet den Look später ändert.

Die Probe lesen

• strong umschließt „Endpreis“, weil diese Phrase im Satz wichtig ist
• em umschließt „bevor“, weil der Zeitpunkt die betonte Idee ist
• Beide Tags sitzen in einem Absatz; sie ersetzen kein p
• Wenn Sie nur marinefarbenen Text ohne Wichtigkeits-Bedeutung wollten, wäre style (oder später CSS) das bessere Werkzeug

Weitere Formatierungs-Tags in einem Absatz

Sobald sich strong und em natürlich anfühlen, fügen Sie die Helfer für Hervorhebungen, Änderungen, Kleingedrucktes und Formeln hinzu. Halten Sie die Verschachtelung flach: umschließen Sie nur die Wörter, die jede Rolle brauchen.

Was jeder Helfer tut

• sub senkt die „2“ in der Wasserformel; sup hebt den Exponenten in 12²
• del und ins zeigen eine Änderungsspur — alter Wert raus, neuer Wert rein
• small markiert sekundäres Kleingedrucktes, nicht die Hauptaussage
• mark hebt einen relevanten Treffer hervor, ähnlich einer Suchhervorhebung
• strong und em markieren weiterhin Wichtigkeit und Betonung im selben Absatz
  Sie brauchen nicht jedes Tag in jedem Satz. Wählen Sie die, die zur echten Bedeutung Ihres Texts passen.

Bedeutungs-Tags vs. nur optisches Styling

Ältere Seiten nutzen manchmal b und i für fett und kursiv ohne starke Bedeutung. In diesem Kurs bevorzugen Sie strong, wenn der Inhalt wichtig ist, und em, wenn Sie ein Wort beim Sprechen betonen würden. Nutzen Sie CSS, wenn Sie nur Optik wollen. Diese Gewohnheit hält Ihr HTML ehrlich: Formatierungs-Tags beschreiben Inhalt, Stylesheets beschreiben Darstellung.

Übung im Editor

1. Schreiben Sie einen normalen Absatz über einen Produktpreis.
2. Setzen Sie den Produktnamen in strong.
3. Setzen Sie ein Warnwort in em.
4. Markieren Sie einen alten Preis mit del und einen neuen mit ins.
5. Optional: fügen Sie eine kleine Fußnoten-Notiz mit small oder ein Formelstück mit sub / sup hinzu.
6. Speichern und öffnen. Prüfen Sie, dass Tags geschlossen sind und die Bedeutung klar lesbar ist.
7. Lassen Sie absichtlich ein End-Tag weg, aktualisieren Sie, beobachten Sie, wie der Rest der Zeile gestylt bleibt, und beheben Sie es.
   Zu sehen, wie ein ungeschlossenes Tag Stil über den Absatz „leckt“, trainiert sorgfältige Verschachtelung schneller als nur perfekte Proben zu kopieren.

Fehler, die Formatierung schwächen

• Nur style="font-weight: bold", wenn das Wort wirklich wichtig ist — bevorzugen Sie strong für Bedeutung
• Überall strong nur, um Text dicker zu machen — das verwässert Wichtigkeit
• Fünf Formatierungs-Tags ohne Grund ineinander verschachteln
• sup / sub zur Dekoration statt für echte Formeln (Mathe, Chemie, Fußnoten)
• End-Tags vergessen, sodass der Rest der Seite fett, kursiv oder hervorgehoben bleibt
• mark wie gelbe Universal-Farbe für ganze Absätze unrelated Text behandeln

Zusammenfassung

• Formatierungs-Tags fügen Bedeutung im Text hinzu, nicht nur Dekoration
• Beginnen Sie mit strong und em, fügen Sie dann bei Bedarf mark, small, del, ins, sub und sup hinzu
• Bevorzugen Sie semantische Tags, wenn Wichtigkeit, Betonung, Änderungen oder Formeln zählen
• Nutzen Sie CSS, wenn Sie nur Look-and-Feel ohne Extra-Bedeutung brauchen
• Halten Sie die Verschachtelung einfach und schließen Sie jedes geöffnete Tag
• Wählen Sie Tags aus der Satzbedeutung, nicht aus der Gewohnheit, alles fett zu machen