Pourquoi HTML5 est super

Logo de HTML5 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

<meta charset="utf-8" />
C'est la même chose que pour le doctype : plus court et plus facile à retenir.

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 player audio uniquement en HTML (sans plugin). Tout cela est possible grâce à la balise audio.

Exemples

Malheureusement, il n'y a aucun format audio que tous les navigateurs supportent. 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 plugin). Tout cela est possible grâce à la balise video.

Exemples

Malheureusement, il n'y a aucun format vidéo que tous les navigateurs supportent. 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 pattern à respecter. Certains types de champs ont un pattern déja défini, comme le type email et number.
Un pattern peut être créés sur-mesure, grâce à l'attribut pattern via une expression régulière.

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 qaund l'utilisateur 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.