HTML5

HTML5 bringt neue Möglichkeiten und Chancen. In den folgenden Kapiteln soll ein Überblick über HTML5 und seine Möglichkeiten gegeben werden und was bereits jetzt schon eingesetzt werden kann – mit dem Hinweis, welche alten Browserversionen dann auf der Strecke bleiben. Wie immer im Leben muss man sich entscheiden, ob man vorwärts denkt oder eher auf solide ausgetesteten Verfahren beharrt und dann womöglich einiges verschläft. Nach meiner Meinung kann jetzt HTML5 genutzt werden, nachdem bereits verschiedene große Seiten jetzt HTML5 einsetzen (sehen Sie mal in den Quellcode von google.de).

neue strukturierende Elemente in HTML5

In HTML5 gibt es neue HTML-Befehle, um Bereiche einzuteilen. Was bisher immer mit <div> und einem Attribut gemacht wurde, kann nun direkt mit einem logischen HTML-TAG ausgezeichnet werden. Es gibt neue strukturierende Elemente – im Folgenden zur Übersicht alphabetisch aufgelistet:

  • <article>
  • <aside>
  • <dialog>
  • <figure>
  • <footer>
  • <header>
  • <nav>
  • <section>

Dabei sind die grundlegenden folgenden vier neuen HTML5 TAGs, die wir uns anhand eines Beispiels ansehen:

  • <header> (nicht verwechseln mit <head>!)
  • <nav>
  • <section>
  • <footer>

Das Beispiel sind die Säulenbauten, die bereits in der bisherigen Technik Schritt-für-Schritt in diesem Kurs umgesetzt wurden unter http://www.html-seminar.de/pro_css_neu.htm

Wir erweitern hier das Beispiel um einen Fußbereich:

fertiges Beispiel mit 4 Bereichen zum Nachbau mit HTML5
fertiges Beispiel mit 4 Bereichen zum Nachbau mit HTML5

In dieser Beispielwebsite können wir sehr schön den Vergleich sehen zwischen der Bauart vor HTML5 und mit „HTML5“.

Bauen wir nun diese Website nach.

HTML5 und der DOCTYPE

Mit HTML5 wird der DOCTYPE nun auch einfach (und vor allem merkbar). Der DOCTYPE sagt aus, nach welchem Standard die Website erstellt worden ist.

Der DOCTYPE in HTML5ist herzhaft einfach:

<!DOCTYPE html>

Danach folgt unser TAG, der das Ganze umschließt:

<html lang="de">

Für den <head>-Bereich ändert sich eigentlich nicht viel:

<head>
<meta charset="UTF-8">
<title>Website in HTML5 als direktes Beispiel</title>
</head>

Und nun kommt der altgewohnte TAG <body>, der den ganzen im Browserfenster sichtbaren Inhalt umschließt:

<body>

Bisher (bis auf den DOCTYPE) ist der Aufbau nicht unterschiedlich – nochmals komplett mit den Textinhalten:

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Website in HTML5 als direktes Beispiel</title>
</head>
<body>
Säulenbauten des 20. Jahrhunderts
Startseite | Über uns | ... | Impressum
Willkommen zur HTML5 Beispielwebsite
Diese Website gliedert sich in 4 Bereiche
Kopfzeile: Hintergrundbild-Download
Zeile Steuerung: Hintergrundfarbe ist #ceb98e
Übergang mit Schattenwurf: Download Schattenwurf
Inhaltsbereich
Um die verschiedenen Bereiche beim Entwickeln am besten Rahmen ziehen, 
damit sofort erkennbar ist, wo welcher Bereich sitzt :)
zurück zum HTML-Seminar
(c) www.HTML-Seminar.de
</body>
</html>

Und nun wird der Inhalt noch mit den entsprechenden HTML-TAGs <p>, <h1>, <a ...>, <ul>, <li> (die auch alle in HTML5 weiterhin gelten) ausgezeichnet.

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Website in HTML5 als direktes Beispiel</title>
</head>
<body>
<p>Säulenbauten des 20. Jahrhunderts</p>
<ul>
  <li><a href="#">Startseite</a></li>
  <li><a href="#">Über uns</a></li>
  <li><a href="#">...</a></li>
  <li><a href="#">Impressum</a></li>
