Netz - Rettung - Recht

Aktuelle Browser setzen zunehmend die neuen Möglichkeiten von HTML 5 und CSS 3.0 um, die ich in meinem Artikel “Webdesign anno 2015” bereits angerissen hatte. Doch was ist daran alles neu?

HTML 5

Der aktuelle HTML-Standard macht endgültig Schluss mit den schon lange verpönten “Design”-Elementen zur optischen Gestaltung und erweitert HTML um neue Möglichkeiten, insbesondere im Zusammenhang mit Javascript.

• Rein optische Gestaltungselemente wie Frames oder <font>, <bgcolor>, <align> oder <big> gibt es nicht mehr. Ein standardkonformes HTML-5-Dokument darf solche Elemente nicht enthalten. HTML dient der semantischen Auszeichnung von Elementen, also der Beschreibung, was ein Element ist und nicht wie es aussehen soll.

• Bestehende, bisher rein gestalterische Elemente wurden neu definiert und mit einer semantischen Bedeutung versehen.
  So ist <big> für die Kennzeichnung einer größeren Schrift entfallen, <small> aber geblieben; nur bezeichnet es keine kleinere Schriftgröße mehr, sondern quasi das “Kleingedruckte”, also weniger wichtige Ergänzungen. Auch <b> und <i>, früher für Fett- und Kursivschrift zuständig, bleiben erhalten. Sie bezeichnen jetzt optisch hervorgehobenen Text, der aber keine besondere Wichtigkeit hat; dafür gibt es die bestehenden semantischen Elemente <strong> und <em>.
  Soll also ein Begriff als wichtig oder bedeutsam hervorgehoben werden, greift man zu <em> oder <strong>. Sollen bspw. Marken- oder Personennamen, Fachbegriffe o.ä. gekennzeichnet werden, ohne dass damit aber eine besondere Betonung verbunden ist, sind <b> und <i> angebracht, auch wenn möglicherweise beide Varianten optisch identisch dargestellt werden. “HTML 5 ist ein neuer Standard” wäre mithin ein Fall für <i>, “Sie sollten sich damit auf jeden Fall auseinandersetzen!” wäre ein Fall für <em>.

• Es gibt eine Reihe neuer Elemente wie bspw. <time>, vor allem aber neue Gliederungselemente.
  Wo bisher allüberall <div> verwendet wurde, um den Seiteninhalt zu strukturieren, treten nun Elemente wie <header>, <footer>, <nav> oder <aside> auf, die wie <div> verwendet werden können, aber eine zusätzliche semantische Bedeutung haben: als Kopf- oder Fußzeile, als Navigation oder zusätzliche Erläuterung. Der Hauptteil wird durch <section> und <article> gegliedert.

• Hinzu kommen neue, einheitliche Attribute, die bspw. in Form von data-* auch die einfachere Anbindung von Javascript ermöglichen oder wie role oder aria-* eine möglichst barrierefreie Nutzung ermöglichen. Besonders gilt das für Formulare, bei denen sich ganz neue Möglichkeiten der Eingabevalidierung direkt durch den Browser (ohne Javascript) ergeben, weil ein Datumsfeld eben nur valide Daten oder ein E-Mail-Feld nur syntaktisch korrekte E-Mail-Adressen akzeptieren muss.

• Außerdem kommen neue Möglichkeiten der Einbindung von Objekten, bspw. via <svg> oder <math>, hinzu, sowie vielfältige APIs für Javascript (Stichwort <canvas>, File-API oder Geolocation-API). Mit diesen Features habe ich mich aber noch nicht näher beschäftigt.

CSS 3.0

HTML wird ergänzt durch CSS. HMTL definiert, was ein Element ist: eine Überschrift, ein Absatz, eine Liste, eine Tabelle. CSS definiert, wie etwas aussehen soll: groß, klein, fettgedruckt, bunt, …

Die wichtigste Neuerung in CSS 3.0 sind sicherlich die Media Queries, die es ermöglichen, je nach Größe des Bildschirmfensters unterschiedliche Formatierungen anzuwenden. Wird die Webseite auf einem Smartphone aufgerufen, werden die Stilangaben für kleine Bildschirme verwendet; schaut man sie sich auf einem großen Bildschirm eines Desktoprechners an, kann sie ganz anders aussehen. Und verkleinert man auf dem Desktoprechner das Browserfenster, passt sich die Webseite wieder den neuen Dimensionen an.

Das ermöglicht responsive design - eine Website, die auf allen Geräten möglichst gleichermaßen gut aussieht. Auf dem Smartphone versteckt sich die Navigation hinter einem Button, die Inhaltsübersicht der aktuellen Seite wird ausgeblendet, die Seitenspalte mit ergänzenden Hinweisen steht vor oder nach dem Haupttext. Auf dem Tablet erscheint die Navigation; auf dem Desktop kommt auch die Seitenspalte zu ihrem Recht und wandert an die Seite, und die Inhaltsübersicht erscheint.

Selektoren und Pseudoklassen ermöglichen es, ganz zielgenau nur bestimmte Elemente zu formatieren: nicht jeden Absatz, sondern nur den Absatz direkt hinter einer Überschrift, oder nicht jedes Element einer Liste, sondern nur das erste oder letzte. Pseudoelemente ermöglichen es, vor oder hinter Elementen “etwas” einzufügen oder den ersten Buchstaben oder die erste Zeile gesondert zu behandeln. Beispiele dafür habe ich bereits im Beitrag “Kennzeichnung von Links in HTML-Dokumenten” gebracht.

Listen können in vielfältiger Weise formatiert werden; in Verbindung mit Pseudoelementen und Countern können sie bspw. (wie auch Überschriften) automatisch durchnummeriert werden.

Ganz neue Gestaltungsmöglichkeiten ermöglichen Farbverläufe und Schatten sowie Animationen mit transform und transition - ganz ohne Javascript, nur in CSS.

Die Möglichkeiten sind geradezu grenzenlos.

Literaturempfehlungen

Neben einer Unzahl von Quellen im Web gibt es zu diesem Themenkomplex auch Bücher auf gedrucktem Papier, bspw.

• HTML5 & CSS3 Webentwicklung mit den Standards von morgen von Brian P Hogan
  O’Reilly, 1. Auflage 2011, 272 Seiten, ISBN 978-3-89721-316-6
  Eine kurze, aber umfassende Vorstellung der Features und Veränderungen für den schnellen Einstieg in die Praxis.

• HTML5 Webseiten innovativ und zukunftssicher von Peter Kröner
  Open Source Press, 2. Auflage 2011, 592 Seiten, ISBN 978-3-941841-34-5
  Das Buch beschreibt (nur) HTML 5, seine Anwendung, Umsetzung und Neuerungen in größerer Breite.

• Flexible Boxes Eine Einführung in moderne Websites von Peter Müller
  Galileo Press, 1. Auflage 2013, 448 Seiten, ISBN 978-3-8362-2519-9
  In diesem Buch stehen nicht HTML, CSS oder seine Möglichkeiten, sondern die Gestaltung moderner Webseiten im Mittelpunkt: ausgehend von der semantischen Struktur des Inhalts (HTML) über dessen Gestaltung (CSS) bis zum Zusammenspiel dieser einzelnen Elemente, orientiert an praktischen Beispielen.

Ich wünsche fröhliches Gestalten und freue mich über Kommentare, Ergänzungen und eigene Erfahrungen!

Dieser Beitrag gehört zur Reihe “Webdesign anno 2015”.

[Dieser Eintrag wurde nachträglich im Februar 2015 veröffentlicht.]