HTML Tags

Weitere HTML-Tags im Überblick

Beim Erstellen moderner Webseiten ist es wichtig, nicht nur auf das Aussehen zu achten, sondern auch auf die Struktur und Bedeutung des Inhalts. Dafür gibt es in HTML5 sogenannte semantische Tags, die dem Browser (und Suchmaschinen oder Screenreadern) helfen, den Aufbau und die Funktion einzelner Bereiche besser zu verstehen.

Hier sind einige der wichtigsten semantischen HTML-Tags:

<section>
Ein <section> ist ein thematisch zusammenhängender Bereich auf einer Seite. Es kann z. B. ein Kapitel, ein Abschnitt oder ein Themenblock sein. In einer <section> können Überschriften, Absätze, Listen und weitere Elemente vorkommen.

<section>
  <h2>Unsere Leistungen</h2>
  <p>Wir bieten Webdesign, Programmierung und Beratung an.</p>
</section>

<article>
Ein <article> ist ein eigenständiger Inhalt, der auch für sich alleine stehen kann – zum Beispiel ein Blogpost, ein Zeitungsartikel oder ein Foreneintrag.

<article>
  <h2>Tipps für Einsteiger</h2>
  <p>Wenn du HTML lernen möchtest, starte mit den Grundtags wie &lt;h1&gt;, &lt;p&gt; und &lt;a&gt;.</p>
  <p>&lt; und &gt; benutzt man um die Zeichen < und > darzustellen statt als Code zu verwenden </p>
</article>

<header>
Das <header>-Tag wird verwendet, um den Kopfbereich eines Dokuments oder Abschnitts zu definieren – z. B. mit Logo, Navigation oder Überschrift.

<header>
  <h1>Rainperl Learn </h1>
  <nav>…</nav>
</header>

<footer>
Das <footer>-Tag beschreibt den unteren Bereich eines Dokuments oder Abschnitts – oft mit Kontaktinfos, Copyright oder Links.

<footer>
  <p>&copy; 2025 Rainperl. Alle Rechte vorbehalten.</p>
</footer>

<nav>
Das <nav>-Tag kennzeichnet eine Navigationsleiste oder ein Menü mit Links zu anderen Seiten oder Bereichen innerhalb einer Website. Wir entwerfen eine Linkliste mit einer untergeordneten Liste <ul> und drei Listeneinträgen <li>.

<nav>
  <ul>
    <li><a href="#start">Start</a></li>
    <li><a href="#lernen">Lernen</a></li>
    <li><a href="#kontakt">Kontakt</a></li>
  </ul>
</nav>

Semantisches HTML – kurz erklärt

Semantisches HTML bedeutet: Du verwendest Tags, die nicht nur ein bestimmtes Aussehen, sondern auch eine Bedeutung haben. Statt alles mit <div> zu bauen, benutzt du gezielt Tags wie <article>> <section>, <nav> oder <footer>, um dem Code mehr Struktur und Verständlichkeit zu geben – sowohl für Entwickler:innen als auch für Maschinen (z. B. Google oder Screenreader für Barrierefreiheit).

Vorteile: