HTML 5

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

Les différences avec HTML4

Structuration du document en HTML5

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

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

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

Pour aller plus loin