Meisterklasse für HTML-Data-Tags: Verbessern Sie Ihren Web-Inhalt

Einführung

Das <data>-Tag in HTML wird verwendet, um einigen Daten benutzerdefinierte Informationen zuzuweisen, die Sie auf Ihrer Webseite anzeigen möchten. Beispielsweise können Sie, wenn Sie eine Website haben, die verschiedene Produkte auflistet, das <data>-Tag verwenden, um den Produktcode diesem Tag hinzuzufügen, was für den Endbenutzer nicht sichtbar ist. In diesem Lab werden Sie durch das Verwenden des <data>-Tags in Ihrem HTML-Code geführt.

Hinweis: Sie können im index.html programmieren und lernen, wie Sie in Visual Studio Code HTML schreiben. Klicken Sie bitte auf 'Go Live' in der unteren rechten Ecke, um den Webdienst auf Port 8080 auszuführen. Anschließend können Sie die Registerkarte Web 8080 aktualisieren, um die Webseite anzuschauen.

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{{"HTML maschinenlesbare Daten"}} html/head_elems -.-> lab-70730{{"HTML maschinenlesbare Daten"}} html/charset -.-> lab-70730{{"HTML maschinenlesbare Daten"}} html/lang_decl -.-> lab-70730{{"HTML maschinenlesbare Daten"}} html/inter_elems -.-> lab-70730{{"HTML maschinenlesbare Daten"}} html/custom_attr -.-> lab-70730{{"HTML maschinenlesbare Daten"}} end

Einrichten der HTML-Dokumentation

Öffnen Sie die Datei index.html in Ihrem Code-Editor und erstellen Sie eine grundlegende HTML-Dokumentstruktur.

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

Hinzufügen des data-Tags

Innerhalb des body-Tags fügen Sie ein <data>-Tag hinzu, um den benutzerdefinierten Informationen zuzuweisen, die Sie Ihren Daten zuweisen möchten, die Sie anzeigen möchten.

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

Verwenden von JavaScript, um auf die benutzerdefinierten Informationen zuzugreifen

Sie können JavaScript verwenden, um auf die benutzerdefinierten Informationen zuzugreifen, die dem data-Tag zugewiesen wurden. Fügen Sie einen JavaScript-Codeblock unter Ihrem HTML-Code hinzu, um auf das data-Tag mithilfe seiner ID zuzugreifen und den zugewiesenen benutzerdefinierten Wert abzurufen.

<!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); // Ausgabe: 12345
    </script>
  </body>
</html>

Ändern des Werts des data-Tags mit JavaScript

Sie können auch den Wert des data-Tags mit JavaScript ändern. Fügen Sie einen weiteren JavaScript-Codeblock unter dem ersten hinzu, um den Wert des prod2 data-Tags zu ändern.

<!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); // Ausgabe: 12345

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

Zusammenfassung

In diesem Lab haben Sie gelernt, wie Sie das <data>-Tag in HTML verwenden, um benutzerdefinierte Informationen an Daten zuzuweisen, die Sie auf Ihrer Webseite anzeigen möchten. Sie haben auch gelernt, wie Sie JavaScript verwenden, um auf den Wert des data-Tags zuzugreifen und zu ändern. Das <data>-Tag ist ein nützliches Tool für E-Commerce-Websites und andere Projekte, bei denen die Verwendung von eindeutigen Codes oder Werten erforderlich ist.