Absätze erstellen – HTML-TAG <p>

Ein wichtiger HTML-TAG ist der für Absätze. Absätze strukturieren Texte – der erste Schritt gegen Textwüsten.

In der Ausgabe hält ein Absatz einen Abstand zum nachfolgenden Element. Wie viel Abstand dies ist, interessiert hier nicht, da dies in den Bereich Design fällt! Für Design ist CSS und nicht HTML zuständig (dazu dann mehr in den Kapiteln über CSS).

Sollen 2 Textabschnitte getrennt werden, sieht das wie folgt aus:

<p>Hier kommt unser erster Test von HTML-TAG Absatz.</p>
 
<p>Hallo Welt.</p>

Das <p> steht für das englische „paragraph“ = Absatz.

Das Ergebnis im Gegensatz zum <br>-TAG (kommt in einem späteren Kapitel) ist eine Trennung mit Abstand zum nachfolgenden Element:

Hier kommt unser erster Test vom HTML-TAG Absatz.

Hallo Welt.

Hinweis: Hier sieht man, dass am Anfang der Anfangs-TAG <p> und am Ende der End-TAG </p> steht. Das sollte i. d. R. eingehalten werden, auch wenn es mit HTML5 nicht mehr notwendig ist. Bei XHTML war es zwingend erforderlich.

Besonders beim Lernen von HTML hilft ein sauberer Quellcode dabei, auf einen Blick zu sehen, welcher Bereich von einem HTML-Befehl umschlossen ist – deshalb einfach immer die HTML-Befehle auch beenden.

Übung zum HTML-TAG <p> für Absätze

Erweitern Sie folgenden Inhalt um die entsprechenden HTML-Tags für Absätze:

Herzlich willkommen auf meiner HTML-Seite Hier finden Sie meine erste HTML-Seite zum Lernen von HTML mit www.html-seminar.de Ihr Mustermann

Was wir hier haben, sind drei Absätze. Erstellen Sie eine HTML-Datei mit diesen 3 Absätzen und schauen Sie sich an, wie diese im Browser angezeigt wird.

  1. Absatz: Herzlich ...
  2. Absatz: Hier finden ...
  3. Absatz: Ihr Mustermann

Nach der Eingabe speichern Sie die Datei unter dem Namen "index.htm". Ansehen in einem Website-Browser (z. B. Internet Explorer oder Firefox). Je nach Breite des Browserfensters kann der Umbruch innerhalb der Zeilen woanders stattfinden.

Bevor Sie sich die Lösung ansehen, probieren Sie es unbedingt selber aus!