HTML/Semantik

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Unter Semantik versteht man im Allgemeinen die Bedeutungslehre, die die Bedeutung von Zeichen wie Wörter, Phrasen oder Symbole untersucht. Durch semantisch korrektes HTML verleiht man Inhalten eine Bedeutung. Eine Überschrift wird häufig in etwas größerer Schrift und fett dargestellt, aber nicht jeder fette und groß gedruckte Text ist zwangsläufig eine Überschrift, er könnte auch ein Motto oder ein Zitat sein.

Im Webdesign wird versucht, Seitenstrukturierung und Textstrukturierung nach semantischen Gesichtspunkten zu organisieren, d. h. den Textinhalt sinnvoll mit den dafür passenden Elementen auszuzeichnen, beispielsweise eine Überschrift 1. Ordnung mit einem h1-Element. Mit HTML bestimmt man hierbei, was etwas ist, wie etwas aussehen soll, legt man mit CSS fest. Keinesfalls sollte beispielsweise Text als Überschrift ausgezeichnet werden, nur um ihn größer darzustellen. Anders herum sollte aber Text, der eine Überschrift ist, nicht in ein div-Element verpackt und dann mittels CSS wie eine Überschrift gestaltet werden, sondern als eine Überschrift ausgezeichnet werden.

Inhaltsverzeichnis

[Bearbeiten] Semantische Elemente benutzen

Semantik ist nicht kompliziert, bereits in Fließtext werden beispielsweise folgende semantische Auszeichnungen verwendet:

Die Browser verwenden besondere Darstellungen für die Elemente, die allerdings von einander abweichen können.

Für die Strukturierung einer Seite gibt es diverse in HTML5 neu eingeführten Elemente zur Seitenstrukturierung, wie beispielsweise nav für einen Navigationsbereich oder footer für den Fuß eines Abschnitts.

Auch für Interaktion mit dem Nutzer gibt es semantisch passende Elemente:

  • mit dem a-Element kann man auf andere Seiten oder Stellen auf der aktuellen Seite verweisen
  • mit Buttons lassen sich Aktionen auslösen, etwa Formulare absenden und JavaScript-Programme ausführen

In dem unwahrscheinlichen Fall, dass sich für einen Anwendungszweck kein semantisch passendes Element finden lässt, muss man dieses selbst bauen und mittels WAI-ARIA auszeichnen.

Die Elemente div und span sind als Elemente ohne semantische Bedeutung geeignet, um als Ansatzpunkt für die Gestaltung durch CSS zu dienen, falls sich hierfür kein passendes semantisches Element findet. Sie sind also Präsentations-bezogenes Markup.

[Bearbeiten] Negativ-Beispiele

Folgende gängige Herangehensweisen widersprechen der Idee von semantischem Einsatz von HTML und sollten daher gemieden werden:

  • Framesets und Tabellen-Layouts: Zur Gestaltung wurden eigens Präsentations-bezogene Elemente und Attribute definiert bzw. für tabellarische Daten bestimmte Elemente zu Layout-Zwecken missbraucht
  • Bilder und Texte mit JavaScript anklickbar machen, damit sie sich wie Buttons verhalten; bessere Alternative: Buttons, diese bringen bereits die passende sematische Bedeutung und Tastaturfokus bereits mit.
    Für Interaktion mit dem Nutzer kann man auch ein Formular einsetzen, das dann mit JavaScript „angereichert“ wird, aber auch ohne funktioniert (vgl. Progressive enhancement)

[Bearbeiten] Vorteile von semantisch sinnvollem HTML

  • semantisches HTML wird dank der im Browser-Stylesheet verankerten Standard-Darstellung auch ohne weiteres CSS seinem Inhalt nach angemessen dargestellt, z. B. Quelltext-Blöcke in einer Schriftart mit konstanter Buchstabenbreite.
  • Ladezeiten verkürzen sich durch semantisches HTML erheblich, da das Markup kompakter ist und kein JavaScript oder CSS nötig ist, um die Funktionen von semantischem HTML nachzubauen
  • Programme können den Inhalt besser aufbereiten:
    • Screenreader können Inhalte besser aufbereiten (Barrierefreiheit), weil deren Bedeutung bekannt ist
    • Suchmaschinen können die Struktur eines Dokuments besser erfassen
    • Browser können einen Lesemodus anbieten, der nur die Hauptinhalte einer Seite darstellt
    • Programme können automatisch Inhaltsverzeichnisse erstellen, weil sie „wissen“, dass ein Abschnitt in einem Dokument mit einer als solchen ausgezeichneten Überschrift beginnt
  • bei interaktiven Elementen wie Buttons müssen nicht Eigenschaften wie Tastaturbedienung mühsam nachgebaut werden, was Arbeit spart

[Bearbeiten] siehe auch

[Bearbeiten] Weblinks

  • woodshed productions: Der Suchmaschinen-Robot und der Webdesigner
    Ein etwas älterer Artikel, der die Wichtigkeit von Semantik anhand eines fiktiven Dialogs zwischen einem Webdesigner und einem Suchmaschinen-Robot veranschaulicht.
  • Heydon Pickering: Reinventing The Hyperlink
    Zeigt, wie aufwändig es ist, ein vorhandenes Element in HTML mit JavaScript und CSS mit allen Funktionen nachzubauen. Bitte nicht nachmachen ;-)
Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML