Mobilmachung

Syntax und HTML5

Die Umsetzung in HTML5

image.jpg

© PC Magazin

Unter www.apple.com/html5/ zeigt Apple eindrucksvolle Beispiele, was mit HTML5 alles möglich ist - und sein wird.

Damit Sie die Unterschiede zwischen herkömmlicher Syntax und HTML5 besser nachvollziehen können, haben wir ein einfaches Beispiel-Layout sowohl in HTML4 als auch in HTML5 erstellt, das sie aus Platzgründen auf der Heft DVD finden. Am besten betrachten Sie beide Quellcodes nebeneinander auf dem Bildschirm - bitte vergleichen Sie!

Zunächst fällt auf, dass die CSS-Definitionen identisch sind. Das verwundert nicht, ändert doch HTML5 nichts an der Nutzung der Stylesheets. Der HTML5-Code sieht hingegen schlanker aus - und aus Gewohnheit vielleicht auch fehlerhaft.

Tatsächlich handelt es sich aber um valides HTML5, auch wenn die Tags <html>, </html>, <head>, </head>, <body> und </body> fehlen. Sie dürfen in HTML5 ebenso wegfallen wie die schließenden Tags </p>, </h1>, </h2> usw. Zusammen mit der vereinfachten DOCTYPE-Definition

<!DOCTYPE html>

und der verkürzten Zeichensatz-Festlegung

<meta charset="utf-8">

schrumpft die Dokumentengröße selbst in unserem simplen Beispiel um rund 17 Prozent. Bei größeren HTML-Dokumenten besteht also erhebliches Einsparpotenzial für die Dateigröße und damit die Ladezeit. Grundsätzlich sollten Sie aber nur Tags weglassen, wenn es unbedingt nötig ist, denn manche Browser reagieren darauf sauer - siehe Absatz "So klappt's: HTML5 und IE8".

In unserem Beispiel haben wir darauf verzichtet, die CSS-Definitionen als separate Datei anzulegen. In der Praxis sollten Sie das aber tun. Die Einbindung in HTML5 erfolgt wie von HTML4 gewohnt im <head>-Bereich, auch wenn dieser nicht benannt sein sollte:

<link type="text/css" rel="stylesheet"
href="CSS_Datei.css">

Mit dem Zusatz media können Sie für verschiedene Geräte unterschiedliche Stylesheets verlinken - eine gebräuchliche und empfehlenswerte Praxis. So funktioniert zum Beispiel media="iphone" fürs iPhone, aber auch eine Angabe wie

media="only screen and (max-device-
width: 480px)"

für eine detaillierte Steuerung. Im Beispiel wird das zugehörige Stylesheet aufgerufen, wenn es sich um ein Gerät mit einem Bildschirm bis maximal 480 Pixel Breite handelt - etwa ein iPhone.

Geräte wie das iPad lassen sich sowohl im Hoch-als auch im Querformat benutzen. Besonders elegant ist es, die Website entsprechend unterschiedlich darzustellen. Das klappt prima mit zwei CSS-Dateien, die so eingebunden werden:

<link rel="stylesheet" media="all and
(orientation:portrait)" href="portrait.css"><link rel="stylesheet" media="all
and (orientation:landscape)" href="landscape.css">

Das Argument orientation:portrait steht für die Hochkant-Variante, oriantation:landscape fürs Querformat.

Testen, testen, nochmals testen

Um sicherzustellen, dass Ihre Website auf allen Geräten ordentlich angezeigt wird, hilft nur ausgiebiges Testen. Am besten nutzen Sie einen Browser-Simulator. Im Web gibt es Simulatoren für beinah jeden Browser und diverse Mobilgeräte - eine Google-Suche führt schnell dahin. Hilfreich ist auch browsershots.org.

Darüber können Sie kostenlos einen Screenshot zu einer eingegebenen URL in einem bestimmten Browser erstellen lassen, ohne ihn installieren zu müssen.

So klappt's: HTML5 und IE8

Wieder einmal bereitet der Internet Explorer Webdesignern Kopfschmerzen. Bis zur Version 8 unterstützt der Microsoft-Browser HTML5 nur rudimentär. Erst in der finalen Version 9 soll der IE das neue HTML richtig interpretieren können. Zum Glück lässt sich der Internet Explorer 8 überlisten, so dass er HTML5-Seiten relativ gut darstellt.

Ein wenig JavaScript bringt ihm die fehlenden Tags bei. Das Skript "HTML5_IE8.js" finden Sie auf der Heft-DVD im ZIP-Archiv "HTML5- Grundlagen.zip". Kopieren Sie es in Ihren Website-Ordner und binden Sie es in jedem HTML5-Dokument so ein:

<!--[if lte IE 8]><script src="HTML5_IE8.js"
type="text/javascript"></script><![endif]-->

Wichtig: Lassen Sie die Tags <body>, </body>, <head> und </head> nicht weg, auch wenn das in HTML5 erlaubt ist. Der Internet Explorer 8 kann damit nicht umgehen.

Mehr zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
Film Amazon Prime Instant Video Warner Bros Emily Browning
Vorschau auf Film- und Serien-Highlights

Prime Instant Video lockt im Oktober mit Highlights wie "Sucker Punch", "Fifty Shades of Grey", "Spotlight" und der zweiten Staffel von "Ash vs. Evil…