HTML Academy · Lektion

Absätze, em, strong, b und i

Strukturieren Sie Prosa mit semantischer Hervorhebung und Fettdruck-Tags.

Absätze, em, strong, b und i ist eine kostenlose HTML Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des HTML Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.

Das Absatzelement

Das -Element kennzeichnet einen Textblock als Absatz:

<p>This is a paragraph of text. Browsers add margin above and below paragraphs automatically.</p>
<p>This is a second paragraph. It starts on a new line.</p>

Semantische Betonung: em

Das -Element kennzeichnet Text als betonte Hervorhebung — das Wort, das die Bedeutung des Satzes verändert:

<p>I <em>never</em> said she stole the money.</p>
<p>I never said <em>she</em> stole the money.</p>
<!-- Same words, different meaning depending on which is emphasized -->
<!-- Screen readers change inflection on em content -->

Semantische Wichtigkeit: strong

Das -Element kennzeichnet Text als besonders wichtig:

<p><strong>Warning:</strong> Do not enter this area without protective equipment.</p>
<p>The deadline is <strong>Friday at 5 PM</strong>.</p>
<!-- strong = this content is more important than surrounding text -->
<!-- Screen readers may emphasize strong content differently -->

em im Vergleich zu i

 und  werden standardmäßig beide kursiv dargestellt, haben aber eine unterschiedliche Bedeutung:

 — semantische Betonung (meistens verwenden)
 — darstellungsbezogene Kursivschrift: Fachbegriffe, Titel, fremdsprachige Ausdrücke

<p>The ship was called <i>HMS Beagle</i>.</p>
<p>The CSS property is <i>display</i>.</p>
<p><em>Please</em> be careful.</p>

strong im Vergleich zu b

 und  werden standardmäßig beide fett dargestellt, unterscheiden sich aber semantisch:

 — semantische Wichtigkeit (meistens verwenden)
 — Aufmerksamkeit erregen, ohne Wichtigkeit auszudrücken: Keywords, Produktnamen

<p>The product is called <b>ProSuite</b>.</p>
<p><b>Note:</b> All fields are required.</p>
<p>This step is <strong>critical</strong> — do not skip it.</p>

em und strong verschachteln

Sie können Elemente zur Betonung verschachteln, um eine kombinierte Wirkung zu erzielen:

<p>This is <strong>very <em>important</em></strong>.</p>
<!-- strong (important) wraps em (stressed) -->
<!-- Result: bold italic text with both semantic meanings -->

Absätze können nicht verschachtelt werden

Ein -Element kann kein weiteres -Element enthalten:

<!-- INVALID: nested paragraphs -->
<p>First paragraph <p>nested paragraph</p></p>

<!-- The browser auto-closes the first p before the second opens -->
<!-- Always use separate paragraph tags -->
<p>First paragraph.</p>
<p>Second paragraph.</p>

Inline- und Blockelemente in Absätzen

 ist ein Blockelement, das nur Inlineelemente enthalten kann:

<!-- Valid: inline content in p -->
<p>Text with <strong>bold</strong> and <a href="/">a link</a>.</p>

<!-- INVALID: block element inside p -->
<p>
  <div>A div inside p is invalid</div>
</p>

Barrierefreiheit von Betonungen

Warum semantisches Markup für unterstützende Technologien wichtig ist:

Screenreader geben  in manchen Implementierungen mit veränderter Betonung aus
 wird möglicherweise mit zusätzlicher Betonung vorgelesen
Nur mit CSS erzeugte Fett- oder Kursivformatierungen (z. B. font-style: italic für ein span) haben für Screenreader keine semantische Bedeutung

Häufige Fehler

Vermeiden Sie diese häufigen Fehler beim Text-Markup:

<!-- Bad: using br for paragraph spacing -->
First paragraph<br><br>Second paragraph

<!-- Good: use p elements -->
<p>First paragraph</p>
<p>Second paragraph</p>

<!-- Bad: bold for visual style only -->
<b>Heading Text</b>

<!-- Good: use h elements for headings -->
<h2>Heading Text</h2>

Wann Sie welches Element verwenden

Kurze Entscheidungshilfe:

Ein längerer Fließtext → 
Ein Wort betonen, das die Bedeutung verändert → 
Kritische Informationen kennzeichnen → 
Einen Titel oder Fachbegriff kursiv darstellen → 
Auf ein Keyword hinweisen, ohne Wichtigkeit auszudrücken →

Kurzer Test

Welches Element sollten Sie verwenden, um Text als besonders wichtig zu kennzeichnen?

Zusammenfassung: Textsemantik

Zusammenfassung zum Text-Markup:

 — Absätze mit Fließtext
 — betonte Hervorhebung, die die Bedeutung des Satzes verändert
 — besondere Wichtigkeit
 — darstellungsbezogene Kursivschrift (Titel, Begriffe)
 — Aufmerksamkeit erregen, ohne Wichtigkeit auszudrücken
Verwenden Sie niemals   für Abstände zwischen Absätzen

Häufig gestellte Fragen

Ist die Lektion „Absätze, em, strong, b und i“ kostenlos?

Ja — der vollständige Text von „Absätze, em, strong, b und i“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des HTML Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Absätze, em, strong, b und i“?

Strukturieren Sie Prosa mit semantischer Hervorhebung und Fettdruck-Tags. Du übst HTML Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um HTML Academy zu starten?

Keine Vorkenntnisse erforderlich. HTML Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.

Wie lange dauert die Lektion „Absätze, em, strong, b und i“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser HTML Academy-Lektion Code schreiben und ausführen?

Ja. Jede HTML Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu HTML Academy