Slider

Hinzufügen von Text und Überschriften in HTML: Einsteigerfreundlicher Leitfaden

by on 0

Wenn du gerade mit HTML beginnst, ist eine der ersten Aufgaben das Einfügen von Text und Überschriften. Texte sind das Herzstück jeder Webseite – ob Blogbeitrag, Produktbeschreibung oder Info-Seite. In diesem Beitrag lernst du, wie du mit einfachen HTML-Tags Texte und Überschriften strukturierst, welche Tags dafür wichtig sind und wie du sie richtig einsetzt.

Warum Textstruktur wichtig ist

Texte sind nicht nur Inhalt, sondern auch Struktur. Richtig eingesetzte Tags sorgen für:

  • ✅ Übersichtlichkeit für den Leser

  • ✅ Bessere Lesbarkeit auf verschiedenen Geräten

  • ✅ Gutes Ranking bei Suchmaschinen (SEO)

  • ✅ Barrierefreiheit für Screenreader

1. Überschriften mit <h1> bis <h6>

HTML bietet sechs verschiedene Überschriftsebenen:

html
<h1>Hauptüberschrift</h1>
<h2>Unterüberschrift</h2>
<h3>Dritte Ebene</h3>
<h4>Vierte Ebene</h4>
<h5>Fünfte Ebene</h5>
<h6>Kleinste Überschrift</h6>

📌 Hinweise:

  • Nur eine <h1> pro Seite (wichtig für SEO)

  • Überschriften sollten hierarchisch aufgebaut sein (keine <h3> ohne vorherige <h2>)

  • Suchmaschinen und Screenreader nutzen diese Struktur, um den Inhalt zu analysieren

Beispiel:

html
<h1>Willkommen auf meiner Webseite</h1>
<h2>Was du hier findest</h2>
<h3>HTML-Grundlagen</h3>

2. Absätze mit <p>

Der Tag <p> steht für „paragraph“, also Absatz. Damit kannst du normalen Text strukturieren:

html
<p>Das ist ein einfacher Absatz mit Textinhalt.</p>

Tipp:

  • Verwende für jeden Gedankengang einen neuen Absatz.

  • HTML ignoriert Zeilenumbrüche im Code – neue Absätze müssen immer mit <p> gesetzt werden.

3. Text betonen: <strong>, <em>, <b>, <i>

Fett und kursiv? Kein Problem:

html
<p><strong>Wichtig:</strong> Dieser Text ist hervorgehoben.</p>
<p><em>Beachte:</em> Dieser Text ist kursiv dargestellt.</p>
TagBedeutungEffekt
<strong>Wichtig, betontfett
<em>Betonung, Hervorhebungkursiv
<b>Nur visuell fettfett
<i>Nur visuell kursivkursiv

✅ Hinweis: Für semantisch korrektes HTML solltest du <strong> und <em> bevorzugen – sie geben dem Text auch Bedeutung, nicht nur Stil.

4. Zeilenumbrüche mit <br>

Ein normaler Zeilenumbruch innerhalb eines Absatzes funktioniert nicht mit Enter-Taste. Stattdessen nutzt du:

html
<p>Zeile eins<br>Zeile zwei</p>

⚠️ Verwende <br> sparsam – es eignet sich für Gedichte, Adressen oder einzelne Zeilen, aber nicht als Ersatz für Absatzstruktur.

5. Texte gruppieren mit <div> und <span>

Diese beiden Tags helfen dir, Inhalte für Design und Styling zu gruppieren:

<div> = Block-Element

html
<div>
  <h2>Artikelüberschrift</h2>
  <p>Inhalt des Artikels</p>
</div>

<span> = Inline-Element

html
<p>Dieser <span style="color:red;">Text</span> ist rot.</p>

Diese Tags machen besonders Sinn in Kombination mit CSS.

Beispiel: Kompletter HTML-Textbereich

html
<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8">
    <title>Text in HTML</title>
  </head>
  <body>
    <h1>HTML-Texte und Überschriften</h1>
    <p>Mit HTML lassen sich strukturierte Texte einfach einfügen.</p>

    <h2>Warum ist Struktur wichtig?</h2>
    <p><strong>Antwort:</strong> Weil sie die Lesbarkeit und Suchmaschinenfreundlichkeit verbessert.</p>

    <h2>So sieht ein Absatz aus</h2>
    <p>Dies ist ein ganz normaler Absatz.<br>Und das ist die nächste Zeile.</p>
  </body>
</html>

Fazit

Texte und Überschriften sind das Fundament jeder HTML-Seite. Mit nur wenigen Tags wie <h1> bis <h6>, <p>, <strong>oder <br> kannst du deine Inhalte klar, verständlich und suchmaschinenfreundlich strukturieren. Achte auf eine logische Reihenfolge und verwende die Tags so, wie sie gedacht sind – für semantisch sauberes HTML.

0

Keine Kommentare

Kommentar veröffentlichen

Abonnieren Kommentare zum Post (Atom)
© all rights reserved
made with by templateszoo