</ul>
<h1>Willkommen zur HTML5 Beispielwebsite</h1>
<p>Diese Website gliedert sich in 4 Bereiche</p>
<ul>
  <li>Kopfzeile: Hintergrundbild-Download</li>
  <li>Zeile Steuerung: Hintergrundfarbe ist #ceb98e</li>
  <li>Übergang mit Schattenwurf: Download Schattenwurf</li>
  <li>Inhaltsbereich</li>
</ul>
<p>Um die verschiedenen Bereiche beim Entwickeln am besten Rahmen ziehen, 
damit sofort erkennbar ist, wo welcher Bereich sitzt :)</p>
<p>zurück zum <a href="http://www.html-seminar.de/">HTML-Seminar</a></p>
<p>© <a href="http://www.html-seminar.de/">www.HTML-Seminar.de</a></p>
</body>
</html>

Wenn wir es uns im Browser ansehen, dann wirft es einen noch nicht direkt um (designtechnisch), aber wir haben eine valide, sauber strukturierte HTML-Seite:

Ergebnis des bisherigen HTML-Codes

Ergebnis des bisherigen HTML-Codes

Lassen wir unseren bisherigen HTML5 Quellcode validieren von http://validator.w3.org/check, so erhalten wir die Bestätigung, dass bisher alles in Ordnung ist:

“This document was successfully checked as HTML5!”

Einteilung der Bereiche in althergebrachter Art

Bisher sind noch keine Bereiche eingeteilt. Wir haben hier 4 Bereiche:

  • Kopf
  • Steuerung
  • Inhalt
  • Fuß

Diese teilen wir (für den direkten Vergleich) nun im ersten Schritt auf die althergebrachte Art ein, also mit <div> und einem selber gewählten Namen für das Attribut id=

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Website in HTML5 als direktes Beispiel</title>
</head>
<body>
<div id="kopf">
  <p>Säulenbauten des 20. Jahrhunderts</p>
</div>
<div id="steuerung">
  <ul>
    <li><a href="#">Startseite</a></li>
    <li><a href="#">Über uns</a></li>
    <li><a href="#">...</a></li>
    <li><a href="#">Impressum</a></li>
  </ul>
<div>
<div id="inhalt">
  <h1>Willkommen zur HTML5 Beispielwebsite</h1>
  <p>Diese Website gliedert sich in 4 Bereiche</p>
  <ul>
    <li>Kopfzeile: Hintergrundbild-Download</li>
    <li>Zeile Steuerung: Hintergrundfarbe ist #ceb98e</li>
    <li>Übergang mit Schattenwurf: Download Schattenwurf</li>
    <li>Inhaltsbereich</li>
  </ul>
  <p>Um die verschiedenen Bereiche beim Entwickeln am besten Rahmen ziehen, 
  damit sofort erkennbar ist, wo welcher Bereich sitzt :)</p>
  <p>zurück zum <a href="http://www.html-seminar.de/">HTML-Seminar</a></p>
</div>
<div id="fuss">  
  <p>© <a href="http://www.html-seminar.de/">www.HTML-Seminar.de</a></p>
</div>
</body>
</html>

Noch ändert sich nichts in der Anzeige im Browser, da das Design über CSS fehlt. Im ersten Schritt wird im Kopfbereich (zwischen <head> und </head>) noch der Verweis auf die externe CSS-Datei gesetzt, die dann den Namen „style.css“ hat.

<link rel="stylesheet" href="style.css">

In der CSS-Datei geben wir unseren 4 Bereichen dann Hintergrundfarben mit:

/* CSS-Datei style.css */
#kopf { background-color: yellow; }
#steuerung { background-color: orange; }
#inhalt { background-color: yellowgreen; }
#fuss { background-color: deepskyblue; }

Und im Browser sieht man nun durch die farbliche Hinterlegung, wo welcher Bereich anfängt und aufhört.

HTML5: Bereiche anzeigen über CSS

HTML5: Bereiche anzeigen über CSS

Das war bisher die althergebrachte Art.

Nun wollen wir das Beispiel anhand von neuen HTML5 TAGs machen. Dazu werden die Bereiche nun mit den entsprechenden HTML-Befehlen <header>, <footer>, <nav> und <section> ausgezeichnet. Die „alten“ DIV-Bereiche werden „ausgeremt“.

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Website in HTML5 als direktes Beispiel</title>
</head>
<body>
<header>
  <p>Säulenbauten des 20. Jahrhunderts</p>
