Dominando as Tags de Dados HTML: Otimize o Conteúdo da Sua Web

Introdução

A tag <data> em HTML é usada para atribuir alguma informação personalizada a alguns dados que você deseja exibir em sua página web. Por exemplo, se você tem um website que lista diferentes produtos, você pode usar a tag <data> para adicionar o código do produto a esta tag, o qual não será visível para o usuário final. Este laboratório irá guiá-lo através do uso da tag <data> em seu código HTML.

Nota: Você pode praticar a codificação em index.html e aprender Como Escrever HTML no Visual Studio Code. Por favor, clique em 'Go Live' no canto inferior direito para executar o serviço web na porta 8080. Então, você pode atualizar a aba Web 8080 para visualizar a página web.

Configurando o Documento HTML

Abra seu arquivo index.html em seu editor de código e crie uma estrutura básica de documento HTML.

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

Adicionando a Tag data

Dentro da tag body, adicione uma tag <data> para atribuir a informação personalizada que você deseja associar aos seus dados que você quer exibir.

<!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>

Usando JavaScript para Acessar as Informações Personalizadas

Você pode usar JavaScript para acessar a informação personalizada atribuída à tag data. Adicione um bloco de código JavaScript abaixo do seu código HTML para acessar a tag data usando seu ID e recuperar o valor personalizado atribuído a ela.

<!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>

Modificando o Valor da Tag Data Usando JavaScript

Você também pode modificar o valor da tag data usando JavaScript. Adicione outro bloco de código JavaScript abaixo do primeiro para modificar o valor da tag data prod2.

<!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>

Resumo

Neste laboratório, você aprendeu como usar a tag <data> em HTML para atribuir informações personalizadas aos dados que deseja exibir em sua página web. Você também aprendeu como usar JavaScript para acessar e modificar o valor da tag data. A tag <data> é uma ferramenta útil para sites de comércio eletrônico (eCommerce) e outros projetos que exigem o uso de códigos ou valores únicos.

Dados Legíveis por Máquina em HTML