はじめに
HTML の <data> タグは、Web ページに表示したいデータにカスタム情報を割り当てるために使用されます。たとえば、さまざまな製品を一覧表示するウェブサイトがある場合、<data> タグを使用してこのタグに製品コードを追加できます。これは、エンドユーザーには表示されません。この実験では、HTML コードで <data> タグを使用する方法を案内します。
注：
index.htmlでコーディングを練習し、Visual Studio Code で HTML を記述する方法 を学ぶことができます。画面右下の「Go Live」をクリックして、ポート 8080 でウェブサービスを実行します。その後、Web 8080 タブを更新して、Web ページをプレビューできます。
HTML ドキュメントのセットアップ
コードエディタで index.html ファイルを開き、基本的な HTML ドキュメント構造を作成します。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>HTML Data Tag Lab</title>
</head>
<body></body>
</html>
data タグの追加
body タグの中に、表示したいデータに割り当てたいカスタム情報を割り当てるための <data> タグを追加します。
<!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>
JavaScript を使ってカスタム情報にアクセスする
JavaScript を使って、data タグに割り当てられたカスタム情報にアクセスすることができます。HTML コードの下に JavaScript コードブロックを追加して、data タグの ID を使ってアクセスし、それに割り当てられたカスタム値を取得します。
<!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>
JavaScript を使って data タグの値を変更する
JavaScript を使って、data タグの値を変更することもできます。最初の JavaScript コードブロックの下に別の JavaScript コードブロックを追加して、prod2 data タグの値を変更します。
<!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>
まとめ
この実験では、HTML の <data> タグを使って、Web ページに表示したいデータにカスタム情報を割り当てる方法を学びました。また、JavaScript を使って data タグの値にアクセスして変更する方法も学びました。<data> タグは、e コマースサイトや一意のコードや値の使用が必要な他のプロジェクトにとって便利なツールです。
