Maîtriser les balises de données HTML : Améliorer votre contenu web

Introduction

La balise <data> en HTML est utilisée pour attribuer des informations personnalisées à des données que vous souhaitez afficher sur votre page web. Par exemple, si vous avez un site web qui liste différents produits, vous pouvez utiliser la balise <data> pour ajouter le code produit à cette balise, qui ne sera pas visible pour l'utilisateur final. Ce laboratoire vous guidera dans l'utilisation de la balise <data> dans votre code HTML.

Note: Vous pouvez pratiquer la programmation dans index.html et apprendre Comment écrire du HTML dans Visual Studio Code. Cliquez sur 'Go Live' dans le coin inférieur droit pour exécuter le service web sur le port 8080. Ensuite, vous pouvez rafraîchir l'onglet Web 8080 pour prévisualiser la page web.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/BasicStructureGroup -.-> html/charset("Character Encoding") html/BasicStructureGroup -.-> html/lang_decl("Language Declaration") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") html/AdvancedElementsGroup -.-> html/custom_attr("Custom Data Attributes") subgraph Lab Skills html/basic_elems -.-> lab-70730{{"Données lisibles par machine en HTML"}} html/head_elems -.-> lab-70730{{"Données lisibles par machine en HTML"}} html/charset -.-> lab-70730{{"Données lisibles par machine en HTML"}} html/lang_decl -.-> lab-70730{{"Données lisibles par machine en HTML"}} html/inter_elems -.-> lab-70730{{"Données lisibles par machine en HTML"}} html/custom_attr -.-> lab-70730{{"Données lisibles par machine en HTML"}} end

Configuration du document HTML

Ouvrez votre fichier index.html dans votre éditeur de code et créez une structure de base de document HTML.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>HTML Data Tag Lab</title>
  </head>
  <body></body>
</html>

Ajout de la balise `<data>`

Dans la balise body, ajoutez une balise <data> pour attribuer les informations personnalisées que vous souhaitez attribuer à vos données que vous voulez afficher.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>HTML Data Tag Lab</title>
  </head>
  <body>
    <h1>Liste de produits</h1>
    <ul>
      <li><data value="12345">Produit 1</data></li>
      <li><data value="67890">Produit 2</data></li>
    </ul>
  </body>
</html>

Utilisation de JavaScript pour accéder aux informations personnalisées

Vous pouvez utiliser JavaScript pour accéder aux informations personnalisées attribuées à la balise <data>. Ajoutez un bloc de code JavaScript sous votre code HTML pour accéder à la balise <data> en utilisant son ID et récupérer la valeur personnalisée attribuée à celle-ci.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>HTML Data Tag Lab</title>
  </head>
  <body>
    <h1>Liste de produits</h1>
    <ul>
      <li><data id="prod1" value="12345">Produit 1</data></li>
      <li><data id="prod2" value="67890">Produit 2</data></li>
    </ul>
    <script>
      // Récupération de la valeur personnalisée de la balise <data> avec l'ID prod1
      var prod1Value = document.getElementById("prod1").getAttribute("value");
      console.log(prod1Value); // Sortie : 12345
    </script>
  </body>
</html>

Modification de la valeur de la balise `<data>` à l'aide de JavaScript

Vous pouvez également modifier la valeur de la balise <data> à l'aide de JavaScript. Ajoutez un autre bloc de code JavaScript sous le premier pour modifier la valeur de la balise <data> avec l'ID prod2.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>HTML Data Tag Lab</title>
  </head>
  <body>
    <h1>Liste de produits</h1>
    <ul>
      <li><data id="prod1" value="12345">Produit 1</data></li>
      <li><data id="prod2" value="67890">Produit 2</data></li>
    </ul>
    <script>
      // Récupération de la valeur personnalisée de la balise <data> avec l'ID prod1
      var prod1Value = document.getElementById("prod1").getAttribute("value");
      console.log(prod1Value); // Sortie : 12345

      // Modification de la valeur de la balise <data> avec l'ID prod2
      document.getElementById("prod2").setAttribute("value", "24680");
      console.log(document.getElementById("prod2").getAttribute("value")); // Sortie : 24680
    </script>
  </body>
</html>

Récapitulatif

Dans ce laboratoire, vous avez appris à utiliser la balise <data> en HTML pour attribuer des informations personnalisées à des données que vous voulez afficher sur votre page web. Vous avez également appris à utiliser JavaScript pour accéder et modifier la valeur de la balise <data>. La balise <data> est un outil pratique pour les sites e-commerce et d'autres projets qui nécessitent l'utilisation de codes ou de valeurs uniques.

Données lisibles par machine en HTML