Textformatierung und Überschriften

In dieser Lektion lernen wir, wie Texte in HTML strukturiert und formatiert werden. Fokus liegt auf Überschriften, Absätzen, Textstil und semantischer Bedeutung.

1. Überschriften

HTML bietet sechs Ebenen von Überschriften: <h1> bis <h6>. Sie dienen der semantischen Strukturierung, nicht nur der Darstellung.

<h1>Hauptüberschrift</h1>
<h2>Unterüberschrift</h2>
<h3>Sektionstitel</h3>
<h4>Untersektion</h4>
<h5>Kleinere Überschrift</h5>
<h6>Kleinste Überschrift</h6>

Überschriften sollten in logischer Reihenfolge genutzt werden, um Barrierefreiheit und SEO zu verbessern.

2. Absätze

Absätze werden mit <p> markiert. Jeder Absatz erzeugt einen vertikalen Abstand.

<p>Dies ist ein Absatz.</p>
<p>Noch ein Absatz mit etwas Text.</p>

3. Textauszeichnung

HTML bietet semantische Tags für Textformatierung:

<strong> – wichtiger Text (fett)
<em> – betonter Text (kursiv)
<mark> – markierter Text
<small> – kleiner Text
<del> – durchgestrichener Text
<ins> – eingefügter Text

<p>Dies ist <strong>wichtiger</strong> Text.</p>
<p>Dies ist <em>betont</em>.</p>
<p><mark>Markierter Text</mark></p>
<p><small>Kleiner Text</small></p>
<p><del>Durchgestrichen</del> und <ins>eingefügt</ins></p>

4. Zeilenumbrüche und horizontale Linien

Zeilenumbrüche werden mit <br> erzeugt, horizontale Linien mit <hr>.

<p>Erste Zeile<br>Zweite Zeile</p>
<hr>
<p>Text nach einer Linie</p>

5. Zusammenfassung

Überschriften: <h1> bis <h6>, logisch einsetzen
Absätze: <p>, erzeugt Block mit Abstand
Textauszeichnung: <strong>, <em>, <mark> usw.
Zeilenumbrüche und Linien: <br>, <hr>
Semantik und Barrierefreiheit beachten