Mastering HTML Data Tags: Enhance Your Web Content

Introduction

The <data> tag in HTML is used to assign some custom information to some data which you wish to display on your webpage. For example, if you have a website that lists different products, you can use the <data> tag to add the product code to this tag, which will not be visible to the end user. This lab will guide you through using the <data> tag in your HTML code.

Note: You can practice coding in index.html and learn How to Write HTML in Visual Studio Code. Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("`HTML`")) -.-> html/BasicStructureGroup(["`Basic Structure`"]) html(("`HTML`")) -.-> html/TextContentandFormattingGroup(["`Text Content and Formatting`"]) html(("`HTML`")) -.-> html/AdvancedElementsGroup(["`Advanced Elements`"]) html/BasicStructureGroup -.-> html/basic_elems("`Basic Elements`") html/BasicStructureGroup -.-> html/charset("`Character Encoding`") html/BasicStructureGroup -.-> html/lang_decl("`Language Declaration`") html/BasicStructureGroup -.-> html/head_elems("`Head Elements`") html/TextContentandFormattingGroup -.-> html/text_head("`Text and Headings`") html/TextContentandFormattingGroup -.-> html/lists_desc("`Lists and Descriptions`") html/AdvancedElementsGroup -.-> html/inter_elems("`Interactive and Dynamic Elements`") subgraph Lab Skills html/basic_elems -.-> lab-70730{{"`HTML Machine-Readable Data`"}} html/charset -.-> lab-70730{{"`HTML Machine-Readable Data`"}} html/lang_decl -.-> lab-70730{{"`HTML Machine-Readable Data`"}} html/head_elems -.-> lab-70730{{"`HTML Machine-Readable Data`"}} html/text_head -.-> lab-70730{{"`HTML Machine-Readable Data`"}} html/lists_desc -.-> lab-70730{{"`HTML Machine-Readable Data`"}} html/inter_elems -.-> lab-70730{{"`HTML Machine-Readable Data`"}} end

Setting up the HTML Document

Open your index.html file in your code editor and create a basic HTML document structure.

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

Adding the data Tag

Within the body tag, add a <data> tag to assign the custom information you wish to assign to your data that you want to display.

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

Using JavaScript to Access the Custom Information

You can use JavaScript to access the custom information assigned to the data tag. Add a JavaScript code block below your HTML code to access the data tag using its ID and retrieve the custom value assigned to it.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>HTML Data Tag Lab</title>
  </head>
  <body>
    <h1>Product List</h1>
    <ul>
      <li><data id="prod1" value="12345">Product 1</data></li>
      <li><data id="prod2" value="67890">Product 2</data></li>
    </ul>
    <script>
      // Retrieving custom value of data tag with ID prod1
      var prod1Value = document.getElementById("prod1").getAttribute("value");
      console.log(prod1Value); // Output: 12345
    </script>
  </body>
</html>

Modifying the Value of the Data Tag Using JavaScript

You can also modify the value of the data tag using JavaScript. Add another JavaScript code block below the first one to modify the value of the prod2 data tag.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>HTML Data Tag Lab</title>
  </head>
  <body>
    <h1>Product List</h1>
    <ul>
      <li><data id="prod1" value="12345">Product 1</data></li>
      <li><data id="prod2" value="67890">Product 2</data></li>
    </ul>
    <script>
      // Retrieving custom value of data tag with ID prod1
      var prod1Value = document.getElementById("prod1").getAttribute("value");
      console.log(prod1Value); // Output: 12345

      // Modifying the value of data tag with ID prod2
      document.getElementById("prod2").setAttribute("value", "24680");
      console.log(document.getElementById("prod2").getAttribute("value")); // Output: 24680
    </script>
  </body>
</html>

Summary

In this lab, you learned how to use the <data> tag in HTML to assign custom information to data that you want to display on your webpage. You also learned how to use JavaScript to access and modify the value of the data tag. The <data> tag is a useful tool for eCommerce websites and other projects that require the use of unique codes or values.

HTML Machine-Readable Data