SPIP

[ar] [ast] [bg] [br] [ca] [co] [cpf] [cs] [da] [de] [en] [eo] [es] [eu] [fa] [fon] [fr] [gl] [id] [it] [ja] [lb] [nl] [oc] [pl] [pt] [ro] [ru] [sk] [sv] [tr] [vi] [zh] Espace de traduction

Télécharger

#HTML5

Mai 2012 — mis à jour le : Mai 2013

Permet de tester si le site est en HTML5.


Il arrive souvent que SPIP, ainsi que les plugins, génèrent des bouts de code HTML sur le site public. Avec l’arrivée du HTML5, on a désormais la possibilité de produire du HTML plus sémantique, que ce soit par les nouvelles balises, les nouveaux éléments de formulaire, etc.

Cependant, sil l’on souhaite continuer à avoir un site valide au sens du W3C (organisme de standardisation du langage HTML entre autres), il est nécessaire que l’utilisation de code HTML5 soit accompagnée de la déclaration du doctype suivant :

  1. <!DOCTYPE html>

Cela signifie donc que SPIP et les plugins ne peuvent pas utiliser aveuglément des éléments de HTML5 : il leur faut une indication de la part de la (ou du) webmestre pour savoir quel est le niveau de compatibilité HTML souhaité. Cela est possible depuis SPIP 3.0 par l’apparition d’une nouvelle option de configuration.

PNG - 56.1 ko
Configuration HTML5
Zone de configuration dans SPIP pour autoriser ou non l’utilisation de HTML5.

La balise #HTML5 permet de tenir compte de ce choix :

  • Si le HTML5 est autorisé, la balise renvoie un résultat non-vide (espace)
  • Si la configuration reste sur HTML4 (valeur par défaut), la balise renvoie un résultat vide. Sur les versions de SPIP inférieures à SPIP 3.0, la balise est inconnue, et renverra donc également un résultat vide. Il est donc possible de l’utiliser n’importe où, quelle que soit la version de SPIP visée : les sites sous SPIP avant 2.2 seront juste considérés comme étant en HTML4.

Exemples d’utilisation

Par exemple, un plugin ou un squelette qui génère une zone de recherche dans un formulaire pourra utiliser la balise de la manière suivante :

  1. <input type="[(#HTML5|?{search,text})] ... />

Ce code génèrera, si le HTML5 est activé dans la configuration :

  1. <input type="search" ... />

et dans le cas contraire :

  1. <input type="text" ... />

Autre exemple : définition d’une zone de saisie de formulaire comme obligatoire :

  1. <input type="text" [(#HTML5)required="required"] ... />

Le résultat sera donc l’un ou l’autre de ceux-ci suivant la configuration :

  1. <input type="text" required="required" ... />
  1. <input type="text" ... />

Support par les navigateurs

Bien sûr, comme toujours en développement web, n’oubliez pas de vérifier quel est le comportement des navigateurs qui ne connaissent pas les balises HTML et attributs que vous souhaitez utiliser.


Voir le squelette de cette page Site réalisé avec SPIP | Espace de traduction | Espace privé