</header>
<nav>
  <ul>
    <li><a href="#">Startseite</a></li>
    <li><a href="#">Über uns</a></li>
    <li><a href="#">...</a></li>
    <li><a href="#">Impressum</a></li>
  </ul>
</nav>
<section>
  <h1>Willkommen zur HTML5 Beispielwebsite</h1>
  <p>Diese Website gliedert sich in 4 Bereiche</p>
  <ul>
    <li>Kopfzeile: Hintergrundbild-Download</li>
    <li>Zeile Steuerung: Hintergrundfarbe ist #ceb98e</li>
    <li>Übergang mit Schattenwurf: Download Schattenwurf</li>
    <li>Inhaltsbereich</li>
  </ul>
  <p>Um die verschiedenen Bereiche beim Entwickeln am besten Rahmen ziehen, 
  damit sofort erkennbar ist, wo welcher Bereich sitzt :)</p>
  <p>zurück zum <a href="http://www.html-seminar.de/">HTML-Seminar</a></p>
</section>
<footer>
  <p>© <a href="http://www.html-seminar.de/">www.HTML-Seminar.de</a></p>
</footer>
</body>
</html>

Unsere CSS-Datei muss auch angepasst werden, damit die Bereiche wieder farblich sichtbar werden.

header {
    background-color: yellow;
}
nav {
    background-color: orange;
}
section {
    background-color: yellowgreen;
}
footer {
    background-color: deepskyblue;
}

Das war bereits der erste Schritt – interessant ist nun primär, was machen die Browser daraus?

bisher kein Design mit HTML5 und Firefox 3.5 – da fehlt noch was
bisher kein Design mit HTML5 und Firefox 3.5 – da fehlt noch was

Hier wurde nun mit der Firefox Version 3.5.7 unter Windows getestet. Anscheinend versteht der Browser kein HTML5.

Sobald wir allerdings unsere CSS-Datei erweitern und dem Browser sagen, dass es sich um Blockelemente handelt, geht schon mehr:

header, nav, section, footer {
    display: block;
}
header {
    background-color: yellow;
}
nav {
    background-color: orange;
}
section {
    background-color: yellowgreen;
}
footer {
    background-color: deepskyblue;
}

Unsere Ausgabe sieht nun so aus:

Design mit HTML5 und Firefox 3.5 und display: block
Design mit HTML5 und Firefox 3.5 und display: block

Und nun zum Internetexplorer (getestet mit IE 8.0). Hier schaut unser Ergebnis, das im Firefox bereits gut aussah, wieder aus, als würde der IE 8 kein HTML5 verstehen:

noch kein Design für IE 8 und HTML5
noch kein Design für IE 8 und HTML5

Dem IE müssen wir über JavaScript mitteilen, dass wir „neue“ HTML-Elemente erzeugt haben, die er nun nutzen darf.

In der HTML-Datei im -Bereich wird folgender Code aufgenommen:

<script>
document.createElement("header");
document.createElement("nav");
document.createElement("section");
document.createElement("footer");
</script>

Wer sich wundert, dass man bei <script> keinerlei weiteren Definitionen wie früher benötigt – das sind die Vereinfachungen durch HTML5 :)

und nun auch im IE Design mit HTML5
und nun auch im IE Design mit HTML5

Was funktioniert zum Februar 2010 mit welchen Browserversionen?

Hier ein Test mit obigem Beispiel mit folgendem Ergebnis:

Welcher Browser kann schon HTML5?

Test des obigen Beispiels mit: https://browserlab.adobe.com

Firefox 3.0 (OS X), Firefox 3.5 (OS X), Firefox 2.0 (OS X)

Firefox 3.0 (Windows), Firefox 3.5 (Windows)

Chrome 3.0 (Windows)

Internet Explorer 6.0, IE 7.0, IE 8

Safari 3.0 (OS X), Safarie 4.0 (OS X)

Bis auf den alten Firefox 2.0 unter Mac OS X gab es keine Probleme.

http://browsershots.org/http://www.html-seminar.de/html-5-bereiche-beispiel-01.htm

Hier ist auch der Opera 8.0 / 10.0 / 9.8 in Ordnung