HTML em und strong: Betonung, Wichtigkeit und der Unterschied zu b und CSS

HTML <em> markiert Betonung in einem Satz, während <strong> starke Wichtigkeit, Ernsthaftigkeit oder Dringlichkeit markiert. Browser stellen sie typischerweise als kursiven bzw. fetten Text dar, wähle jedoch ein Element nach seiner Bedeutung im Kontext und nicht nach seinem Standardaussehen.

Worin unterscheiden sich em und strong?

Verwende sie, wenn die Betonung eines bestimmten Wortes den Fokus eines Satzes ändert. In „Ichch habe das Dokument heute überprüft“ liegt der Fokus auf „Ichch“, wenn man betont, wer es überprüft hat, während die Betonung auf „heute“ den Fokus darauf legt, wann. strong kennzeichnet die Bedeutung des Inhalts selbst, wie eine Warnung, die die Leser wissen müssen, oder eine wichtige Schlussfolgerung.

Beide Elemente funktionieren innerhalb von Sätzen. Umschließe nicht einen ganzen Absatz nur, um ihn wie eine große Überschrift aussehen zu lassen. Strukturieren Sie Dokumentüberschriften mit h1 bis h6 und wenden Sie sinnvolle Hervorhebungen nur dort an, wo sie nötig sind.

Vergleichen Sie den Fokus in einem vollständigen Beispiel

Speichern Sie dieses Dokument als emphasis.html und öffnen Sie es in einem Browser. Vergleichen Sie den Akzent in den ersten beiden Sätzen, die wichtige Anweisung und den letzten Satz, der nur visuelle Fettschrift verwendet.

<!doctype html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Betonung und Wichtigkeit</title>
  <style>.visual-bold { font-weight: bold; }</style>
</head>
<body>
  <h1>Betonung im Kontext</h1>
  <p><em>Ich</em> habe das Dokument heute geprüft.</p><p>Ich habe das Dokument <em>heute</em> geprüft.</p><p><strong>Prüfen Sie die Sicherung, bevor Sie die Datei ersetzen.</strong></p><p>Begriffe in diesem Dokument: <b>Element</b> und <b>Attribut</b></p><p>Darstellungsbeispiel: <span class="visual-bold">Dieser Teil ist durch CSS fett.</span></p></body>
</html>

Mit den üblichen Standardstilen erscheinen „Ich“ und „heute“ kursiv, während die Sicherungsanweisung und mit b markierten Begriffe fett erscheinen. Der span ist ebenfalls wegen CSS fett, aber er wird nicht zu einem Element, das starke Wichtigkeit ausdrückt. Schriftarten und Benutzerstile können das Erscheinungsbild ändern, daher sollte die wichtige Bedeutung auch klar in der Formulierung zum Ausdruck kommen.

Unterscheiden Sie b von CSS-Fettschrift

b nur als „strong ohne Bedeutung“ zu betrachten, verfehlt seinen Zweck: Es zieht Aufmerksamkeit auf sich. Verwenden Sie CSS, wenn nur das Erscheinungsbild das Ziel ist. Ebenso sollten Sie em nicht einfach wählen, nur weil Sie kursiven Text möchten.

Das Entfernen der Kursivschrift von em oder das Ändern der Stärke von strong über CSS bewahrt die im HTML ausgedrückte Bedeutung. Umgekehrt verleiht das Fettmachen eines span-Elements ihm nicht die Bedeutung von strong. Tatsächliche Ansagen durch Hilfstechnologien variieren je nach Umgebung, daher sollte nicht davon ausgegangen werden, dass eine bestimmte Stimmenänderung immer auftritt. Siehe die MDN em-Referenz, MDN strong-Referenz und MDN b-Referenz für die Definitionen der Elemente.