HTML5 Codestruktur (Semantic)
HTML5 Simple Tags
Doctype
Zu den wohl sinnvollsten Änderungen von HTML4 auf HTML5 zählt wohl der neue Doctype. Keine Ahnung wie es euch ging, aber ich konnte mir den HTML4/XHTML-Doctype nie wirklich merken:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">Jetzt sieht dieser so aus:
<!DOCTYPE html>Charset
Auch das Charset-Attribut im META-Tag wurde deutlich vereinfacht:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />So einfach wie der neue Doctype:
<meta charset="utf-8">Externe Stylesheets und Scripts
So band man in HTML4 externe Stylesheets und Scripte ein:
<script src="foobar.js" type="text/javascript"></script>
<link href="foobar.css" rel="stylesheet" type="text/css" />Das "type"-Attribut wird ab sofort nicht mehr benötigt:
<script src="foobar.js"></script>
<link href="foobar.css" rel="stylesheet" />HTML5 Codecleaning
Durch diese ersten Erneuerungen sieht ein einfaches HTML-Dokument wie folgt aus:
<!DOCTYPE HTML>
<html>
<head>
<title>Foobar Titel</title>
<meta charset="utf-8">
<link href="foobar.css" rel="stylesheet" />
<script src="foobar.js"></script>
</head>
<body>
<div id="header">HEADER</div>
<div id="navigation">NAVIGATION</div>
<div id="content">
<div class="paragraph">INHALT 1</div>
<div class="paragraph">INHALT 2</div>
</div>
<div id="sidebar">SIDEBAR</div>
<div id="footer">FOOTER</div>
</body>
</html>In HTML5 ist es auch erlaubt, nicht benötigte Tags wie z.B.: <html>, <head>, <body> einfach weg zu lassen. Das obige Beispiel würde so aussehen:
<!DOCTYPE HTML>
<title>Foobar Titel</title>
<meta charset="utf-8">
<link href="foobar.css" rel="stylesheet" />
<script src="foobar.js"></script>
<div id="header">HEADER</div>
<div id="navigation">NAVIGATION</div>
<div id="content">
<div class="paragraph">INHALT 1</div>
<div class="paragraph">INHALT 2</div>
</div>
<div id="sidebar">SIDEBAR</div>
<div id="footer">FOOTER</div>Außerdem braucht man keine Anführungszeichen bei Werten von Attributen, die nur einen Wort haben. Das würde diesen Code ergeben:
<!DOCTYPE HTML>
<title>Foobar Titel</title>
<meta charset=utf-8>
<link href=foobar.css rel=stylesheet />
<script src=foobar.js></script>
<div id=header>HEADER</div>
<div id=navigation>NAVIGATION</div>
<div id=content>
<div class=paragraph>INHALT 1</div>
<div class=paragraph>INHALT 2</div>
</div>
<div id=sidebar>SIDEBAR</div>
<div id=footer>FOOTER</div>Hier taucht aber schon das nächste, aus HTML4 sehr bekannte, Problem auf: Der Code wird zu einer reinen DIV-Suppe. Doch auch hierfür hat man in HTML5 eine Lösung gefunden:
HTML5 Semantic Elements
Diese Semantic-Elements sollten die meisten und am öftest-verwendetsten <div>-Elemente ersetzen. Hier ein paar Beispiele:
- article
- aside
- figure
- figcaption
- header
- hgroup
- footer
- nav
- section
- time
- u.v.m.
Wir nehmen wieder unser Codebeispiel von oben unter Verwendung von HTML5 Semantic Elements:
<!DOCTYPE HTML>
<title>Foobar Titel</title>
<meta charset=utf-8>
<link href=foobar.css rel=stylesheet />
<script src=foobar.js></script>
<header>HEADER</header>
<nav>NAVIGATION</nav>
<section>
<article>INHALT 1</article>
<article>INHALT 2</article>
</section>
<aside>SIDEBAR</aside>
<footer>FOOTER</footer>Um die anderen Semantics zu verwenden, sehen wir uns hier nicht mehr das ganze Dokument an, sondern nur noch einen einzelnen <article>:
<article>
<header>
<hgroup>
<h1>Überschrift</h1>
<h2>Unterüberschrift</h2>
</hgroup>
Am <time datetime=2012-01-01>01.01.2012</time>
</header>
<section>
<p>Inhalt</p>
<figure>
<img src=foobar.img alt=Foobar />
<figcaption>Bildunterschrift</figcaption>
</figure>
</section>
<footer>
<p>Geschrieben von Christoph Eder</p>
</footer>
</article>Auch hier verwende ich wieder den <header>-Tag um den "Kopf" des Artikels zu definieren. Darin befindet sich eine <hgroup>, was nichts anderes ist, als ein Element in welchem sich mehrere Überschriften befinden. Darunter verwende ich das <time>-Element, zu dem das Publizierungsdatum des Artikels geschrieben wird. Der Inhalt des Artikels befindet sich wiederum in einer <section>. Das "neue" <figure>-Element ist vielleicht einigen schon aus HTML3-Zeiten bekannt. Es wurde nun in HTML5 wieder ins Leben gerufen und wird dazu verwendet Bilder mit Bildunterschriften (<figcaption>) zu umschließen. Abschließend wird der Autor noch in den Artikel-<footer> geschrieben.
HTML5 Semantic Elements Browserkompatibilität
Diese neuen HTML5 Semantic Elements werden von allen aktuellen Browsern unterstützt, doch damit auch ältere Browser (<IE9) mit den neuen Elementen was anfangen können, müssen wir diese per JavaScript erstellen. Dazu empfehle ich das "HTML5SHIV"-Snippet einzubinden:
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>Außerdem müssen die Elemente noch per CSS auf "block" gesetzt werden:
header, section, footer, aside, nav, article, figure, figcaption, time {
display: block;
}Das waren auch schon die wichtigsten Punkte, um mit HTML5 anfangen zu können.
Viel Spaß mit HTML5 ;)
Chris