Responsive-Webdesign-Tutorial
Neuerungen in HTML5 und semantisch passende Strukturierung
Ein reaktionsfähiges Layout erfordert nicht zwingend, dass der HTML-Code in HTML5 erstellt wird. Es reicht ein flexibles Layout mit – wo nötig – Media Queries aus CSS3, wie in Abschnitt 3.3 näher erklärt wird. Statt HTML5 sind also auch HTML 4 (bzw. HTML 4.01) oder XHTML 1.0 (und darüber) möglich. Häufig wird die Umstellung einer Website auf ein reaktionsfähiges Layout ein „Relaunch“ einer bisherigen Webpräsenz sein, wo es nach Meinung des Autors Sinn macht, im Rahmen einer Überarbeitung einige der neuen Möglichkeiten von HTML5 zu nutzen. Gemeint ist insbesondere die semantische Strukturierung, die den übermäßigen Gebrauch von <div>-Elementen („Divitis“) einschränkt.
2.1. Was ist HTML5 und woher kommt es (Geschichte)
HTML bis zur Version 4.01 ist in SGML definiert, einer Metasprache zur Entwicklung neuer Auszeichnungssprachen. In der Praxis wurden von Webbrowsern allerdings nie komplette SGML-Parser implementiert. Stattdessen griff man auf spezialisierte HTML-Parser zurück, die auch als „Tag-Soup-Parser“ bekannt sind. Das sind fehlertolerante Parser, die auch mit ungültigem HTML-Code umgehen können. Diese unterstützen nicht den gesamten SGML-Funktionsumfang und haben fest eingebaute Tag-Vokabulare. Sogar ohne Doctype zeigen Webbrowser HTML-Seiten an. Die Browserhersteller bestimmen, was in der Praxis möglich ist – nicht was der Standard vorschreibt.
Kröner, P. 2011, HTML5: Webseiten innovativ und zukunftssicher, 2. Auflage, Open Source Press, München.
Mit XHTML 1.0 begann das W3C, HTML in XML zu definieren. XML verhält sich zu XHTML wie SGML zu HTML, ist also dessen technische Basis. XHTML 1.0 war als Beginn für eine XML-Zukunft im Web gedacht, die mit XHTML 2 fortgesetzt werden sollte, wobei XHTML 2 als modulare und erweiterbare Sprache konzipiert wurde.
Kröner, P. 2011, HTML5: Webseiten innovativ und zukunftssicher, 2. Auflage, Open Source Press, München.
In der Praxis interpretierten die Browser Webseiten, die in XHTML geschrieben wurden, allerdings weiterhin als gewöhnliches HTML 4.01. Die Browserhersteller betrachteten den XML-Ansatz als praxisfern und so gründeten Apple, Opera und Mozilla 2004 die Web Hypertext Application Technology Working Group (WHATWG), die sich mit der Weiterentwicklung neuer Webtechnologien beschäftigte, was am Ende als HTML5 bekannt wurde.
Kröner, P. 2011, HTML5: Webseiten innovativ und zukunftssicher, 2. Auflage, Open Source Press, München.
Es gibt mehrere Definitionen, was unter HTML5 verstanden werden kann. Diese Arbeit folgt dabei der enger gefassten Definition, worin HTML5 als Weiterentwicklung von HTML 4.01 gesehen wird und insbesondere das Document Object Model DOM5 umfasst. Dieses definiert Elemente und Schnittstellen in einer Baumstruktur. In einer weiter gefassten Definition ist HTML5 ein Sammelbegriff für eine Reihe neuer Browsertechnologien und umfasst jede Menge APIs und neue Features wie DOM Storage, Canvas, Geolocation, SVG, Web Workers und vieles mehr.
Kröner, P. 2011, HTML5: Webseiten innovativ und zukunftssicher, 2. Auflage, Open Source Press, München.
2.2. Doctype und Syntax
Jede HTML5-Seite beginnt mit dem sehr kurzen Doctype:
<!DOCTYPE html>
Dieser ist aufgrund seiner Kürze leicht zu merken und spart einige Bytes zu früher (Performance-Vorteil). Es gibt keine Strict-, Frameset- oder Transitional-Varianten mehr wie in HTML 4, Groß- und Kleinschreibung ist egal. Der Doctype funktioniert selbst in älteren Browsern wie dem Internet Explorer 6 und führt dazu, dass die Webseite im Standard-Modus angezeigt wird. Die Abwärtskompatibilität rührt daher, dass Browser den Doctype und dessen URI nicht vollständig auswerten(oder gar die DTD herunterladen), sondern nur auf Ähnlichkeit prüfen.
Kröner, P. 2011, HTML5: Webseiten innovativ und zukunftssicher, 2. Auflage, Open Source Press, München.
HTML5 erlaubt hinsichtlich Syntax unter bestimmten Umständen fehlende End-Tags, fehlende Anführungszeichen und Attribute und auch gemischte Groß- und Kleinschreibung. In den letzten Jahren hat sich durch XHTML 1 allerdings ein „sauberer“ Quellcode durchgesetzt, der auch in dieser Arbeit beibehalten werden soll. Elemente werden in den Quellcode-Beispielen immer geschlossen (außer es gibt kein End-Tag1Für einen Zeilenumbruch reicht in HTML5 ein <br>, ein <br /> ist nicht notwendig (außer für XHTML-Kompatibilität, dessen Behandlung aber den Rahmen dieser Arbeit sprengen würde; zur Erläuterung der Thematik ist es auch nicht notwendig (u.a. vgl. WHATWG).), Attribute unter doppelte Anführungszeichen gesetzt und Elementnamen immer klein geschrieben. Einrückungen dienen der besseren Lesbarkeit.
Kröner, P. 2011, HTML5: Webseiten innovativ und zukunftssicher, 2. Auflage, Open Source Press, München.
2.3. Semantisches HTML5 – Dokumente strukturieren mit neuen Elementen und Überschriften
In heutigen Webseiten kommen oft zahlreiche <div>-Elemente bei der Strukturierung zum Einsatz. Es gibt häufig einen Kopf- und Fußbereich und eine oder mehrere Navigationsmenüs. Mehrspaltige Float-Layouts sind die Regel, deren Elemente (<div>-Elemente!) mit dem CSS-Attribut float im Fluss ausgerichtet und entsprechend positioniert werden – damit das Layout die gewünschte Form annimmt. Das Element <div> ist dabei eine „semantisch leere Hülle“, hat also keine nähere Bedeutung. Ob Kopf-, Fuß- oder Hauptinhalts-Bereich – alles ist ein <div>. Dabei ließe sich sogar <div> für Überschriften verwenden und mit CSS optisch gleich-aussehend formatieren. Das ist semantisch nicht korrekt, keine gute Idee in der Suchmaschinenoptimierung (SEO, Search Engine Optimization), ein in der Praxis durchaus aber vorkommender Fall. Die <div>-“Flut“ hat über die Jahre den abschätzigen Begriff „Divitis“ geprägt („-itis“ ähnlich einer Krankheit).
Kröner, P. 2011, HTML5: Webseiten innovativ und zukunftssicher, 2. Auflage, Open Source Press, München.
HTML5 bietet mit neuen Elementen die Möglichkeit, Bereiche semantisch auszuzeichnen (statt <div> zu verwenden), was vor allem Vorteile in der Suchmaschinenoptimierung und Barrierefreiheit (Accessibility) hat. Suchmaschinen können wichtige (und weniger wichtige) Textpassagen leichter erkennen und entsprechend werten. Gleiches gilt für Screenreader, die blinden Personen (rasch) die wichtigsten Informationen aus einer Webseite extrahieren und vorlesen sollen.
Heise 2011, „Barrierefreiheit mit HTML5“, Abruf am 14.05.2013, http://www.heise.de/ix/artikel/Immer-weiter-1245285.html
Nachfolgend sollen die wichtigsten neuen Elemente beschrieben werden:
Geschlossene Inhalte (<article>)
Mit <article> werden unabhängige – in sich geschlossene – Inhalte ausgezeichnet, etwa Zeitschriften-Artikel, Posts in einem Forum oder Blog-Einträge. <article>-Elemente sollten unabhängig (vom Rest der Webseite) wiederverwendbar und verteilbar sein.
W3C Wiki (a) o.J., „HTML/Elements/article“, Abruf am 14.05.2013, http://www.w3.org/wiki/HTML/Elements/article
Unterteilung eines Dokuments in Sinnabschnitte mit <section>
Das Element <section> unterteilt ein Dokument inhaltlich in Sinnabschnitte, etwa einen Text in Kapitel. Zur optischen Gliederung sollte weiterhin <div> eingesetzt werden. Je <section> sollte typischerweise eine Überschrift vorhanden sein (<h1>).
W3Ca 2012, „The section element“, Abruf am 14.05.2013, http://www.w3.org/TR/html5/sections.html#the-section-element
<section>-Elemente können verschachtelt werden, d.h. wieder Unter-Abschnitte enthalten. <section> kann außerdem <header> und <footer> enthalten (siehe unten).
Kröner, P. 2011, HTML5: Webseiten innovativ und zukunftssicher, 2. Auflage, Open Source Press, München.
W3Ca 2012, „The section element“, Abruf am 14.05.2013, http://www.w3.org/TR/html5/sections.html#the-section-element
<article> <h1>Apfelsorten:</h1> <section> <h1>Red Delicious</h1> </section> <section> <h1>Granny Smith</h1> </section> </article>
Kopfbereich, Fußbereich und Navigation (<header>, <footer>, <nav>)
<header> kennzeichnet eine Sammlung einführender Inhalte (Überschriften, Navigationen, Suchformular, Inhaltsverzeichnis, Logos).
W3C Wiki (b) o.J., „HTML/Elements/header“, Abruf am 14.05.2013, http://www.w3.org/wiki/HTML/Elements/header
<footer> enthält typischerweise Informationen über den Autor, weiterführende Links oder Urheberrechts-Hinweise.
W3C Wiki (c) o.J., „HTML/Elements/footer“, Abruf am 14.05.2013, http://www.w3.org/wiki/HTML/Elements/footer
<nav> enthält einen Bereich mit Navigationslinks. Nicht alle Links sollten innerhalb von <nav> stehen, <nav> ist vor allem für die Hauptnavigation gedacht. Typische Links in einem Fußbereich (Home, Impressum, Datenschutz) gehören in ein <footer>-Element ohne <nav>-Block
W3C Wiki (e) o.J., „HTML/Elements/nav“, Abruf am 15.05.2013, http://www.w3.org/wiki/HTML/Elements/nav
Ergänzende Inhalte (<aside>)
Das Element <aside> enthält ergänzende Inhalte zum umgebenden Element, insb. Seitenspalten, Werbung und hervorgehobene Zitate.
W3C Wiki (d) o.J., „HTML/Elements/aside“, Abruf am 15.05.2013, http://www.w3.org/wiki/HTML/Elements/aside
Beispiel:
<article> <h1>Responsive-Webdesign-Tutorial:</h1> <header> <nav> <!-- Hauptnavigation --> <ol> <li><a href="#einleitung">Einleitung</a></li> <li><a href="#grundlagen">Grundlagen</a></li> </ol> </nav> </header> <section id="einleitung"> <!-- section sollte eine Überschrift enthalten --> <h1>Einleitung</h1> </section> <section id="grundlagen"> <h1>Grundlagen</h1> </section> <aside> <!-- Werbung --> </aside> <footer> © 2013, Andreas Hammer </footer> </article>
| Vorheriges Kapitel | Nächstes Kapitel |