Semantisches HTML5 - Markup mit Bedeutung
HTML5 verbessert die Semantik einer Webseite
HTML ist ein ausgeklügeltes System, wie man Informationen über den Inhalt in einem Textdokument einbindet. Diese Informationen werden als Markup (Auszeichnung) bezeichnet und beschreiben die Bedeutung der Inhalte, also deren Semantik. In unserer einfachen HTML-Seite haben Sie bereits ein paar Beispiele gesehen, z.B. das Element p, das den Inhalt des Absatzes auszeichnet.
HTML definiert nicht, wie der Inhalt in einem Browser erscheinen soll. Das bleibt Aufgabe des CSS (Cascading Style Sheets). HTML5 betont diese Unterscheidung mehr als alle anderen früheren HTML-Versionen. Das ist der wesentliche Aspekt der Sprache.
Vielleicht fragen Sie sich, warum ein bestimmter Text in der HTML-Basisseite manchmal größer als anderer Text ist oder in fett oder kursiv ausgegeben wird.
Gute Frage! Der Grund ist, dass es bei jedem Browser eine eingebaute CSS-Datei gibt (ein Stylesheet, also eine Formatvorlage), die regelt, wie jedes HTML-Element standardmäßig dargestellt wird, außer Sie haben eine eigene CSS-Datei erstellt, die diese überschreibt. Die Standarddarstellung variiert etwas zwischen den verschiedenen Browsern, aber insgesamt ist sie recht konsistent. Wichtiger hingegen ist, dass die dem Inhalt zugrunde liegende Struktur und Bedeutung, wie sie durch Ihr HTML definiert werden, gleich bleiben.
Block- und Inline-Elemente und HTML5
Die Standardformatvorlage eines Browsers stellt Überschriften (die Elemente h1 bis h6) anders dar als normalen Text, macht em-Text kursiv und unterstreicht Links und gibt ihnen eine andere Farbe. Zusätzlich beginnen manche Elemente in ihrer eigenen Zeile (beispielsweise h1 und p) und andere werden innerhalb des sie umgebenden Kontexts dargestellt (wie a und em). In diesem Beispiel kommt ein zweiter Absatz vor (der Copyright-Hinweis), um zu verdeutlichen, dass jeder Absatz in einer eigenen Zeile steht. Diese Darstellungsregeln können teilweise oder ganz durch eigene Stylesheets überschrieben werden.
Wie Sie sehen, werden manche HTML-Elemente (z.B. article, h1 und p) in einer eigenen Zeile wie bei einem Absatz in einem Buch dargestellt, während andere (z.B. a und em) in der gleichen Zeile wie andere Inhalte präsentiert werden. Auch dies ist eine Funktion der Standardformatierungsregeln des Browsers und nicht der HTML-Elemente selbst. Das möchte ich gerne näher ausführen. Vor HTML5 wurden die meisten Elemente entweder als Block-Elemente (die in einer eigenen Zeile dargestellt werden) oder als Inline-Elemente (die innerhalb einer Textzeile dargestellt werden) kategorisiert. HTML5 wirft diese Begrifflichkeiten über den Haufen, weil Elemente dann mit ihrer Darstellung verknüpft werden, was ja bekanntlich nicht die Aufgabe von HTML ist.
Stattdessen kann man allgemein sagen, dass Elemente, die man bisher als Inline bezeichnet hat, in HTML5 nunmehr als Phrasing Content (Textinhalte) kategorisiert werden, also Elemente und der Text, den sie enthalten, die vor allem in Absätzen erscheinen.
Die alten Block-Elemente fallen nun ebenfalls in neue HTML5-Kategorien, die sich auf deren Semantik konzentrieren. Viele dieser Elemente sorgen für die strukturellen Hauptabschnitte und Überschriften Ihrer Inhalte.
Nach dieser Vorrede ist noch festzustellen, dass Browser die Standardregeln für die Darstellung dieser Elemente nicht geändert haben und das auch nicht machen sollten. Immerhin wollen Sie ja beispielsweise nicht, dass sich die beiden Absätze (die p-Elemente) ineinander schieben oder der em-Text ("Elemente" im ersten Absatz der HTML5-Seite) den Satz unterbricht, indem er in seiner eigenen Zeile erscheint (em ist das Element, mit dem Sie etwas zur Betonung hervorheben).
So werden Überschriften, Absätze und strukturelle Elemente wie article in einer eigenen Zeile dargestellt und der Phrasing Content erscheint in der gleichen Zeile wie der umgebende Inhalt. Und auch wenn in HTML5 die Begriffe Block- und Inline-Elemente nicht mehr vorkommen, ist es hilfreich, deren Bedeutung zu kennen. In Anleitungen tauchen sie häufig auf, weil sie vor HTML5 beim Reden über HTML allgemein fest verwurzelt waren. Gelegentlich werde ich diese Begriffe einsetzen, um schnell zu verdeutlichen, ob ein Element standardmäßig seine eigene Zeile beansprucht oder sie mit anderen teilt.
Wir werden uns in späteren Kapiteln eingehender mit CSS beschäftigen, aber für jetzt sollten Sie wissen, dass ein Stylesheet, also eine Formatvorlage, einfach nur Text ist, so wie eine HTML5-Seite. Also können Sie ein solches Stylesheet mit dem gleichen Texteditor erstellen wie Ihr HTML.
Semantik im Fokus von HTML5
HTML5 betont die HTML-Semantik und überlässt die gesamte visuelle Gestaltung dem CSS. Das war bei früheren Versionen von HTML nicht immer der Fall. Als das Web entstand, gab es noch eine korrekte Weise, um Seiten zu formatieren. HTML gab es schon ein paar Jahre, als im Dezember 1996 CSS1 formell eingeführt wurde. Um diese Lücke zwischenzeitlich zu füllen, wurden bei HTML eine Handvoll Darstellungselemente aufgenommen, deren Zweck es war, eine einfache Formatierung des Texts zu erlauben, also ihn z.B. fett, kursiv oder in anderer Größe als die umgebende Schrift darzustellen.
Diese Elemente waren damals für ihre Zwecke ganz dienlich, aber während sich die empfohlenen Vorgehensweisen im Web weiterentwickelten, fielen sie berechtigterweise in Ungnade. Im Kern dieser Denkweise stand (und steht immer noch) das Konzept, dass HTML nur für die Beschreibung der Bedeutung der Inhalte gedacht ist und nicht deren Darstellung.
Die darstellungsbezogenen HTML-Elemente durchbrachen diese bewährte Vorgehensweise.
Somit bezeichnete man deren Verwendung in HTML 4 als veraltet und empfahl den Autoren, Text und andere Seitenelemente mit CSS zu formatieren. HTML5 geht noch weiter: Es eliminiert bestimmte darstellungsbezogene Elemente und definiert andere neu, damit sie nur einen semantischen Wert enthalten und nicht die Darstellung diktieren.
Das Element small ist ein solches Beispiel. Anfänglich war es dazu gedacht, Text kleiner als Normaltext zu machen. Doch in HTML5 steht small für das "Kleingedruckte", z.B. rechtliche Hinweise. Sie können diesem Text mit CSS die größte Schrift auf der Seite geben, wenn Sie wollen, aber das ändert die inhaltliche Bedeutung von small nicht.
Mittlerweile existiert der alte Gegenpart von small, das Element big, in HTML5 nicht mehr. Es gibt noch weitere solche Beispiele, von denen Sie im Verlauf dieses Kapitels erfahren.
HTML5 definiert auch neue Elemente wie header, footer, nav, article, section und viele andere mehr, die die Semantik des Inhalts bereichern.
Doch egal, ob Sie nun ein HTML-Element verwenden, das seit Anbeginn der Sprache existiert, oder eines, das durch HTML5 neu hinzukam, Ihr Ziel sollte das Gleiche bleiben: Wählen Sie die Elemente, die die Bedeutung Ihres Inhalts am besten beschreiben, ungeachtet ihrer Darstellung.