Dominando las etiquetas de datos HTML: Mejora tu contenido web

Introducción

La etiqueta <data> en HTML se utiliza para asignar información personalizada a algunos datos que desees mostrar en tu página web. Por ejemplo, si tienes un sitio web que lista diferentes productos, puedes usar la etiqueta <data> para agregar el código del producto a esta etiqueta, que no será visible para el usuario final. Esta práctica te guiará a través del uso de la etiqueta <data> en tu código HTML.

Nota: Puedes practicar la codificación en index.html y aprender Cómo escribir HTML en Visual Studio Code. Haga clic en 'Go Live' en la esquina inferior derecha para ejecutar el servicio web en el puerto 8080. Luego, puede actualizar la pestaña Web 8080 para previsualizar la página web.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) 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{{"Datos legibles por máquina en HTML"}} html/head_elems -.-> lab-70730{{"Datos legibles por máquina en HTML"}} html/charset -.-> lab-70730{{"Datos legibles por máquina en HTML"}} html/lang_decl -.-> lab-70730{{"Datos legibles por máquina en HTML"}} html/inter_elems -.-> lab-70730{{"Datos legibles por máquina en HTML"}} html/custom_attr -.-> lab-70730{{"Datos legibles por máquina en HTML"}} end

Configurando el documento HTML

Abra su archivo index.html en su editor de código y cree una estructura 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>

Agregando la etiqueta data

Dentro de la etiqueta body, agregue una etiqueta <data> para asignar la información personalizada que desee asignar a los datos que desea mostrar.

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

Usando JavaScript para acceder a la información personalizada

Puedes usar JavaScript para acceder a la información personalizada asignada a la etiqueta de datos. Agrega un bloque de código JavaScript debajo de tu código HTML para acceder a la etiqueta de datos usando su ID y recuperar el valor personalizado asignado a ella.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>HTML Data Tag Lab</title>
  </head>
  <body>
    <h1>Lista de Productos</h1>
    <ul>
      <li><data id="prod1" value="12345">Producto 1</data></li>
      <li><data id="prod2" value="67890">Producto 2</data></li>
    </ul>
    <script>
      // Recuperando el valor personalizado de la etiqueta de datos con ID prod1
      var prod1Value = document.getElementById("prod1").getAttribute("value");
      console.log(prod1Value); // Salida: 12345
    </script>
  </body>
</html>

Modificando el valor de la etiqueta de datos usando JavaScript

También puedes modificar el valor de la etiqueta de datos usando JavaScript. Agrega otro bloque de código JavaScript debajo del primero para modificar el valor de la etiqueta de datos prod2.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>HTML Data Tag Lab</title>
  </head>
  <body>
    <h1>Lista de Productos</h1>
    <ul>
      <li><data id="prod1" value="12345">Producto 1</data></li>
      <li><data id="prod2" value="67890">Producto 2</data></li>
    </ul>
    <script>
      // Recuperando el valor personalizado de la etiqueta de datos con ID prod1
      var prod1Value = document.getElementById("prod1").getAttribute("value");
      console.log(prod1Value); // Salida: 12345

      // Modificando el valor de la etiqueta de datos con ID prod2
      document.getElementById("prod2").setAttribute("value", "24680");
      console.log(document.getElementById("prod2").getAttribute("value")); // Salida: 24680
    </script>
  </body>
</html>

Resumen

En este laboratorio, aprendiste cómo usar la etiqueta <data> en HTML para asignar información personalizada a los datos que quieres mostrar en tu página web. También aprendiste cómo usar JavaScript para acceder y modificar el valor de la etiqueta de datos. La etiqueta <data> es una herramienta útil para sitios web de comercio electrónico y otros proyectos que requieren el uso de códigos o valores únicos.