Pourquoi HTML5 est super

HTML5 est la dernière version de HTML. Elle n'est cependant pas finalisé et devrait l'être en 2014. Néanmoins, un certain nombre de ses propriétés ne vont certainement pas changé. On peut donc les utiliser maintenant. Je vous propose de vous en faire découvrir certaines qui pourrait vous faire passer à cette version.

Le doctype et le charset

Le doctype

<!DOCTYPE html> et c'est tout ! C'est au moins 3 fois plus court que l'équivalent XHTML 1.1 ou HTML 4.01, tout en étant facilement retenable.

Le charset

C'est la même chose que pour le doctype : plus court et plus facile à retenir. En effet, c'est ce qui suit pour UTF-8 : <meta charset="utf-8" />.

L'UTF-8

De plus, sachez qu'il est conseillé d'utiliser l'UTF-8 (sans BOM) que ce soit pour vos sites web ou programmes. En effet, il permet d'afficher bien plus de caractères que l'ACSII ou l'ISO-8859-1.

La sémantique

Beaucoup de balises améliorant la sémantique ont été ajoutées : section, article, nav, header, footer, aside, meter, time, progress… Pour ceux et celles l'ayant oubliés, la sémantique est très importante pour avoir une bonne structure de page pour : ceux et celles qui éditeront vos pages, les robots des moteurs de recherche et les non-voyants.

La balise audio

Il est enfin possible de faire un lecteur audio uniquement en HTML (sans module complémentaire). Tout cela est possible grâce à la balise audio.

Exemples

Malheureusement, il n'y a aucun format audio que tous les navigateurs web gèrent. Pour maximiser la compatibilité, il faut donc indiquer plusieurs formats pour la même musique, de préférence des formats ouverts.

La balise video

Il est enfin possible de faire un player video uniquement en HTML (sans module complémentaire). Tout cela est possible grâce à la balise video.

Exemples

Malheureusement, il n'y a aucun format vidéo que tous les navigateurs web gèrent. Pour maximiser la compatibilité, il faut donc indiquer plusieurs formats pour la même vidéo, de préférence des formats ouverts (comme Ogg + Theora + Vorbis, mais il faut éviter le codec H264 généralement mis dans les .mp4).

La balise canvas

<canvas></canvas> est une balise vous permettant d'effectuer des rendus dynamiques via des scripts procéduraux. Elle permet notament de faire des jeux vidéos 2D et également 3D. Cela était déja possible au moins pour la 2D, grâce au SVG.

Exemples

Des formulaires avec moins de JavaScript

L'attribut required

required="required" permet d'indiquer qu'un champ est obligatoire pour l'envoi du formulaire. En CSS3, on peut personnaliser les éléments avec required grâce à la pseudo-classe :required.

L'attribut pattern

Les champs required peuvent avoir un motif à respecter. Certains types de champs ont un motif déjà défini, comme le type email et number. Un motif peut être créé sur-mesure, grâce à l'attribut pattern et avec une expression régulière comme valeur.

Les pseudo-classes :valid et :invalid

Ces 2 pseudo-classes permettent repectivement de personnaliser les champs valides et non valides.

L'attribut placeholder

Cet attribut permet d'indiquer un texte indicatif dans un champ de formulaire. Bien entendu, ce texte s'efface quand l'utilisateur ou l'utilisatrice sélectionne le champ. Il s'utilise comme cela : <input type="text" placeholder="Entrez du texte" />..

L'interêt de respecter la norme XML

Le XHTML devait remplacer le HTML. En respectant les normes XML en HTML, on a un code plus clair, donc plus facile modifiable (que ce soit à la main ou via un script). Mais la version 1.x a été un échec : beaucoup des webmasters ne l'utilisaient pas. Les travaux sur XHTML 2 ont donc été abandonnés. Cependant, il est recommandé (pour les raisons en gras citées plus haut) de respecter les normes XML dans un code HTML (peu importe la version). Le code HTML respectant la norme XML est valide, il n'y a donc aucune raison de ne pas le faire, hormis la paresse bien sur.