Pourquoi HTML5 est super
HTML5 est la dernière version de HTML. Elle n'est cependant pas finalisé (au moment de l'écriture de cet article) 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
-
La balise audio réduite à sa plus courte expression
<audio src="a-las-barricadas.vorbis.oga"></audio>
-
La balise audio avec les controles
<audio src="a-las-barricadas.vorbis.oga" controls="controls"></audio> <!-- Les formats ouverts, c'est le bien. -->
-
La balise audio avec différents fichiers audio
<audio controls="controls"> <source src="a-las-barricadas.vorbis.oga" type="audio/ogg; codecs=vorbis" /> <!-- On peut préciser le codec pour un format conteneur --> <source src="a-las-barricadas.opus.oga" type="audio/ogg; codecs=opus" /> <!-- Un autre format ouvert --> Votre navigateur web ne gère pas la balise audio de HTML5 ou ni le codec Vorbis ni le codec Opus dans de l'Ogg. </audio>
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
-
La balise video réduite à sa plus courte expression
<video src="http://data.iletaitunefoisinternet.fr/enjeux_bayart/720p/IEUFI_enjeux_bayart-720p.webm"></video>
-
La balise video avec les controles
<video src="http://data.iletaitunefoisinternet.fr/enjeux_bayart/720p/IEUFI_enjeux_bayart-720p.webm" controls="controls"></video>
-
La balise video avec différents fichiers vidéo
<video controls="controls"> <source src="https://mediakit.laquadrature.net/formats_srt/19/2_big.webm" /> <source src="https://mediakit.laquadrature.net/formats_srt/18/2_big.ogg" /> <!-- ACTA n'est plus d'actualité, mais les problèmes sous-jacents le sont encore, la version 2 est TAFTA+CETA. (2017) --> </video>
-
La balise video avec encore quelques options en plus
<video controls="controls" height="500" poster="https://sersnow.files.wordpress.com/2012/03/acta.jpg"> <source src="https://mediakit.laquadrature.net/formats_srt/19/2_big.webm" type="video/webm" /> <source src="https://mediakit.laquadrature.net/formats_srt/18/2_big.ogg" type="video/ogg" /> Votre navigateur web ne gère pas la balise video de HTML5 ou ni l'Ogg, ni le WebM. </video>
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'intérê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.