VIDEO LESSON

HTMLのdataタグとは？属性・使い方・ブラウザー互換性と活用例の解説動画

再生時間 7:34動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:00エイチティーエムエルリファレンス解説です。
0:03エイチティーエムエルタグ編の九十二本目は、データタグです。
0:07データタグは、画面に表示する文字に対して、プログラムが読み取るための機械用の値を対応させる要素です。
0:14たとえば、利用者にはエイチティーエムエル入門という分かりやすい名前を見せつつ、
0:20裏側ではコースを特定する識別子を持たせておく、といった使い方をします。
0:25見た目を変えるタグではなく、表示とデータをつなぐタグだと考えてください。
0:30地味に見えますが、データの受け渡しを安定させる大切な土台になるタグです。
0:35今回は、バリュー属性の役割、タイムとの違い、コード例、互換性、よくある間違いまで順番に確認します。
0:42まず、機械可読な値という考え方を押さえます。
0:46人が読む表示は、日本語の講座名や商品名など、分かりやすさが大切です。
0:51一方で、プログラムが並び替えや検索、集計を行うときは、表記ゆれのない安定した値のほうが扱いやすくなります。
1:00たとえば、表示がエイチティーエムエル入門でも、全角や半角、略し方の違いで別物と判定されては困ります。
1:09データタグは、この二つを一か所で結び付けます。
1:13見える文字はそのまま人向けに残し、処理用の値は属性の中にそっと持たせる。
1:19この考え方は、後の活用例で講座の識別子を使って具体的に確認します。
1:24それがこのタグの基本的な発想です。
1:27データタグの中心になるのが、バリュー属性です。
1:30バリューには、表示内容に対応する機械処理用の値を書きます。
1:34画面の例では、表示がエイチティーエムエル入門で、バリューがコースエイチティーエムエルという識別子です。
1:42ここで大切な注意があります。
1:44バリューを書いただけでは、その値がフォームで自動的に送信されることはありません。
1:50バリューは、ジャバスクリプトなどが後から読み取るための値です。
1:54送信したい場合は、フォームの仕組みを別に用意する必要があります。
1:59この前提を外すと、動かない原因を見誤ります。
2:02基本の書き方を確認します。
2:04この教材では、開始タグと終了タグを明示し、その間に表示したい文字を書きます。
2:09データタグは文章の途中にも置ける要素なので、段落の中の一部分だけを囲むこともできます。
2:15試すときは、練習用ファイルのボディの適切な位置に写し、保存して再読み込みしてください。
2:22画面の見た目はタグを付ける前と変わらないはずです。
2:25変わらないのが正解です。
2:27囲む範囲は意味のまとまりに合わせ、必要な部分だけに絞るのがコツです。
2:32そのうえで、開発者ツールのエレメンツで、表示文字とバリューが正しく対応しているかを目で確認しましょう。
2:40記事の活用事例を読み解きます。
2:42目的は、表示名と内部の識別値を対応させることです。
2:46講座の一覧では、各項目の表示はエイチティーエムエル入門やシーエスエス入門といった人向けの名前です。
2:54一方、バリューにはコースエイチティーエムエル、コースシーエスエスといった、
2:59システムで一意に決まる識別子を入れます。
3:03こうしておくと、後から表示名の言い回しが変わっても、プログラム側はバリューで同じ講座だと追跡できます。
3:12識別子をそろえておくと、表示名の変更にも強い一覧になります。
3:16申し込み数の集計や、お気に入りの保存など、表示と処理を分けたい場面で力を発揮します。
3:23読み取り方もイメージしておきましょう。
3:26ジャバスクリプトでは、データ要素のバリュープロパティから機械用の値を取得できます。
3:32一方、テキストコンテンツからは、利用者に見えている表示側の文字が取れます。
3:37この二つを使い分けるのがポイントです。
3:40たとえば、講座名をクリックしたときに、表示名ではなく識別子を使って詳細ページを開いたり、
3:44集計したりできます。
3:48なお、ジャバスクリプトが無効な環境では、この読み取り処理自体が動きません。
3:53データタグは値を持たせるだけの要素で、処理まで自動で行うわけではない点に注意してください。
4:00よく比べられるタイムタグとの違いを整理します。
4:04タイムは、日付や時刻専用の要素で、機械用の値はデイトタイム属性に標準の形式で書きます。
4:11開催日や公開日など、日時を表す内容はタイムが適しています。
4:16一方データは、日時に限らない、より一般的な値に対応させるための要素です。
4:23記事も、日時ならタイムが適していると明言しています。
4:27商品コードや講座の識別子のように、日時ではない値ならデータ、という選び方が基本です。
4:35逆に、日時をデータに入れてしまうと、検索エンジンや支援技術に日時として正しく伝わらなくなります。
4:43共通属性と、名前の似た仕組みとの違いも確認します。
4:47データ要素でも、アイディー、クラス、ラングといった共通属性は必要に応じて使えます。
4:54クラスはスタイルや選択のため、ラングは内容の言語を示すために使います。
5:00一方、データスター属性は、要素に独自のデータを付けるためのまったく別の仕組みで、
5:04データ要素そのものとは関係ありません。
5:09名前にデータが付くので混同しがちですが、使い分けましょう。
5:14また、バリューもデータスター属性も、ページのソースを見れば誰でも読めます。
5:20パスワードなどの秘密情報を置く場所ではない点も、共通の注意です。
5:25ブラウザー互換性を確認します。
5:27記事が紹介するエムディーエヌのデータでは、データ要素本体は、クロームが六十二以降、
5:34エッジが十四以降、ファイアフォックスが二十二以降、サファリが十以降に対応しています。
5:40中心となるバリュー属性の対応開始版も、同じ数字です。
5:44現在の主要ブラウザーでは問題なく使えると考えてよいでしょう。
5:49ただし、この表は要素本体の対応を示すもので、読み取り処理やほかの機能まで同じ動作を保証するものではありません。
5:58対応表は記事の確認時点の記録なので、新規導入時は最新情報もあわせて確認しましょう。
6:04古い端末を対象に含める場合は、対象環境で実際に表示と読み取りを試してから採用してください。
6:11よくある間違いを三つ挙げます。
6:14一つ目は、バリューを書き忘れることです。
6:16バリューがなければ、ただ文字を囲んだだけで、機械用の値を対応させる目的が果たせません。
6:22二つ目は、日時に使ってしまうことです。
6:25日付や時刻にはタイムとデイトタイムを使ってください。
6:29三つ目は、データタグを付けたら見た目や動作が変わると期待することです。
6:33表示は変わらず、送信も自動では行われません。
6:37小さな画面幅でも表示が欠けず、対応関係が読み取れるかも確認してください。
6:42あわせて、表示側の文字とバリューの対応がずれていないか、たとえば別の講座の識別子を付けてしまっていないかも、
6:46公開前に見直しましょう。
6:51まとめです。
6:52データタグは、人が読む表示内容に、機械が処理するためのバリューを対応させる要素です。
6:59最後にチェックリストで確認しましょう。
7:03まず、バリューに表記ゆれのない安定した値が書かれているか。
7:08次に、内容が日時ならタイムを選べているか。
7:11そして、ジャバスクリプトで読み取るなど、値を実際に活用する処理が用意されているか。
7:18この三点がそろえば、表示とデータがきれいに分かれた、扱いやすいページになります。
7:25これでデータタグの解説を終わります。
7:29ぜひ、講座一覧や商品リストで実際に試してみてください。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

dataタグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。表示内容に機械処理用の value を対応させます。日時なら time が適しています。

解説記事・サンプルコードを読む：HTMLのdataタグとは？属性・使い方・ブラウザー互換性と活用例 →