Der HTML p Tag einfach erklärt [mit Video] (2024)

Wenn wir uns die Datei aus dem letzten Beitrag mit dem HTML-Grundgerüst noch mal im Browser ansehen, dann stellen wir fest, dass inhaltstechnisch aktuell noch nichts angezeigt wird.

Das liegt daran, dass sich im body-Element noch keine Inhalte befinden.

Genau deshalb werden wir jetzt ein paar Überschriften hinzufügen.

Generell verwendet man Überschriften, um Texte besser zu strukturieren. Stell dir beispielsweise einmal vor, du öffnest eine Website, auf der dir ein ellenlanger Text ohne jegliche Überschrift ins Auge springt. Ich denke, dass dir bereits beim Anblick die Lust aufs Lesen vergeht.

Und das ist vollkommen normal, da sich jeder Mensch von diesem Ausmaß an Text erschlagen fühlen würde. Aus diesem Grund gibt es Überschriften, welche es ermöglichen, den gesamten Text in einzelne logisch sinnvolle Abschnitte zu gliedern.

Damit ist der Text zum einen wesentlich übersichtlicher und zum anderen gelangt man direkt durch das Überfliegen der Überschriften zu den relevanten Informationen, nach welchen man gesucht hat. Auf diese Weise können sich die Leser jede Menge Zeit sparen.

Aus den oben genannten Gründen werden wir uns nun ansehen, wie man in ein HTML-Dokument Überschriften einfügen kann. Auch hierfür gibt es wieder spezifische HTML-Elemente. Zum Beispiel das h1-Element.

Wir schreiben nun also „h1“ in den Body und drücken anschließend auf Enter.

Das Plugin Emmet generiert automatisch das öffnende und schließende Tag beim Eingeben des Befehls „h1“. Somit muss man nicht mehr manuell <h1></h1> eintippen, sondern kann sich direkt auf den Inhalt der Überschrift konzentrieren.

Auch dieses Element hat wieder ein öffnendes und einen schließendes Tag.

Der Inhalt, auf den wir das Element anwenden möchten, befindet sich zwischen diesen beiden Tags. Im Falle des h1-Elements ist es dementsprechend die Überschrift selbst.

Wir schreiben also:

Nach dem Speichern und Aktualisieren der Seite sehen wir, dass der Browser die Überschrift hervorgehoben anzeigt. Der Text ist jetzt nämlich ziemlich groß und fett gedruckt.

Es gibt jedoch auch andere Überschriften wie h2, h3, h4, h5 und h6, die für eine klare Struktur und Lesbarkeit auf der Webseite sorgen. Diese sehen wir uns gleich im Detail an, nachdem wir sie in unser Dokument eingefügt haben:

Daran erkennt man auch schon, weshalb in der Praxis h5- und h6-Überschriften so selten Einsatz finden. Schließlich würde man dafür die Module, die als h3-Überschriften dargestellt sind, in einige weitere Unterpunkte aufschlüsseln müssen.

Das ist in der Regel aber gar nicht notwendig. In unserem Beispiel könnte man das Modul noch mal in Lektionen aufgliedern und dafür h4-Überschriften verwenden. Jede weitere Unterteilung würde allerdings bereits die Übersichtlichkeit negativ beeinflussen.

Ein wichtiger Best Practice Hinweis: Die h1-Überschrift sollte man auf jeder HTML-Seite nur einmal einsetzen.

Sie sollte die Hauptüberschrift der gesamten Seite darstellen. Technisch gesehen ist es möglich, auch mehrere h1-Überschriften einzubauen, allerdings sollte man das eben aus dem oben genannten Grund nicht so umsetzen.

Unterhalb der Überschriften folgt in der Regel Text. In unserem Beispiel schreibe ich einfach mal Folgendes:

Darüber hinaus fällt auf, dass der Text nicht so formatiert ist wie im HTML-Dokument. Darin haben wir zwei Absätze geschrieben, wobei der Browser lediglich einen Absatz anzeigt.

Damit wir allerdings im Browser ebenfalls zwei Absätze sehen, müssen wir noch den sogenannten HTML p Tag einbauen.

Mit der Zahl 5 am Wort „Lorem“ geben wir die gewünschte Anzahl an Wörtern an, die unser Beispieltext haben soll. Nach dem Bestätigen durch die Enter-Taste sehen wir:

Emmet hat uns einen Dummy-Text bestehend aus fünf Wörtern generiert.

Zum Abschluss dieser Lektion möchte ich noch auf einen Fehler hinweisen, der häufig von Einsteigern gemacht wird, nämlich Zwischenüberschriften zu überspringen.

In den Texten von Einsteigern sieht man immer wieder, dass beispielsweise nach der h2-Überschrift keine h3, sondern direkt eine h4-Überschrift folgt. Der Gedanke dahinter ist oftmals, dass es so optisch besser aussieht. Diesen Fehler kann man allerdings getrost vermeiden, da sich die Größe der Überschriften im Anschluss noch mit CSS anpassen lässt.

Vielleicht hast du den ersten Beitrag dieser Reihe gelesen und erinnerst dich noch an Folgendes:

Mit HTML definiert man die Struktur einer Website, wohingegen man mit CSS das Aussehen vorgibt und den Content stylt.

In anderen Worten:Lasse keine Überschrift aus.

Wenn es also eine h1- und eine h2-Überschrift gibt und du weiter in die Tiefe gehen möchtest, wähle eine h3-Überschrift. Die Größe der Darstellung kannst du später noch mithilfe von CSS anpassen.