Polaris Sytems Tutorial

Elemente zur Textstrukturierung: Absätze und Zeilenumbrüche

Textbsätze

Zusammengehörende Inhalte können in HTML mit Hilfe der Textabsätze zusammengefasst werden.
Das Element <p> (für Paragraph = Absatz) kennzeichnet einen ganzen Textblock. Das <p> Element gehört zu den Blockelementen und erzeugt somit einen Abstand vor und nach dem jeweiligen Textabsatz. Textabsätze werden, wenn nichts anderes angegeben ist, linksbündig ausgerichtet.

Hinweis: Das <p> Element darf keine anderen blockerzeugenden Elemente wie z.B. Überschriften (<hx>), Textabsätze (<p>) oder Listen (<ul> oder <ol>) enthalten. Der Browser würde ein solches unerwünschtes Element erkennen und den Textabsatz automatisch an dieser Stelle abschließen was zu unerwünschten Effekten führen könnte.

Beispiel 1
...
<body>
  <p>
    Das ist der erste Absatz. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
    nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</p>
  <p>
    Das ist der zweite Absatz. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
    nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</p>
</body>
...
Beispiel für Textabsätze in HTML

Und hier das Ergebnis, wie es im Firefox angezeigt wird:

HTML Textabsätze

Textabsätze formatieren

Textabsätze können auch zentriert, als Blocksatz oder rechtsbündig ausgerichtet werden. Darüber hinaus lassen sich mittels CSS weitere Anpassungen vornehmen - z.B. Texteinrückung, vertikale Ausrichtung, Zeichenabstand, Schriftart oder auch die Schriftgröße, etc.

Zeilenumbrüche

Der <br> (line break) Tag wird zur Erzeugung eines Zeilenumbruchs eingesetzt.
Bei einem Zeilenumbruch handelt es sich um ein so genanntes leeres Element, da es selbst weder weitere Elemente, noch irgendwelchen Text enthält. Bei leeren Elementen sollte anstelle der ausführlichen Schreibform aus Start- und End-Tag (<br></br> würde in diesem Fall keinen Sinn ergeben), die verkürzte Variante (ohne den abschließenden Tag) verwendet werden.

Bei Verwendung von XHTML lautet die korrekte Syntax eines Zeilenumbruchs übrigens <br />. Achten Sie bitte auf das Leerzeichen vor dem Schrägstrich, da ansonsten ältere Browser Probleme mit der Interpretation haben.

Textabsätze, Listen oder Überschriften werden als Blockelemente vom Browsern automatisch umbrochen. Daher sollte generell der Einsatz von Zeilenumbrüchen in einem HTML Dokument mit Sorgfalt eingesetzt werden.

In unserem Beispiel möchten wir Ihnen das Erzwingen eines Zeilenumbruchs veranschaulichen:

Beispiel 2
...
<body>
  <p>
    Das ist der erste Absatz und hier erfolgt ein Zeilenumbruch,<br>
    hier erfolgt ein weiterer Umbruch<br>
    und hier noch ein Zeilenumbruch<br>
    bevor wir an dieser Stelle den Absatz abschließen.
</p>
  <p>
    Hier steht noch ein Absatz, mit einem Zeilenumbruch,<br>
    damit man den Unterschied zwischen einem Zeileumbruch und einem Absatz verdeutlichen kann.
</p>
</body>
...
Beispiel für Zeilenumbrüche in HTML

Und noch das Ergebnis im Browser:

HTML Zeilenumbrüche

Zuletzt aktualisiert am 03.05.2013 von Polaris Systems.

Zurück