Absätze mit <p>
Absätze mit <p>
~6 Min. Lesezeit Zuletzt aktualisiert am 8. August 2026
Jetzt füllen wir unsere Überschriften mit echtem Text. Dafür benutzt man das <p>-Element (kurz für "paragraph", englisch für Absatz).
Das <p>-Element
<p>Hallo! Ich bin Finn und ich liebe Fußball über alles.</p>Jeder <p>-Absatz wird vom Browser automatisch mit etwas Abstand nach oben und unten dargestellt, damit man Absätze klar auseinanderhalten kann. Füge jetzt unter deine Überschrift "Über mich" einen Absatz ein:
<h2>Über mich</h2>
<p>Hallo! Ich bin Finn und ich liebe Fußball über alles. Ich spiele seit drei Jahren
in der Jugendmannschaft meines Vereins und meine Lieblingsposition ist Stürmer.</p>Tipp: Du kannst den Text innerhalb von <p> über mehrere Zeilen in deiner Datei schreiben (wie im Beispiel oben) - der Browser zeigt trotzdem alles als einen zusammenhängenden Absatz an. Zeilenumbrüche im Code haben keine Auswirkung darauf, wie der Text im Browser umgebrochen wird - der Browser bricht Text automatisch dort um, wo es auf den Bildschirm passt.
Mehrere Absätze
Für mehrere Absätze benutzt du einfach mehrere <p>-Elemente hintereinander:
<p>Erster Absatz mit dem ersten Gedanken.</p>
<p>Zweiter Absatz mit einem neuen Gedanken.</p>Achtung: Ein häufiger Fehler: viele leere Zeilen im Code hintereinander benutzen, um Abstand zwischen Texten zu erzeugen, statt richtige <p>-Elemente. Das funktioniert nicht - der Browser ignoriert mehrfache Leerzeichen und Leerzeilen im HTML komplett. Wenn du Abstand zwischen zwei Textblöcken willst, brauchst du zwei getrennte <p>-Elemente.
Finns Webseite weiter füllen
Füge jetzt auch unter die anderen Überschriften passenden Text ein:
<h2>Meine Lieblingsspieler</h2>
<p>Ich habe viele Lieblingsspieler, aber am meisten bewundere ich Spieler, die
nicht aufgeben, auch wenn ein Spiel schwer wird.</p>
<h2>Meine Mannschaft</h2>
<h3>Trainingszeiten</h3>
<p>Wir trainieren jeden Dienstag und Donnerstag um 17 Uhr.</p>
<h3>Unsere Erfolge</h3>
<p>Letztes Jahr wurden wir Zweiter in unserer Liga.</p>Speichere und schau dir das Ergebnis im Browser an. Deine Webseite hat jetzt echte, lesbare Inhalte unter jeder Überschrift!