Welchen Doctype muss ich in Zukunft verwenden?
Der Doctype hat sich stark vereinfacht und lässt sich gut merken:
<!doctype html>
Bei XHTML-5-Dokumenten wird kein Doctype benötigt, da diese automatisch im Standardmodus dargestellt werden.
Welche neuen Tags und Features gibt es?
neue HTML5-Tags:
Zur Strukturierung eines HTML5-Dokumentes in größere Abschnitte gibt es einige neue Tags:
<section>
- Bereiche einer Webseite werden hiermit zusammengefasst, jede section
kann eine eigene h1-Überschrift bekomme; dient zur Strukturierung des
kompletten Dokuments
<hgroup> - für den Kopfbereich einer section
<nav> - für Navigationsbereiche
<header> - z.B. für den Kopfbereich einer Webseite mit Slogan und Logo
<footer>
- für Fußbereiche im Dokument, nimmt z.B. AGB, Kontakt, Impressum etc.
auf, auch für Schlußbemerkungen von einzelnen Artikeln oder
Blogbeiträgen
<article> - einzelne Blogeinträge stehen in diesem Bereich
<aside> - Bereiche mit Randspalten, die nur wenig mit dem eigentlichen Inhalt einer Seite zu tun haben
weitere Tags:
<time> - Kennzeichnung eines Eintrags mit Zeit/Datumsbezug, um Elemente einem Kalender hinzuzufügen
<canvas> - für Zeichenflächen
<video> - für Video nativ im Browser (ohne Plugin)
<audio> - für Audioinhalte nativ im Browser (ohne Plugin)
<svg> - zum Zeichnen von mathematisch definierten Objekten im Browser (Scalable Vector Graphics)
<dialog> - für Konversationen und Dialoge
<figure> - dient zum Zusammenfassen von z.B. eingebetten Inhalt wie ein Video und einer Unterschrift
<embed> - für Inhalte, die mit einem Plugin dargestellt werden
<mark> - für markierte Textpassagen
<progress> - zur Anzeige für Inhalte, die geladen werden, z.B. in Form eines Ladebalkens
<meter> - zur Anzeige von Kapazitäten und Messungen
<ruby>, <rt>, <rp> für kurze Texte an einer Textbasis, z.B. für Betonungen in einer anderen Sprache
<command> - für Befehle, die der Benutzer ausführen kann
<details> - für zusätzliche Informationen
<datalist> - innerhalb Formularen, als Satz von zusammengehörigen option-Elementen
<keygen> - zur Erzeugung von Schlüssel-Werte-Paaren
<output> - Ergebnis / Ausgabe z.B. nach einer Berechnung
neue Attribute von input:
tel, search, url, email, datetime, date, month, week, time, datetime-local, number, range, color
sonstige Attribute in HTML5:
Es
gibt für andere Tags sehr viele neue Attribute. Dies würde allerdings
den Rahmen dieser FAQ hier sprengen. Ich verweise daher auf die sehr
ausführlich beschriebenen Hinweise zu den Unterschieden von HTML 4 nach HTML5 des W3C
Gibt es neue CSS-Selektoren in HTML5?
HTML5
dient zur Strukturierung eines Webdokumentes, während CSS zur
Darstellung genutzt wird. CSS hat daher nichts mit HTML5 zu tun, daher
gibt es auch keine neuen (oder alten) CSS-Selektoren. Browser
interpretieren HTML und CSS und stellen so die Webseiten dar.
Sind leere Tags erlaubt?
Auch
in HTML5-Dokumenten ist es erlaubt leere Elemente zu benutzen, z.B.
<br>. Auch die <br />-Schreibweise gilt in HTML5 als gültig
(dies war vorher nur in XHTML gültig und üblich).
Welche Tags sind veraltet?
Als Faustregel: alle Tags mit darstellenden Funktionen. Die Inhalte sollten in Zukunft nur noch durch CSS formatiert werden:
basefont, big, center, font, s, strike, tt, u
Hinzu kommen alle Elemente, die die Usability beeinträchtigen können:
frame, frameset, noframes
Es gibt noch weitere Tags, die veraltet sind, da diese nur selten Verwendung fanden oder zu Verwirrung geführt hatten:
acronym, applet, dir, isindex
Wie wird Video in mein HTML Dokument eingebunden?
Seit HTML5 ist Video ohne Plugin möglich. Der Quellcode zum Einbinden von nativen Video sieht zum Beispiel so aus:
<video src="film.ogg" width="1920" height="1080">Ihr Browser unterstützt keine
Videos</video>
HTML5 Video Alternativ-Formate: Unterschiedliche Browser unterstützen im Moment nativ auch nur unterschiedliche Formate:
- Firefox 3.5 / Chrome 3: Ogg (theora-Video/Vorbis-Audio)
- Safari / Chrome 3: MP4 (H.264-Video/AAC-Audio)
<video>
<!--Safari/Chrome-->
<source src='video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<!--Firefox/Chrome-->
<source src='video.ogv' type='video/ogg; codecs="theora, vorbis"'>
Ihr Browser unterstützt keine Video
</video>
Was sind Canvas-Zeichenflächen?
Das
canvas-Element ist neu in HTML5. Es gibt eine rechteckige Zeichenfläche
für Bitmap-Grafiken vor. Als Zeichentechnik wird Javascript genutzt.
Ohne Plugins lassen sich so in einem Browser direkt komplexe Grafiken
erzeugen.Z.B. wie bei einem Browser-Videospiel.
<canvas width="400" height="200" id="browercanvas">
</canvas>
Ab wann gilt HTML5?
HTML5 ist im Moment als Draft verabschiedet. Der aktuelle Stand
lässt sich bei der WHATWG (Web Hypertext Application Technology Working
Group) nachlesen. Das W3C arbeite seit 2007 mit der WHATWG zusammen und
hat eine eigene HTML5-Arbeitsgruppe.
HTML5 soll bis 2022 als Standard komplett verabschiedet werden.
Soll man HTML5 bereits jetzt einsetzen?
Viele Browser unterstützen bereits jetzt schon den HTML5 Standard. Es spricht nichts dagegen, schon heute HTML5 einzusetzen.
Wie schreibt man den neuen Standard?
HTML5 (zusammen, ohne Leerzeichen)
Wie sieht das Grundgerüst für ein HTML5-Dokument aus?
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Dokumenten Titel</title>
</head>
<body>
<p>Der erste Absatz im HTML5 Dokument</p>
</body>
</html>
Gibt es auch XHTML-Dokumente als XHTML5?
Es gibt eine XML-Syntax für HTML5 Dokumente:
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
Dokumenten Titel
</title>
</head>
<body>
<p>
Der erste Absatz im HTML5 Dokument in XML-Syntax
</p>
</body>
</html>
Welche Browser unterstützen HTML5?
Viele Tags und andere Elemente von HTML5 werden bereits heute von einigen Browsern unterstützt.
Grundlegende Funktionen von HTML5 wurden bereits implementiert bei:
- Firefox ab Version 3.5
- Chrome ab Version 3
- Safari ab Version 4
- Opera ab Version 9.2
Hier gibt es eine Übersicht, welche Browserengines HTML5 bereits implementiert haben.
Wie nutze ich HTML5 im Internet Explorer?
Der
Internet Explorer läßt sich mit Hilfe eines JavaScript’s dazu bewegen,
HTML5 Elemente zu erkennen und im DOM entsprechend zu rendern.
| document.createElement("header"); document.createElement("nav"); document.createElement("section"); document.createElement("aside"); document.createElement("footer"); |
Um
eine weitere Reihe an HTML5-Elementeim Internet Explorer zu
unterstützen, gibt es auch bereits einige Javascript-Bibliotheen, die
Sie fix und fertig einbauen können. Da diese nur für den Internet
Explorer gelten,sollten diese in Conditional Comments stehen:
Bibliothek RemySharp:
<!--[if IE]>
<script src="html5.js" type="text/javascript"></script>
<![endif]-->
Wie kann ich mein HTML5-Dokument auf Gültigkeit prüfen lassen?
Hierzu gibt es verschiedene Validatoren:
HTML5-Validator / .nu
Validator des W3C
Bookmarks:
Delicious Facebook Google Yahoo Mr. Wong Linkarena Digg