MyLeoNes™

HTML-Struktur — Informatik, 11–13

Wie eine Webseite kennzeichnet, was jeder Teil ihres Inhalts ist. Informatik, 11–13 Jahre.

Idee

HTML gibt einer Webseite eine Struktur, die der Browser verstehen kann. Tags kennzeichnen Rollen wie Überschrift, Absatz, Link oder Bild, statt nur das Aussehen von Buchstaben zu beschreiben. Der Browser liest diese Struktur und macht daraus die Seite, die du siehst; andere Werkzeuge können dieselbe Bedeutung nutzen.

Warum

Eine Seite mit nur visuellen Anweisungen ist für Browser, Suchdienste und Screenreader schwer zu verstehen. HTML wurde entwickelt, um Dokumente auf verschiedenen Computern zu teilen und dabei ihre sinnvolle Struktur zu bewahren. Die Trennung von Struktur und Gestaltung erleichtert außerdem die Anpassung an Handy, großen Bildschirm oder Sprachausgabe.

Durchgespieltes Beispiel

Für eine kleine Seite setzt du zuerst ein Überschriften-Tag um „Mein Garten“. Dann setzt du ein Absatz-Tag um „Drei Sonnenblumen sind offen.“ Danach fügst du ein Link-Tag mit Wörtern wie „Karte ansehen“ und einer Zieladresse hinzu. Der Browser zeigt dadurch eine Überschrift, normalen Text und einen anklickbaren Link mit den passenden Rollen.

Häufige Falle

Ein häufiger und verständlicher Fehler ist, ein Überschriften-Tag nur wegen der größeren Schrift zu verwenden. Das wirkt sinnvoll, wenn du nur auf das sichtbare Ergebnis achtest; eine Überschrift sagt Werkzeugen aber auch, dass der Text einen wichtigen Abschnitt benennt. Nutze Struktur für Bedeutung und Gestaltung für Größe, Farbe und Abstand.

Wo es vorkommt

HTML ist die Struktur unter Nachrichtenseiten, Onlineshops, Schulwebsites und Spieleseiten. Suchmaschinen nutzen Überschriften und Links, um den Inhalt zu verstehen, und Screenreader nutzen die Rollen, um die Seite sinnvoll vorzulesen. Mit den Entwicklertools eines Browsers kannst du diese Struktur untersuchen.

Weiter erkunden

Andere Sprachen

MyLeoNes™ wird geladen…