Sommaire
Rappel
- La sémantique de HTML4
- L’addition des métadonnées et des microformats
- Les problématiques de compatibilité cross-plateforme
Genèse d’HTML5
- HTML 4 → 4.01
- XHTML 1.0 → 1.1
- Transitional ↔ Strict
- HTML → XML
- XHTML 2 ?
- WHATWG → W3C
- HTML5 !
Quelques démos sympas
- html5demos.com
- html5rocks par Google
- html5Gallery
- DiveIntoHTML5
Les différences avec HTML4
Structuration du document en HTML5
- Révision de la sémantique : balises et attributs dépréciés / ajoutés (extrait)
- structuration de la page :
<section><article><aside><header><footer><nav>. Enfin des div avec une couche sémantique ! - l’attribut
<role>: WAI-ARIA, les Landmarks roles (avec 1 exemple en couleur ! et quelques détails), - Encapsulation multimédia :
<figure><figcaption><audio><video><track><embed><canvas> - Taxonomie des données de formulaire :
<datetime><date><month><week><time><number><range><email><url><search>et<required> - Voir aussi les custom data attribute avec
data- - Nouvelles API :
<canvas>pour le dessin,<audio>et<video>,<websocket>pour le hors-ligne,<geolocation>pour la géolocalisation, édition en ligne du contenu,<drag and drop>. D’où la possibilité des ARIA ! - Nouvelle logique de contenu (≠ flux)
Logique de contenu du HTML5
Les spécifications
- W3C : http://www.w3.org/TR/html5/
- C’est une version transitional (donc permissive : pas besoin de fermer les balises). XHTML5 sera plus rigoureux (comme XHTML 1.0 Strict)
Dans le détail
Prologue et DocType
<!DOCTYPE html>Les API et les ARIA
- audio & video : lire sur NicoLargo
- geolocation : lire sur Alsacreations
- canvas
Avant d’aller plus loin
- HTML5 n’est pas présent dans tous les navigateurs, et tous les internautes ne disposent de navigateurs hyper récents : un petit aperçu des compatibilités entre navigateurs
