Ausführbare HTML-Docs: Fett und kursiv

Q: Wie schreibe ich Text in HTML fett?

Setz ihn in , wenn die Wörter wichtig sind ( Warning: ), oder in , wenn sie nur hervorstechen sollen, ohne zusätzliche Wichtigkeit, etwa ein Produktname. Beide werden standardmäßig fett angezeigt.

Q: Was ist der Unterschied zwischen und ?

bedeutet, dass der Text wichtig, ernst oder dringend ist. lenkt die Aufmerksamkeit auf Text, ohne Wichtigkeit auszudrücken, etwa Schlüsselwörter in einer Zusammenfassung. Sie sehen gleich aus; der Unterschied liegt in der Bedeutung, und die zählt für Screenreader, Suchmaschinen und andere Entwickler.

Q: Wie schreibe ich Text in HTML kursiv?

Nimm für eine Betonung, die die Bedeutung eines Satzes verändert ("I did say that" mit Betonung auf "did"), und für Text in einer anderen Stimme: Fremdwörter, Fachbegriffe, Schiffsnamen, Gedanken. Beide werden kursiv angezeigt.

Q: Wie mache ich Text gleichzeitig fett und kursiv?

Verschachtle die Tags: text . Schließ sie in umgekehrter Reihenfolge, in der du sie geöffnet hast. Mit CSS setzt du an einem Element sowohl font-weight: bold als auch font-style: italic.

Q: Kann ich Text stattdessen mit CSS fett machen?

Ja: font-weight: bold (oder 700) an einem beliebigen Element. Nimm CSS, wenn das Fett rein optisch ist, etwa bei einer Button-Beschriftung oder dem Stil von Tabellenköpfen, und die HTML-Tags, wenn die Wörter selbst wichtig oder betont sind.

HTML fett und kursiv: die Tags strong, b, em und i

Mit oder schreibst du Text in HTML fett, mit oder kursiv. Hier lernst du, welches Tag wann passt, wie du fett und kursiv kombinierst und wie du Text stattdessen mit CSS fett oder kursiv machst.

Diese Seite enthält ausführbare Editoren - bearbeiten, ausführen und Ausgabe sofort sehen.

Von Kevin Spektor, Co-founder & CTO

Veröffentlicht am Sep 24, 2026

So schreibst du Text in HTML fett

Setz den Text in  oder . Beide machen ihn fett:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Bold</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
  </style>
</head>
<body>
  <p><strong>Warning:</strong> unplug the device before opening it.</p>
  <p>The <b>Pro</b> plan includes offline mode.</p>
</body>
</html>

Sie sehen identisch aus. Der Unterschied liegt darin, was sie über den Text aussagen.

strong vs. b

Tag	Bedeutung	Beispiel
`<strong>`	Wichtiger, ernster oder dringender Inhalt	`<strong>Do not</strong> share your password.`
`<b>`	Sticht hervor, aber ohne zusätzliche Wichtigkeit	Schlüsselwörter in einer Zusammenfassung, ein Produktname, die ersten Wörter eines Artikels

Nimm , wenn du an der Stelle die Stimme heben würdest oder der Leser es auf keinen Fall übersehen soll. Nimm , wenn Fettdruck bei dieser Art von Text eine optische Konvention ist. Wenn beides nicht passt und du nur einen Stil willst, nimm ein  mit einer Klasse und CSS.

Kursiv: em und i

Das kursive Paar folgt derselben Idee:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Italics</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
  </style>
</head>
<body>
  <p>I <em>never</em> said she took the money.</p>
  <p>I never said <em>she</em> took the money.</p>
  <p>The word <i lang="fr">déjà vu</i> comes from French, and the ship was the <i>Endurance</i>.</p>
</body>
</html>

Tag	Bedeutung	Beispiel
`<em>`	Betonung: Wenn sie wandert, ändert sich die Bedeutung des Satzes	`I <em>never</em> said that.`
`<i>`	Andere Stimme: Fremdwörter, Fachbegriffe, Schiffsnamen, Gedanken	`<i lang="la">et cetera</i>`

Die ersten beiden Sätze oben bestehen aus denselben Wörtern und bedeuten Verschiedenes, je nachdem, wo  steht. Wenn  eine Wendung in einer anderen Sprache markiert, gib ihm ein lang-Attribut, damit Screenreader sie richtig aussprechen.

Ein paar weitere Tags sind standardmäßig kursiv: <cite> (der Titel eines Werks), <dfn> (ein Begriff, der gerade definiert wird), <address> und <var>. Nimm sie, wenn sie passen, und lass ihren Standardstil den Rest erledigen.

