• Home
  • |
  • Blog
  • |
  • HTML Tutorial #6 – Der HTML p Tag und h Tag – Paragrafen und Überschriften

HTML Tutorial #6 – Der HTML p Tag und h Tag – Paragrafen und Überschriften

Zuletzt aktualisiert: Mai 22, 2023

Im heutigen Blogbeitrag wirst du Paragrafen und Überschriften kennenlernen, welche man auch jeweils als HTML p Tag und h Tag bezeichnet. Durch diese Elemente können wir damit beginnen, unserem HTML-Grundgerüst mehr Leben einzuhauchen.

Sie sehen gerade einen Platzhalterinhalt von Youtube. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.

Mehr Informationen

Inhaltsverzeichnis

1. Warum Überschriften so wichtig sind

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.

2. 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:

<h1>Das ist Überschrift 1</h1>

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:

<h2>Das ist Überschrift 2</h2>
<h3>Das ist Überschrift 3</h3>
<h4>Das ist Überschrift 4</h4>
<h5>Das ist Überschrift 5</h5>
<h6>Das ist Überschrift 6</h6>

Nachdem wir auch diese Änderungen gespeichert und die Seite aktualisiert haben, sehen wir nun alle Überschriften im Browserfenster:

Die unterschiedlichen HTML Überschriften im Browserfenster

3. Praxisbeispiel mit unterschiedlichen Überschriften

Wir verwenden also eine h1-Überschrift, um den Titel darzustellen. Zwischen die Tags schreiben wir beispielhaft „C# Programmierkurs“.

<h1>C# Programmierkurs</h1>

Die wichtigsten drei Oberpunkte verpacken wir als h2-Überschriften.

<h2>Inhaltsverzeichnis</h2>
<h2>Erfahrungen anderer Kunden</h2>
<h2>Häufig gestellte Fragen</h2>

Für die Unterpunkte des Inhaltsverzeichnisses wählen wir h3-Überschriften, um dieses in drei Module aufzugliedern.

<h2>Inhaltsverzeichnis</h2>
<h3>Modul 1</h3>
<h3>Modul 2</h3>
<h3>Modul 3</h3>

Das Inhaltsverzeichnis mit verschiedenen h tags

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:

<h1>C# Programmierkurs</h1>

In diesem Kurs lernst du wie man C# programmiert.

Wir beginnen komplett bei 0, sodass dir auch erklärt wird, wie man alle notwendigen Programme auf deinem Rechner installiert.

<h2>Inhaltsverzeichnis</h2>

Wenn wir diesen Text nun speichern, siehst du, dass er unterhalb der h1-Überschrift und zugleich oberhalb der h2-Überschrift erscheint:

Der Text erscheint noch ohne Verwendung vom HTML p Tag zwischen den Überschriften h1 und h2

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.

4. Der HTML p Tag

Mit dem p Tag definieren wir Paragrafen, also einzelne Textabschnitte. Wir können nun also folgendes schreiben:

<p>In diesem Kurs lernst du wie man C# programmiert.</p>

<p>Wir beginnen komplett bei 0, sodass dir auch erklärt wird, wie man alle notwendigen Programme auf seinem Rechner installiert.</p>

Nach dem Speichern sehen wir, dass die beiden Sätze tatsächlich zu separaten Paragrafen formatiert wurden.

Mithilfe vom HTML p Tag werden die Zeilen in separate Paragrafen gegliedert

Damit besitzen wir also ein weiteres Hilfsmittel, um Texte sauber zu strukturieren. An dieser Stelle möchte ich dir noch einen weiteren nützlichen Shortcut von Emmet zeigen.

5. Beispieltext mit Emmet generieren

Einen Beispieltext lässt man generieren, wenn man bereits das Grundkonstrukt einer Seite aufgebaut hat, jedoch noch nicht die passenden Inhalte parat hat. Um das Ganze zu testen, schreiben wir nach der Überschrift „Modul 1“ nun mal Folgendes:

Lorem5

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.
Lorem5 generiert in HTML einen Beispieltext aus fünf Wörtern

Bei Modul 2 können wir beispielsweise das Gleiche tun, allerdings diesmal den Text mit 15 Wörtern generieren lassen. Dafür schreiben wir:

Lorem15

Anschließend bestätigen wir das Ganze mit Enter und erhalten dann einen Text, der aus 15 Wörtern besteht. Die Platzhalter-Texte sind also ziemlich nützlich!

6. Ein typischer HTML-Einsteigerfehler

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.