HTML Erste Schritte – Lektion 1 – Die Tags h1–h6, p, strong

26/05/2025, by Ivan

Wie man HTML-Dokumente erstellt, lesen Sie in HTML-Erste Schritte.

Im letzten Unterricht haben wir unser erstes HTML-Dokument erstellt.

<html>
  <head>
    <title>Mein erstes HTML-Dokument</title>
  </head>
  <body>
    HTML meine ersten Schritte
  </body>
</html>

In dieser Lektion werden wir unser Dokument mit Text füllen. Wir fügen das am häufigsten verwendete Tag in HTML hinzu, das -Tag. Denken Sie daran, dass Tags in lateinischen Buchstaben geschrieben werden und dies kein russisches "r" ist. Das Tag ist eine Abkürzung für „paragraph“ und bedeutet Absatz, Paragraph.

Im HTML muss jeder Text in einem Tag eingeschlossen sein, also lassen Sie uns den Text in unserem Dokument in das Tag einschließen:

<html>
  <head>
    <title>Mein erstes HTML-Dokument</title>
  </head>
  <body>
    <p>HTML meine ersten Schritte</p>
  </body>
</html>

Optisch hat sich unser Dokument nicht verändert, aber die Struktur des HTML-Dokuments ist jetzt korrekter. Wir können auch mehrere Textabsätze hinzufügen:

<html>
  <head>
    <title>Mein erstes HTML-Dokument</title>
  </head>
  <body>
    <p>HTML meine ersten Schritte</p>
    <p>Jeder Jäger wünscht sich</p>
    <p>zu wissen, wo</p>
    <p>der Fasan sitzt</p>
  </body>
</html>

Wie Sie sehen, ist alles ziemlich einfach. Die p-Tags befinden sich alle auf der gleichen Ebene.

Lassen Sie uns eine Überschrift zu unserem Dokument hinzufügen. Warum braucht man Überschriften in HTML? Erstens, um den Text zu strukturieren – strukturierter Text ist einfacher und schneller zu lesen und zu verstehen. Zweitens sind Überschriften sehr wichtig für die Suchmaschinenoptimierung (SEO). Deshalb sollte man Überschriften im Text nicht vernachlässigen.

Für Überschriften verwenden wir die Tags h1, h2, h3, h4, h5, h6. Die Zahl nach dem h (header – Überschrift) gibt die Wichtigkeit der Überschrift an. Dabei sollte es nur eine h1 auf der Seite geben, die angibt, worum es auf dieser HTML-Seite geht. Nach h1 kann man h2 und h3 verwenden, danach h4 und so weiter. In der Regel reichen sechs Ebenen von Überschriften vollkommen aus.

<html>
  <head>
    <title>Mein erstes HTML-Dokument</title>
  </head>
  <body>
    <h1>Mein erstes HTML-Dokument</h1><br>    <h2>Meine ersten Schritte</h2>
    <p>HTML meine ersten Schritte</p>
    <h3>Noch ein Schritt</h3><br>    <h2>So sagt man</h2>
    <p>Jeder Jäger wünscht sich</p>
    <p>zu wissen, wo</p>
    <p>der Fasan sitzt</p>
  </body>
</html>

Wahrscheinlich haben Sie bemerkt, dass die Größe der h-Tags von der Zahl dahinter abhängt. So zeigt der Browser an, dass diese Überschrift wichtiger ist als die folgende.

Eine weitere Besonderheit der Tags h1–h6 ist, dass sie fett dargestellt werden. Text fett hervorheben kann man auch mit dem Tag :

<html>
  <head>
    <title>Mein erstes HTML-Dokument</title>
  </head>
  <body>   <h1>Mein erstes HTML-Dokument</h1>
    <h2>Meine ersten Schritte</h2>
    <p>HTML meine ersten Schritte</p>
   <h3>Noch ein Schritt</h3>
   <h2>So sagt man</h2>
    <p>Jeder <strong>Jäger</strong> wünscht sich</p>
    <p>zu wissen, wo</p>
    <p>der Fasan sitzt</p>
  </body>
</html>

Beachten Sie, dass wir zum Fettmarkieren den Tag strong verwenden. Man darf die h1–h6-Tags nicht innerhalb eines p-Tags benutzen! Merken Sie sich das, die Verwendung von h1–h6 in einem p-Tag kann die Position einer Website in der Google-Suche ernsthaft verschlechtern.

Merken wir uns, so ist es richtig:

<p>Sehr <strong>fetter</strong> Text</p>

Und das ist sehr schlecht:

<p><h3>Mach das</h3> nicht!</p>

Ich denke, Sie können jetzt so viel Text auf der Seite hinzufügen, wie Sie möchten, und ihn fett markieren. Und vor allem machen Sie es richtig.

Extra Block Types (EBT) - Neue Erfahrung im Layout Builder❗

❗Extra Absatztypen (EPT) - Erfahrung mit neuen Absätzen

HTML Erste Schritte – Lektion 1 – Die Tags h1–h6, p, strong