Fett und kursiv zusammen

Setz ein Tag in das andere und schließ sie in umgekehrter Reihenfolge:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Bold italic</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
  </style>
</head>
<body>
  <p><strong><em>Bold and italic</em></strong></p>
  <p><em>Italic with a <strong>bold</strong> word inside</em></p>
  <p><b><i>b and i together</i></b></p>
</body>
</html>

text (in falscher Reihenfolge geschlossen) wird trotzdem angezeigt, aber der Browser muss den Baum reparieren und teilt deine Elemente dabei eventuell auf. Wie diese Reparatur aussieht, zeigt die Seite zu Tags.

Fett und kursiv mit CSS

Wenn der Stil rein optisch ist (ein Kartentitel, ein Preis, eine Beschriftung), nimm CSS am Element selbst, statt ein Tag hinzuzufügen. font-weight steuert Fettdruck und font-style Kursivschrift:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>CSS bold and italic</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
    .price { font-weight: bold; color: #16a34a; }
    .semi { font-weight: 600; }
    .note { font-style: italic; color: #4b5563; }
    .calm strong { font-weight: normal; color: #dc2626; }
  </style>
</head>
<body>
  <p>Price: <span class="price">$12</span></p>
  <p class="semi">font-weight: 600</p>
  <p class="note">A note set in italics with font-style.</p>
  <p class="calm"><strong>Still strong</strong>, shown in red instead of bold.</p>
</body>
</html>

Die letzte Zeile zeigt, dass Bedeutung und Aussehen getrennt sind: Das  behält seine Bedeutung, während CSS es anders stylt. Die ganze Bandbreite an Schriftstärken (100 bis 900) erklärt die Seite zu CSS font-weight.

Barrierefreiheit

Die meisten Screenreader ändern ihre Stimme bei  oder  mit Standardeinstellungen nicht, fett und kursiv sind also vor allem optische Hinweise. Alles, was ein Nutzer nicht übersehen darf (ein Fehler, ein Pflichtfeld, eine Frist), sollte aus den Wörtern selbst klar werden, nicht nur aus dem Stil. Vermeide außerdem lange Passagen in kursiv oder fett: Sie sind schwerer zu lesen, besonders für Menschen mit Legasthenie.

Häufige Fehler

Fettdruck als Überschrift verwenden. Eine Zeile -Text über einem Abschnitt ist für Screenreader keine Überschrift. Nimm <h2> oder <h3> und style es.
 zum Stylen verwenden. Wenn an dem Text nichts wichtig ist, nimm  oder CSS.
Einen ganzen Absatz fett machen. Hervorhebung wirkt, wenn sie selten ist. Mach eine Wendung fett, nicht den Absatz.
Tags in falscher Reihenfolge schließen. x, niemals x.
Alte Tags. Das -Tag aus alten Tutorials ist veraltet. Nimm die Tags oben oder font-weight.

Häufig gestellte Fragen

Wie schreibe ich Text in HTML fett?

Setz ihn in , wenn die Wörter wichtig sind (Warning:), oder in , wenn sie nur hervorstechen sollen, ohne zusätzliche Wichtigkeit, etwa ein Produktname. Beide werden standardmäßig fett angezeigt.

Was ist der Unterschied zwischen und ?

 bedeutet, dass der Text wichtig, ernst oder dringend ist.  lenkt die Aufmerksamkeit auf Text, ohne Wichtigkeit auszudrücken, etwa Schlüsselwörter in einer Zusammenfassung. Sie sehen gleich aus; der Unterschied liegt in der Bedeutung, und die zählt für Screenreader, Suchmaschinen und andere Entwickler.

Wie schreibe ich Text in HTML kursiv?

Nimm  für eine Betonung, die die Bedeutung eines Satzes verändert ("I did say that" mit Betonung auf "did"), und  für Text in einer anderen Stimme: Fremdwörter, Fachbegriffe, Schiffsnamen, Gedanken. Beide werden kursiv angezeigt.

Wie mache ich Text gleichzeitig fett und kursiv?

Verschachtle die Tags: text. Schließ sie in umgekehrter Reihenfolge, in der du sie geöffnet hast. Mit CSS setzt du an einem Element sowohl font-weight: bold als auch font-style: italic.

Kann ich Text stattdessen mit CSS fett machen?

Ja: font-weight: bold (oder 700) an einem beliebigen Element. Nimm CSS, wenn das Fett rein optisch ist, etwa bei einer Button-Beschriftung oder dem Stil von Tabellenköpfen, und die HTML-Tags, wenn die Wörter selbst wichtig oder betont sind.

Verwandte Konzepte