HTML 5

HTML 5 bringt neue Möglichkeiten und Chancen. In den folgenden Kapiteln soll ein Überblick über HTML 5 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 HTML 5 genutzt werden, nachdem bereits verschiedene große Seiten jetzt HTML 5 einsetzen (sehen Sie mal in den Quellcode von google.de).

neue strukturierende Elemente in HTML 5

In HTML 5 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 HTML 5 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 HTML 5

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

Bauen wir nun diese Website nach.

HTML 5 und der DOCTYPE

Mit HTML 5 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 HTML 5 ist herzhaft einfach:

<!doctype html>

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

<html>

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

<head>
<title>Website in HTML 5 als direktes Beispiel</title>
<meta charset="iso-8859-1">
</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>
<head>
<title>Website in HTML 5 als direktes Beispiel</title>
<meta charset="iso-8859-1">
</head>
<body>
Säulenbauten des 20. Jahrhunderts
Startseite | Über uns | ... | Impressum
Willkommen zur HTML 5 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 Bereich beim Entwickeln am besten Rahmen ziehen, damit sofort erkennbar ist, wo welcher Bereiche 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 HTML 5 weiterhin gelten) ausgezeichnet.

<!doctype html>
<html>
<head>
<title>Website in HTML 5 als direktes Beispiel</title>
<meta charset="UTF-8">
</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 HTML 5 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 Bereich beim Entwickeln am besten Rahmen ziehen, damit sofort erkennbar ist, wo welcher Bereiche sitzt :)</p>
<p>zurück zum <a href="http://www.html-seminar.de/">HTML-Seminar</a></p>
<p>&copy; <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

Lassen wir unseren bisherigen HTML 5 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>
<head>
<title>Website in HTML 5 als direktes Beispiel</title>
<meta charset="UTF-8">
</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 HTML 5 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 Bereiche sitzt :)</p>
  <p>zurück zum <a href="http://www.html-seminar.de/">HTML-Seminar</a></p>
</div>
<div id="fuss">
  <p>&copy; <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" type="text/css" media="screen" />

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.

XHTML mit Design über CSS

Das war bisher die althergebrachte Art.

Nun wollen wir das Beispiel anhand von neuen HTML 5 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>
<head>
<title>Website in HTML 5 als direktes Beispiel</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<meta charset="UTF-8">
</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 HTML 5 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 Bereiche sitzt :)</p>
  <p>zurück zum <a href="http://www.html-seminar.de/">HTML-Seminar</a></p>
</section>
<footer>
  <p>&copy; <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 HTML 5 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 HTML 5.

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 HTML 5 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 HTML 5 verstehen:

noch kein Design für IE 8 und HTML 5

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 <head>-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 HTML 5 :)

und nun auch im IE Design mit HTML 5