HTML-Absätze

Sie nutzen bereits Überschriften für Titel und Abschnitte. Der größte Teil des lesbaren Fließtexts auf einer Seite gehört in Absätze. Diese Lektion konzentriert sich auf das p-Element — wie Sie es schreiben, wie Browser es anzeigen und wie es sich von Leerzeilen im Editor unterscheidet.

Was ist ein HTML-Absatz?

Ein HTML-Absatz ist ein Textblock, markiert mit dem p-Element. Sie öffnen mit <p>, schreiben den Text und schließen mit </p>. Absätze sind für gewöhnliche Sätze und kurze Fließtextblöcke, nicht für Seitentitel (dafür gibt es Überschriften).

Direkte Antwort

Wickeln Sie jeden Fließtextblock in eigene p-Tags. Der Browser behandelt jedes p als Absatz und fügt meist Abstand davor und danach hinzu. Mehrfaches Enter in Ihrer HTML-Datei erzeugt denselben Abstand nicht — der Browser fasst zusätzliche Leerzeichen in der Quelle zusammen, sofern Sie nicht die richtigen Elemente nutzen.

Das Beispiel lesen

• Das erste <p>…</p> ist ein Absatz
• Das zweite <p>…</p> ist ein weiterer Absatz
• Der Browser zeigt sie als getrennte Blöcke, meist mit Abstand dazwischen
• Der Text zwischen den Tags ist der Inhalt, den Leser sehen

Leerraum in der Quelle ist kein Layout

Im Editor können Sie Enter drücken, damit die HTML-Datei leichter lesbar ist. Das bedeutet nicht, dass der Browser diese Leerzeilen als große Lücken anzeigt. Für echte Absatzumbrüche nutzen Sie getrennte p-Elemente. Für einen Zeilenumbruch innerhalb desselben Gedankens — etwa eine kurze Adresse oder Gedichtzeile — können Sie <br> nutzen (kurz bei Elementen gesehen).

Absätze statt leerer Abstands-Tricks

Stapeln Sie keine leeren <p></p>-Tags nur, um Inhalt nach unten zu schieben. Packen Sie keinen ganzen Artikel in einen Riesenabsatz, wenn es mehrere Ideen sind. Teilen Sie Ideen in klare p-Blöcke. Später steuert CSS Abstände und Schriften; HTML soll echte Textstruktur markieren.

Selbst ausprobieren

1. Öffnen Sie Ihr grundlegendes HTML-Gerüst
2. Fügen Sie ein h1 und zwei kurze Absätze darunter hinzu
3. Fügen Sie einen dritten Absatz mit <br> für eine kurze mehrzeilige Adresse hinzu
4. Speichern und öffnen Sie die Seite im Browser
5. Vergleichen Sie die Anzeige mit den Leerzeilen in der Quelldatei

Häufige Fehler

• Sich auf Leerzeilen in der Quelle statt getrennte p-Tags verlassen
• Überschriften nutzen, wenn nur normale Fließsätze nötig sind
• Leere Absätze nur für vertikalen Abstand erzeugen
• Das schließende </p> bei einem langen Absatz vergessen
• Eine ganze Seite unzusammenhängender Ideen in ein einziges p stecken

Zusammenfassung

• Fließtext gehört meist in das p-Element
• Jeder Absatz sollte ein eigener <p>…</p>-Block sein
• Browser fügen typischerweise Abstand zwischen Absätzen hinzu
• Extra-Enter in der Quelle ist kein echtes Layout-Spacing
• Nutzen Sie bei Bedarf <br> für einen Zeilenumbruch im Absatz
• Struktur in HTML halten; Abstände später mit CSS verfeinern