La version 5 d’HTML est arrivée avec son lot de nouveautés : API, nouveaux attributs et balises.

Ci-dessous une liste de quelques balises et attributs intéressants, des nouveaux types d’input, et un mot sur le cache manifest.

A noter que toutes ces nouveautés ne sont pas pris en compte au même rythme par les différents navigateurs, pour vérifier la compatibilité direction le site Can I Use (possibilité de vérifier également les propriétés CSS3).

Balises

Les nouvelles balises ajoutent une valeur sémantique au document HTML et peuvent être stylées de la même façon qu’un élément div ou ul.

• abbr : déjà existant, cette balise remplace l’élément désormais obsolète <acronym>
• article : contenu indépendant, ayant du sens individuellement
• aside : partie du site à part, n’ayant pas forcément de rapport avec le contenu général
• audio : permet de lancer une piste audio (affiche un lecteur propre au navigateur)
• canvas : utilisé pour afficher des formes graphiques
• datalist : contient une liste d’options prêt à être utilisée en la liant dans un input text par exemple (un peu comme de l’autocomplete)
• details : affiche/cache une section détails au clic
• figure : précise que l’image à l’intérieur de cette balise est de type illustration, photo, graphique
• figcaption : affiche une légende sous l’image qui est positionnée dans une balise figure
• footer : footer d’un document, d’une section, d’un article
• header : header d’une section, d’un groupe, il peut y avoir plusieurs headers dans la page HTML
• main : spécifie le contenu principale de la page, il ne faut avoir qu’une seule fois cette balise dans le document
• meter : un genre de jauge, possibilité de renseigner une valeur min/max et high/low (voir plus bas la section attribut)
• nav : bloc de navigation comportant plusieurs liens, peut être utilisé pour le menu du site par exemple
• progress : affiche une barre de chargement
• section : une section est un groupe d’éléments ayant un rapport entre eux, ça peut être des chapitres, des headers, plusieurs articles
• time : permet de stocker un temps ou une date, pour un article par exemple
• track : à placer dans un élément audio/video, affiche des sous-titres
• video : permet d’afficher une vidéo sans passer par un plugin Flash, voir comment utiliser cette balise

Attributs

• autofocus : à mettre sur un élément de formulaire, cet élément aura le focus au chargement de la page
• cite : à insérer dans la balise blockquote pour préciser la source de la citation
• download : force le téléchargement du fichier plutôt que de l’afficher dans la navigateur (pour un fichier PDF par exemple)
• form : cet attribut peut être indiquer dans un champ de formulaire n’étant pas présent au sein des balises form. On lui indique comme valeur l’ID du formulaire en question, et ce champ sera pris en compte dans les valeurs envoyées au serveur
• high/low : pour la balise meter, affichera la jauge différemment si la valeur est plus basse que low, ou plus haute que high (valeurs critiques en quelque sorte)
• list : à mettre sur un input, permet de définir la liste que proposera le champ (indiquer l’ID du datalist en valeur)
• manifest : à définir dans la balise HTML, cet attribut est détaillé dans la dernière partie
• min/max/step : utile dans les champs de formulaire de type range, number, meter
• multiple : possibilité de mettre cet attribut sur un input type file, l’utilisateur pourra alors sélectionner plusieurs fichiers à envoyer
• pattern : permet de définir précisément ce que l’ont attend d’un champ, exemple pour un code postal : <input type="text" name="codePostal" pattern="[0-9]{5}" required>, le formulaire ne pourra être validé que si le code postal est une suite de 5 chiffres
• poster : dans la balise video, permet d’afficher une image
• pubdate : à utiliser avec la balise time d’un article : indique que la date en question est la date de publication
• required : les éléments de formulaire comportant cet attribut devront être remplis pour que celui-ci puisse être validé
• reversed : dans une balise OL, cet attribut indique que l’ordre affiché doit être inversé

Éléments de formulaire

Certains type auront un effet visuel plus particulièrement sur les tablettes/téléphones, par exemple les input type email/tel permettront au device d’afficher un clavier plus pertinent qu’un simple input de type text.

• color : affiche un color-picker et stock la couleur en hexadécimal
• date/datetime/datetime-local : fonctionne plus ou moins comme un date-picker JS
• email : champ texte (le navigateur test la bonne validité de l’email entré par l’utilisateur)
• number : champ texte (une tablette ou un téléphone affichera un clavier numérique)
• url : champ texte (le navigateur test la bonne validité de l’url entré par l’utilisateur)
• range : affiche un slider, possibilité de le borner avec les attributs min et max, et de gérer les “crans” avec l’attribut step
• search : se comporte comme un champ de type text, sur Chrome une croix apparaît à droite du champ pour pouvoir vider facilement celui-ci
• tel : se comporte comme un champ de type text, les tablettes/téléphones afficheront un clavier numérique
• time : permet de sélectionner un temps au format hh:ss
• week : permet de sélectionner une semaine d’une année

Cache Manifest

Il permet de mettre en cache des pages entières, qui seront disponibles même sans que l’utilisateur ait accès à internet. Cela peut être très utile pour tout ce qui est application mobile. Ça améliore également la vitesse de navigation en étant connecté puisque les éléments en cache ne sont pas rechargés. La limite du cache est de 5Mo.

Voila comment définir le nom du fichier dans lequel sera stocké les informations du cache : <html manifest="mapage.manifest">

Créer ensuite un fichier mapage.manifest : fichier texte avec comme content-type : text/cache-manifest (type mime à ajouter au fichier .htaccess) AddType text/cache-manifest manifest  : signifie que tous les fichiers avec l’extension .manifest sont de type text/cache-manifest.

Exemple de fichier :

CACHE MANIFEST 

# version 2013-08-04
home.html
img/logo.png
css/main.css
js/main.js

# ressources nécessitant que l’utilisateur soit en ligne
NETWORK:
login.php
/api

Modifier la date modifie le fichier manifest et oblige le navigateur à remettre en cache les fichiers en question.

Voila pour la présentation de certaines nouveautés qu’apporte HTML5.