• HTML Name: Paragraph
• HTML Element: <p> und </p>
• Typus: Blockelement

Ein HTML-Absatz wird in der Regel durch ein Paragraph-Element umgesetzt. Das <p> steht für den Namen „Paragraph„, zu deutsch Absatz. Es ist ein Textblock, der in der Regel 100% seiner zur Verfügung stehenden Breite beansprucht – es verwendet also die gesamte Breite von links nach rechts, je nachdem, wie groß die Breite der übergeordneten HTML Box ist.

Bedeutung des HTML Absatzes

Der HTML Absatz zeichnet sich dadurch aus, dass er eben ein eigener Textabsatz ist. Wie in einem Buch oder in Zeitungsartikeln, in denen Inhalte durch Absätze unterteilt werden, um den Text leserlicher und strukturierter zu halten. Zwischen den Textbereichen befindet sich sozusagen sichtbar eine Leerzeile, auch wenn technisch gesehen keine Leerzeile vorhanden ist.

Stattdessen sagt man per CSS, dass Absätze einen bestimmten Abstand zu den nächsten Elementen wie etwa weiteren Absätzen oder Überschriften haben soll.

HTML Absätze – also Paragraphs – werden von den meisten Webeditoren automatisch umgesetzt. Bei WordPress reicht ein Klick auf die Enter-Taste, um im Editor einen Paragraphen zu erstellen, der am Anfang des Textabschnitts ein <p> und am Ende des Textbereichs ein abschließendes </p> setzt.

Aufbau des HTML Absatzes

Der HTML Absatz ist immer gleich aufgebaut. Er beginnt mit einem <p> und endet mit einem </p>. Beispiel:

<div id="content">
  <p>Dies ist ein Absatz. In diesem Bereich beschreibe ich etwas, was direkt in einem Textblock auf der Website erscheinen soll.</p>
  <p>Und hier ist ein neuer Absatz.</p>
</div>

Das erzeugt folgende Ausgabe:

„Dies ist ein Absatz. In diesem Bereich beschreibe ich etwas, was direkt in einer Linie auf der Website erscheinen soll.

Und hier ist ein neuer Absatz.“

Optionale Zusätze

HTML Absätze können enthalten:

• IDs: id=““
• Klassen: class=““
• Inner-HTML-Styles: style=““

Paragraphs und IDs

Wenn HTML Absätze mit IDs ausgestattet werden, kann man sie per CSS ganz direkt beeinflussen. Die ID darf nur einmal auf der jeweiligen Unterseite eingesetzt werden. Das sieht dann so aus:

<p id=“meineID“>Dies ist ein Absatz mit einer ganz bestimmten ID „meineID“.</p>

• Die ID hat den Vorteil, dass man sie per CSS ganz gezielt stylen kann. Kein anderes Element auf dieser Unterseite darf die gleiche ID besitzen.
• Außerdem ermöglichen es IDs, dass man Linkziele so setzen kann, dass der Leser sofort zur entsprechenden ID geleitet wird. Er scrollt praktisch mit dem Klick auf den Link zum jeweiligen Bereich, wo sich auch der Absatz mit der ID befindet.
  • Dazu gibt man dem Link ein Rautezeichen „#“ und den Namen der ID hinzu.

Beispiel für eine Verlinkung direkt zum ID-Element: http://www.meinedomain.de/meineunterseite.html#meineID

Paragraphs und Classes

Wenn HTML Absätzen Klassen hinzugefügt werden, können sie alle gemeinsam einem bestimmten Style zugeordnet werden. So können mehrere Textabschnitte, die ein gleiches Format haben sollen, mit einem Schlag per CSS formatiert werden. So wird das umgesetzt:

<p class=“meineklasse“>TEXT</p>

• Klassen dürfen darüber hinaus mehrfach auf einer Unterseite verwendet werden.
• Aber: Sie können nicht direkt einzeln angesprochen werden, wie etwa durch einen Link wie bei den IDs.

Paragraphs und Inner-HTML-Styles

Man kann einem HTML Absatz aber auch einen ganz eigenen Stil geben, indem man das Style-Attribut verwendet. Innerhalb des Style-Attributs schreibt man CSS-Formate ein, die den jeweiligen Abschnitt formatieren.

Beispiel:

<p style=“color: #ff0000; text-decoration: underline;“>Dies ist ein rot unterstrichener Text.</p>

Die Angaben color: und text-decoration: sind CSS-Anweisungen direkt im HTML, welche dem HTML Absatz in diesem Fall seine rote Farbe und die Unterstreichung des Textes geben.

• Style-Attribute greifen immer vor CSS-Klassen und CSS-IDs.
• Aber: Sie blähen den HTML Code unnötig auf und sollten deshalb lieber durch Klassen ersetzt werden. Das verringert die Ladezeit und erfreut den Besucher.

Einzelne Bereiche innnerhalb eines HTML Absatzes formatieren: SPAN

Möchte man einzelne Bereiche innerhalb eines Absatzes formatieren, um etwa nur ein Wort zu formatieren, verwendet man die SPAN-Elemente. Mehr dazu hier:

• HTML SPAN

HTML Zeilenumbruch

Der HTML Zeilenumbruch <br /> ist nicht mit einem HTML Absatz <p> gleichzusetzen. Denn der Zeilenumbruch erzeugt keinen neuen Absatz, sondern macht in der nächsten Zeile des aktuellen Paragraphen weiter. Das ist, wie wenn ein Text ganz rechts am Rande keinen zusätzlichen Text mehr haben kann und er automatisch in einer neuen Zeile, aber nicht in einem neuen Absatz beginnt.

Diesen Effekt kann man erzwingen, mit dem sogenannten HTML Break bzw. dem HTML Zeilenumbruch. Ein Beispiel:

<p>Heute ist ein<br />schöner Tag um einen HTML-<br />Break zu machen.</p>

Das erzeugt diese Ausgabe:

„Heute ist ein
schöner Tag um einen HTML-
Break zu machen.“

Der HTML Zeilenumbruch zeichnet sich dadurch aus, dass eben kein neuer Absatz erzeugt wird, sondern der Text in der nächsten Zeile angezeigt wird. Außerdem hat er im Gegensatz zum Paragraphen kein Anfang und kein Ende ( <p> und </p> ), sondern ist ein „eigenständiges Element“.

HTML Zeilenumbruch: IDs, Klassen und Styles

Genauso wie der Paragraph darf auch ein Break eine eigene ID, eine Klasse oder ein eigenes Inner-HTML-Style verwenden. Was jedoch nur in seltenen Fällen empfohlen wird, da ein Zeilenumbruch in der Regel kein eigenen Style braucht.