Aller au contenu

Balise HTML <data>

La balise &lt;data&gt; est un élément de HTML5.1. Elle sert à définir un équivalent lisible par une machine pour les données spécifiées (une version standardisée, compréhensible par les systèmes automatisés ou les scripts du site web).

Cela peut être utile lorsque les données doivent être dans un format particulier nécessaire à l'exécution de scripts, mais que vous ne souhaitez pas que vos utilisateurs voient ce format. Par exemple, vous souhaitez afficher une liste de produits à choisir pour vos utilisateurs. Chaque produit possède son ID, mais vous ne voulez pas afficher cette information à vos utilisateurs. Vous placez alors les ID des produits dans la balise &lt;data&gt;, et la machine traitera ces informations pour afficher aux utilisateurs le produit correspondant à l'ID.

La balise &lt;data&gt; utilise l'attribut value pour stocker une version lisible par une machine de son contenu. Cela permet aux scripts de traiter la valeur sous-jacente tout en affichant un texte différent aux utilisateurs.

Le contenu visible à l'intérieur de la balise &lt;data&gt; doit être descriptif, car les technologies d'assistance peuvent ne pas lire l'attribut value. De plus, l'attribut value peut ne pas être indexé par les robots d'indexation des moteurs de recherche.

Nous recommandons d'utiliser la balise <time> si la valeur concerne une date ou une heure.

Syntaxe

La balise &lt;data&gt; s'utilise par paires. Le contenu est écrit entre la balise d'ouverture (&lt;data&gt;) et la balise de fermeture (&lt;&#8203;/data&gt;).

Exemple de la balise HTML &lt;data&gt; :

Balise HTML &lt;data&gt;

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>Refrigerated drinks</p>
    <ul>
      <li>
        <data value="1545325112">Coca-Cola 500ml</data>
      </li>
      <li>
        <data value="1545325113">Coca-Cola 330ml</data>
      </li>
      <li>
        <data value="1545325114">Coca-Cola Light 330ml</data>
      </li>
    </ul>
  </body>
</html>

Résultat

exemple de data

Attributs

AttributValeurDescription
valueformat lisible par une machineDéfinit la version lisible par une machine du contenu de la balise &lt;data&gt;.

La balise &lt;data&gt; prend également en charge les Attributs globaux et les Attributs d'événement.

Pratique

À quoi sert la balise <data> en HTML et que représente-t-elle ?

Trouvez-vous cela utile?

Aperçu dual-run — comparez avec les routes Symfony en production.