Version 5 — Avril 2010 — tetue
HTML5 est la prochaine version du standard HTML. Bien qu’encore officiellement en cours d’élaboration, il est déjà possible d’écrire ses squelettes avec les nouvelles balises et attributs HTML5, tout en produisant des pages valides. Il suffit de déclarer le bon DOCTYPE : <!DOCTYPE html> (fastoche, on peut même l’écrire de mémoire).
Un résumé des changements au niveau du balisage peut être vu sur cette page.
Cette page tente de jeter un coup d’œil aux évolutions apportées par HTML5, et surtout ce qu’elles signifient pour un CMS comme SPIP.
Si vous avez déjà développé des adaptations à SPIP prenant en compte des éléments cités, n’hésitez pas à les mentionner !
Cette page n’est pas vraiment une présentation exhaustive de HTML5. C’est peut-être une bonne idée de mentionner ici uniquement les changements qui peuvent avoir un intérêt pour SPIP.
Bien entendu, tout n’est pas intégrable dès maintenant « à la brute ». Le jeu serait donc d’arriver à fournir des nouveaux outils HTML5 dans SPIP, sans toutefois les imposer. On peut peut-être réfléchir sur diverses techniques ici.
L’aspect le plus connu de HTML5 est l’introduction des balises <video> et <audio>.
- On peut donc d’ores et déjà penser à des modèles pour les intégrer dans les squelettes.
- Quoi d’autre ?
un exemple basique ici sur cette page.
Lire ces deux articles de référence : Éléments HTML 5 de structure et HTML5 et l’avenir du web
-
<section></code < code><section></code > décrit une section ou une sous-section {logique} d'une page, disposant typiquement d'un titre. Une bonne question pour savoir si c'est ce qu'on veut, c'est de se demander si ça doit apparaître dans le sommaire de la page. Si oui, alors c'est probablement une section, sinon probablement pas.
- <code><article>décrit une entité qui peut se considérer de manière autonome, typiquement un article, un commentaire, etc. Article ou section ? Si ça peut se syndiquer à part, alors plutôt article.
- <aside> décrit un contenu connexe, un apparté, un corollaire à l’article principal. Dans un article de journal, ça correspondrait à un encadré qui détaille ou élargit un sujet mentionné dans l’article.
- <nav> décrit une zone permettant de naviguer vers d’autres parties du site. Souvent, ça va être un menu contenant principalement des liens. Il peut bien sûr y en avoir plusieurs dans une même page.
- <header> décrit la zone de la page ou de l’<article> qui contient les informations d’en-tête</del > non , car ce n’est pas nécessairement en tête : < code>
<section> par exemple). La présence ou l’absence de ces balises de début/fin n’ont pas d’incidence sur la table des matières.
<footer> est similaire à <header>, mais définit des informations de < del>pied-de-page pied-de-page (ou d’article)</del > non , car il n’est pas nécessairement en pied ! d’article ). cf. : [->http://css4design.com/html5-pourquoi-header-et-footer-ne-creent-pas-de-sections#comment-4566]. Par exemple < ins>nom de l’auteur , copyright,</ins > un lien vers les commentaires, ou des informations complémentaires.
<hgroup> définit un groupe de headers (en-têtes).
<figure> (et <figcaption>) : bout de code, schéma, photo... qui enrichissent le texte en l’illustrant. Ça pourrait avoir du sens dans les modèles d’images pour les auteurs, ainsi que dans les balises <code>.
On remarque au passage que nombre de ces balises trouvent leur équivalent dans le formalisme défini par ZPIP. Bonne nouvelle, les deux sont totalement compatibles car ZPIP définit simplement des noms de classes. Tout ça combiné, voilà de quoi rendre le code de ses squelettes vraiment très « joli ». :)
Pas vraiment d’ajout, mais certaines définitions ont été précisées ou légèrement modifiées pour prendre en compte l’usage actuel tout en le formalisant.
- <hr> : Changement thématique. Comme un paragraphe, mais en plus fort. Avant, c’était une ligne horizontale, donc visuelle, donc pas cool dans le HTML ; maintenant cette balise « reprend tout son sens ». Welcome back !
- <b> : texte mis en balance du reste du texte, typiquement en gras mais pas nécessairement, mais sans importance au niveau sémantique. Par exemple, un mot-clé ou un nom de produit.
- <i> : texte sur un ton alterné avec le reste du texte, typiquement en italique mais pas nécessairement. Par exemple, un terme technique ou étranger, un nom de bateau...
- <em> : insistance, emphase < ins>depuis HTML4 ! .
</ins >
- <strong> : importance forte < ins>depuis HTML4 ! .
</ins >
- <mark>. Ça peut être intéressant pour les résultats de recherche par exemple.
- <time> permet de définir une date de façon formelle. Ça peut être intéressant dans le plugin Agenda 2.. Voir aussi l’attribut pubdate qui correspond à la date de publication dans SPIP.
Application possible : la barre typographique.
HTML5 précise la sémantique des zones d’entrées (input) en définissant de nouveaux types. Bien que la plupart des navigateurs actuels ne fassent pas encore de traitement différencié pour ces types, ils ne les interdisent pas non plus. Mieux encore, certaines personnes ont déjà écrit des petites fonctions javascript qui simulent les fonctionnalités en question sur les navigateurs qui ne les ont pas encore implémentées.
- search : recherche
- tel : téléphone
- url : une URL, qu’elle soit de type HTTP, XMPP, FTP, IRC, etc.
- email : une adresse mail
- date, time, month, week, local-date, local-time. Date, heure, mois, semaine, date locale, heure locale.
- number : nombre entier
- range : plage ?
- color : couleur
Par ailleurs, certains attributs permettent de préciser le comportement des champs de formulaire :
- autocomplete
- list
- required. Intéressant pour CVT.
- multiple
- pattern. Intéressant pour CVT, similaire à la fonction Vérifier.
- min et max
- step
- placeholder : texte par défaut. Sympa pour les zones de recherche, pour CVT aussi.
On imagine avec grand plaisir comment le plugin « Saisies » pourra tirer parti de ces nouveaux types et attributs. Le plugin Crayons également.
Nouveaux éléments :
- <datalist>
- <keygen>
- <output> : la sortie d’un calcul dynamique (javascript typiquement, ou via les raccourcis AJAX de SPIP)
- <progress> : définit la progression d’une opération
- <meter> : montre une mesure ou une note. Application possible : plugin Notation.
<link>Ces nouveaux types pour les éléments <link> sont éventuellement intéressants dans SPIP.
- bookmark
- help
- search : utilisé dans le plugin OpenSearch (à vérifier)
- tag : typiquement, pour renvoyer vers la page motXX
- pingback : On demande au navigateur (il est pas obligé) d’informer une certaine URL s’il suit le lien. Application possible : un nouveau plugin qui prend en compte les pingbacks dans les stats ?
À faire, j’ai vu que des choses ont été formalisées et enrichies, mais moi j’y connais rien. :p