Strukturelle HTML-Elemente

Geschätzte Lektüre: 6 Minuten 394 Ansichten

Strukturelle HTML-Elemente sind Tags, die den grundlegenden Aufbau einer Webseite definieren. Sie helfen, den Inhalt logisch zu gliedern und sorgen für eine bessere Semantik (Bedeutung), Barrierefreiheit und Suchmaschinenoptimierung (SEO). Hier sind die wichtigsten strukturellen Elemente mit Beispielen:

<!DOCTYPE html>

Definiert den Dokumenttyp und die HTML-Version (hier: HTML5). Beispiel:

<!DOCTYPE html>

<html>

Das Wurzelelement einer HTML-Seite. Enthält alle anderen Elemente. Beispiel:

<html lang="de">
  <!-- Inhalt der Seite -->
</html>

<head>

Enthält Metadaten wie Titel, Zeichensatz und CSS/JS-Verweise. Beispiel:

<head>
  <meta charset="UTF-8">
  <title>Meine Webseite</title>
</head>

<body>

Enthält den sichtbaren Inhalt der Webseite. Beispiel:

<body>
  <h1>Willkommen!</h1>
  <p>Das ist meine Webseite.</p>
</body>

Wichtige semantische Strukturelemente (HTML5)

<header>

Definiert den Kopfbereich (z. B. Logo, Navigation). Beispiel:

<header>
  <h1>Firma XYZ</h1>
  <nav>...</nav>
</header>

<nav>

Enthält Navigationslinks. Beispiel:

<nav>
  <a href="/">Startseite</a>
  <a href="/kontakt">Kontakt</a>
</nav>

<main>

Der Hauptinhalt der Seite (darf nur einmal vorkommen). Beispiel:

<main>
  <h2>Über uns</h2>
  <p>Wir sind ein Team...</p>
</main>

<article>

Eigenständiger Inhalt (z. B. Blog-Post, News-Artikel). Beispiel:

<article>
  <h3>Neue Produkte</h3>
  <p>Ab nächster Woche erhältlich...</p>
</article>

<section>

Thematischer Abschnitt (z. B. Kapitel, Gruppe von Inhalten). Beispiel:

<section>
  <h2>Kapitel 1</h2>
  <p>Einleitung...</p>
</section>

<aside>

Zusatzinformationen (z. B. Sidebar, Werbung). Beispiel:

<aside>
  <h3>Werbeaktion</h3>
  <p>Jetzt 10% Rabatt!</p>
</aside>

<footer>

Fußbereich (z. B. Impressum, Copyright). Beispiel:

<footer>
  <p>© 2023 Meine Firma</p>
</footer>

Beispiel einer vollständigen HTML-Struktur

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Meine Webseite</title>
</head>
<body>
  <header>
    <h1>Mein Blog</h1>
    <nav>
      <a href="/">Start</a>
      <a href="/about">Über mich</a>
    </nav>
  </header>

  <main>
    <article>
      <h2>Erster Beitrag</h2>
      <p>Inhalt des Beitrags...</p>
    </article>

    <section>
      <h2>Kommentare</h2>
      <p>User1: Tolle Artikel!</p>
    </section>
  </main>

  <aside>
    <h3>Werbeanzeige</h3>
    <p>Buch jetzt im Angebot!</p>
  </aside>

  <footer>
    <p>© 2023 Mein Blog</p>
  </footer>
</body>
</html>

Vorteile struktureller Elemente:

• Barrierefreiheit: Screenreader können die Struktur besser interpretieren.
• SEO: Suchmaschinen verstehen die Bedeutung der Inhalte.
• Wartbarkeit: Klare Gliederung erleichtert die Code-Pflege.

Durch die Verwendung dieser Elemente wird eine Webseite nicht nur semantisch korrekt, sondern auch zukunftssicher aufgebaut.

Dieses Dokument teilen

Strukturelle HTML-Elemente

Oder Link kopieren

INHALT

Abonnieren

×
Cancel