Struktur¶
Warum Struktur in HTML wichtig ist¶
Eine klare Struktur in HTML sorgt dafür, dass Webseiten besser verstanden und verarbeitet werden können – sowohl von Maschinen als auch von Menschen. Sie erleichtert:
Browsern und Suchmaschinen die Analyse der Inhalte.
Hilfstechnologien (z. B. Screenreadern) die Navigation durch die Seite.
Entwicklern das Lesen, Pflegen und Erweitern des Codes.
header¶
Das <header>-Element ist ein semantisches Block-Element, das den Kopfbereich einer Webseite oder eines Inhaltsbereichs (z. B. eines <article>) kennzeichnet.
Zweck
Zeigt den einleitenden oder übergeordneten Bereich an.
Enthält typischerweise:
Logo oder Titel der Website
Hauptüberschrift (
<h1>oder<h2>)Navigation (
<nav>)Eventuell Untertitel, Claim oder Suchfeld
Eigenschaften
Kann mehrfach auf einer Seite vorkommen
Einmal für die gesamte Seite
Einmal innerhalb einzelner Artikel (
<article>)
Semantisch: signalisiert den Beginn eines Inhaltsabschnitts.
<header>
<img src="logo.png" alt="logo" />
<h1>Meine Website</h1>
<p>Webentwicklung einfach erklärt</p>
</header>
main¶
Das <main>-Element ist ein semantisches Block-Element, das den Hauptinhalt einer Webseite kennzeichnet.
Zweck
Markiert den zentralen Inhalt, der sich vom Header, Footer oder der Navigation abhebt.
Hilft Browsern, Suchmaschinen und Screenreadern, den wichtigsten Teil der Seite zu erkennen.
Eigenschaften
Nur ein
<main>pro Seite erlaubt.Darf nicht innerhalb von
<header>,<footer>,<article>oder<aside>liegen.Enthält typischerweise Text, Artikel, Abschnitte, Bilder oder interaktive Inhalte.
<main>
<h2>Willkommen</h2>
<p>Hier stehen die wichtigsten Inhalte.</p>
</main>
section¶
Das <section>-Element ist ein semantisches Block-Element, das einen thematisch zusammenhängenden Abschnitt einer Webseite kennzeichnet.
Zweck
Gliedert Inhalte in logische Themenblöcke.
Hilft Browsern, Screenreadern und Suchmaschinen, die inhaltliche Struktur zu erkennen.
Eigenschaften
Sollte fast immer eine Überschrift (
<h2>oder<h3>) enthalten.Eignet sich für Abschnitte, die ein eigenes Thema oder einen eigenständigen Inhalt behandeln.
Nicht für rein dekorative oder layoutbezogene Container verwenden – dafür
<div>.
<section>
<h2>Aktuelles</h2>
<p>Neuigkeiten von der Website …</p>
</section>
article¶
Das <article>-Element ist ein semantisches Block-Element, das einen eigenständigen, in sich abgeschlossenen Inhalt darstellt.
Zweck
Markiert Inhalte, die für sich alleine stehen können, z. B.:
Blogbeiträge
News-Artikel
Produktbeschreibungen
Kommentare
Kann innerhalb von
<main>oder<section>verwendet werden.
Eigenschaften
Enthält häufig eigene Überschriften und optionale
<header>- und<footer>-Bereiche.Wird von Suchmaschinen und Screenreadern als selbstständiger Inhalt erkannt.
<article>
<header><h2>Blogartikel</h2></header>
<p>Dies ist ein eigenständiger Beitrag …</p>
<footer><p>Autorin: Lea</p></footer>
</article>
aside¶
Das <aside>-Element ist ein semantisches Block-Element, das ergänzende Inhalte zu einem Hauptinhalt darstellt.
Zweck
Enthält Inhalte, die den Hauptinhalt unterstützen, aber nicht zwingend dazugehören.
Beispiele:
Randnotizen
Zusatzinformationen
Werbung
weiterführende Links
Kann innerhalb von
<main>oder außerhalb verwendet werden (z. B. Sidebar).
Eigenschaften
Hilft Browsern, Screenreadern und Suchmaschinen, Hauptinhalt und Nebeninfo zu unterscheiden.
Sollte klar erkennbar sein, dass es sich um ergänzende Inhalte handelt.
<aside>
<h3>Mehr zum Thema</h3>
<ul>
<li><a href="#">Link 1</a></li>
</ul>
</aside>
div¶
Das <div>-Element ist ein nicht-semantisches Block-Element, das keine eigene Bedeutung für den Inhalt hat.
Zweck
Dient zur Gruppierung von Inhalten.
Wird hauptsächlich für Layout, Styling oder als Container verwendet.
Hilft beim Strukturieren von Abschnitten, wenn kein semantisches Element passt.
Eigenschaften
Block-Element: nimmt die gesamte Breite ein und beginnt auf einer neuen Zeile.
Kann Beliebige Inhalte enthalten: Text, Bilder, Listen, Formulare etc.
<div class="box">
<p>Inhalt in einer Box</p>
</div>
Semantische vs. nicht-semantische Elemente¶
Semantische Elemente tragen eine Bedeutung: Sie zeigen an, welche Art von Inhalt sich in ihnen befindet. Beispiele sind <header>, <nav>, <main>, <section>, <article> oder <footer>.
Sie helfen bei Barrierefreiheit, Struktur, Lesbarkeit und Suchmaschinenoptimierung.
Nicht-semantische Elemente wie <div> oder <span> besitzen keine eigene Bedeutung. Man verwendet sie, wenn kein passendes semantisches Element existiert oder wenn man Bereiche für Gestaltung und Layout gruppieren möchte.
Merksatz: Man setzt semantische Elemente ein, wenn sie passen – ein <div> ist nur die Ausweichlösung.
Elemente eindeutig kennzeichnen¶
Je größer eine Website wird, desto mehr HTML-Elemente kommen zum Einsatz. Um diese voneinander zu unterscheiden, kann man Bezeichner vergeben. In HTML gibt es dafür zwei Attribute:
id→ eindeutiger Bezeichner, dessen Wert darf auf der gesamten Website nur einmal vorkommen.class→ Klassenname, darf mehrfach verwendet werden und auch mehreren Elementen zugewiesen werden.
Bemerkung
Ein Element kann mehrere Klassen besitzen, um unterschiedliche Stil- oder Funktionszuweisungen zu kombinieren.
Verwenden Sie möglichst Klassen (
class), da sie flexibler und wiederverwendbar sind.
<div id="header">
<h1>Meine Website</h1>
</div>
<div id="footer">
<p>© 2025 Meine Website</p>
</div>
<div class="box highlight">
<p>Inhalt mit zwei Klassen: box und highlight</p>
</div>
<div class="sidebar">
<p>Inhalt mit einer Klasse: sidebar</p>
</div>
Block- und Inline Elemente¶
Block-Elemente (z. B. <h1>, <div>, <p>, <section>) nehmen die gesamte Breite ein und beginnen in einer neuen Zeile.
Inline-Elemente (z. B. <span>, <a>, <strong>) fügen sich in den Textfluss ein und nehmen nur den Platz ein, den der Inhalt benötigt.
Sie erzeugen keinen Zeilenumbruch.
Strukturierte HTML-Seite¶
<body>
<header>
<h1>Meine Website</h1>
<nav>…</nav>
</header>
<main>
<section>
<h2>Überblick</h2>
<p>Einführung …</p>
</section>
<section>
<h2>Blog</h2>
<article>…</article>
<article>…</article>
</section>
</main>
<aside>Zusatzinfos …</aside>
<footer>© 2025</footer>
</body>