HTML Grundlagen: Aufgeräumte Webseiten mit Absätzen – So formatierst du deinen Text richtig

English

Absätze erstellen mit dem HTML P Tag

Absätze bestehen in der Regel aus mehreren Sätzen. Sie strukturieren den Text und ordnen die Gedanken. Ein neuer Absatz beginnt immer in einer neuen Zeile und betont ein kleine Sprechpause oder einen neuen Gedanken.

P-Elemente sind Block-Elemente, in denen nur Inline-Elemente verwendet werden dürfen.

Das HTML p-Tag (für Englisch: Paragraph) kennzeichnet einen Absatz. Ein Absatz wird immer mit <p> eingeleitet und muss mit </p> abgeschlossen werden. Das HTML p-Element entspricht dem Absatz in einer Textverarbeitung, wie z.B. Microsoft Word.

Vor allem folgende HTML-Elemente werden häufig in Absätzen verwendet:

Folgende HTML-Elemente werden gar nicht oder selten benutzt:



Block-Elemente sind in einem Absatz nicht erlaubt, z.B.:

Der Inhalt des p-Tags wird in den meisten Web-Browsern ohne Anpassungen durch CSS in der Schriftgröße 1em (16 Pixel) dargestellt, dabei wird standardmäßig die Schriftart Times New Roman verwendet. Die Zeilenhöhe und Schriftfamilie können nur mit CSS geändert werden.

Standardmäßig beträgt die Zeilenhöhe 120% der Schriftgröße. Das p-Element hat in allen Web-Browsern einen Abstand nach oben und unten.

Der Text in einem p-Element nimmt immer die ganze Breite des übergeordneten Containers ein. Dabei werden Zeilenumbrüche, aufeinander folgende Leerzeichen und Tabulatoren im HTML-Code ignoriert. Mit dem HTML br-Tag kann man einen Zeilenumbruch erzwingen, ohne einen neuen Absatz zu erzeugen.

Beispiel

Ein Absatz wird mit dem HTML <p> Tag erzeugt.

<p>Eine wunderbare Heiterkeit hat meine ganze Seele eingenommen, gleich den süßen Frühlingsmorgen, die ich mit ganzem Herzen genieße. Ich bin allein und freue mich meines Lebens in dieser Gegend, die für solche Seelen geschaffen ist wie die meine. Ich bin so glücklich, mein Bester, so ganz in dem Gefühle von ruhigem Dasein versunken, daß meine Kunst darunter leidet.<br><br>
<cite>
Johann Wolfgang von Goethe, 
Die Leiden des jungen Werther
</cite></p>
Ausgabe des HTML Codes

Eine wunderbare Heiterkeit hat meine ganze Seele eingenommen, gleich den süßen Frühlingsmorgen, die ich mit ganzem Herzen genieße. Ich bin allein und freue mich meines Lebens in dieser Gegend, die für solche Seelen geschaffen ist wie die meine. Ich bin so glücklich, mein Bester, so ganz in dem Gefühle von ruhigem Dasein versunken, daß meine Kunst darunter leidet.

Johann Wolfgang von Goethe, Die Leiden des jungen Werther

Dieser Hintergrund       repräsentiert das Ausgabe-Display und gehört nicht zum Beispiel-Code.