VIDEO LESSON

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

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

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

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

0:00こんにちは。
0:00エイチティーエムエル、リファレンス解説です。
0:03エイチティーエムエルタグ編の八十三本目は、ディーティータグです。
0:07ディーティーは、説明リストの中で、用語や名前を示す要素です。
0:10たとえば用語集で、エイチティーエムエルという言葉そのものを示すのがディーティー、
0:14その意味を説明する文がディーディーです。
0:17辞書で言えば、見出し語がディーティー、定義文がディーディーにあたります。
0:22今回は、この見出しとしての役割から、ディーエル、ディーディーとの組み合わせ、
0:26使い方、よくある間違いまで、順番に確認していきましょう。
0:30名前と説明が対になっている情報を見つけたとき、それがディーティーの出番だと思ってください。
0:35基本の書き方を確認します。
0:37ディーティーは、開始タグと終了タグの両方を書いて、その間に用語や名前を入れる要素です。
0:45大切なのは、単独では使わないことです。
0:48親要素として説明リストのディーエルを用意し、その中にディーティーを置き、
0:53直後に説明を担当するディーディーを続けます。
0:58画面の例では、エイチティーエムエルという用語をディーティーで示し、その説明をディーディーに書いています。
1:06この順番が、名前と説明の組を読み手にも機械にも正しく伝える基本の形です。
1:12終了タグを書き忘れないよう、開いたら必ず閉じる習慣を付けましょう。
1:18三つのタグの役割分担を整理します。
1:21ディーエルは、名前と値の組全体をまとめる入れ物です。
1:24ディーティーは、その中の名前や項目名です。
1:27ディーディーは、直前のディーティーに対応する説明や値です。
1:31料金表で言えば、受講料という項目名がディーティー、千二百円ではなく一万二千円という金額がディーディーです。
1:39見出しタグや段落で代用するのではなく、この三つを組で使うことで、用語と説明が対応しているという関係自体を、
1:44エイチティーエムエルとして表現できます。
1:50構造で意味を伝えることが、この組み合わせの狙いです。
1:53この対応関係が伝わることで、読み上げでも、検索でも、内容を正しく理解しやすくなります。
2:00記事の活用事例を読み解きます。
2:02例はとてもシンプルで、受講時間という項目名をディーティーに、九十分という値をディーディーに書いた、
2:07講座案内の一組です。
2:12何の数字なのかは、直前のディーティーが教えてくれます。
2:16試すときは、練習用ファイルのボディの適切な位置に、親のディーエルごとこの例を写し、
2:20保存して再読み込みしてください。
2:25そのうえで開発者ツールのエレメンツで、ディーティーとディーディーがディーエルの中に正しい順番で入っているかを確認します。
2:35表示が地味でも、構造が正しければ目的は達成されています。
2:39ディーティーの使い道は、用語集だけではありません。
2:42名前と値の組で表せる情報なら、幅広く応用できます。
2:46たとえばイベント案内では、開催日を持ち物といった項目名をディーティーに、
2:49日付や内容をディーディーにします。
2:52よくある質問では、質問文をディーティー、回答をディーディーにする書き方もよく見られます。
2:58逆に、順番に意味のある手順は順序リスト、順番に意味のない箇条書きは箇条書きリストが向いています。
3:04内容が名前と説明の組になっているかどうかが、ディーティーを選ぶかどうかの判断基準です。
3:09段落や表で書く方が分かりやすい場合もありますので、無理にリスト化しない判断も大切です。
3:15少し進んだ書き方として、組み合わせの柔軟さを知っておきましょう。
3:19一つのディーティーに対して、説明を分けて複数のディーディーを続けることができます。
3:25また、複数のディーティーに対して、一つのディーディーが対応する形も書けます。
3:31たとえば別名のある用語では、二つの名前を並べて一つの説明につなげます。
3:36ただし、柔軟だからといって複雑にしすぎると、読み手がどの説明がどの名前に対応するのか追いにくくなります。
3:43初心者のうちは、一つのディーティーに一つのディーディーという一対一の形を基本にし、
3:48必要なときだけ複数を組み合わせるのがおすすめです。
3:53見た目を整えるときに知っておくと便利なのが、グループ化です。
3:57現在のエイチティーエムエルでは、ディーエルの中で、ディーティーとディーディーの組をディブで包む書き方が認められています。
4:06これにより、組ごとに枠を付けたり、名前と説明を横並びにしたりといった、シーエスエスでの調整がしやすくなります。
4:15ただし、これは見た目のための補助的な使い方です。
4:18ディブで包まない基本形でも意味はまったく同じですし、包む場合も順番はディーティーが先、
4:23ディーディーが後という原則は変わりません。
4:28まずは基本形を正しく書けることを優先してください。
4:32属性を確認します。
4:33ディーティーには、この記事で必須となる専用の属性はありません。
4:38必要に応じて、アイディー、クラス、ラングといった共通属性を使います。
4:44アイディーは文書内で一意な識別子で、ページ内リンクやスクリプトからの参照に使います。
4:51クラスは、シーエスエスやスクリプトで複数の要素をまとめて選ぶための名前です。
4:57ラングは内容の言語を示し、日本語ならジェーエーを指定します。
5:01データ属性で独自の値を保持することもできますが、秘密情報を置く場所ではありません。
5:08属性は補助ですので、必要なときだけ控えめに加えましょう。
5:13見た目とシーエスエスの関係を確認します。
5:16ディーティーは、多くのブラウザーで標準では太字で表示され、ディーディーは少し字下げされて表示されます。
5:24ただし、これはあくまで初期の表示です。
5:26色を付けたり、余白を調整したりしたいときは、シーエスエスで指定します。
5:32ここで大切なのは逆の視点です。
5:34文字を太字にしたいだけの理由でディーティーを使ってはいけません。
5:39ディーティーは、説明対象の名前であるときだけ選びます。
5:43意味はエイチティーエムエルで、見た目はシーエスエスで、という役割分担を守ることが、
5:48読みやすく保守しやすいページにつながります。
5:53ブラウザー互換性を確認します。
5:55記事が参照するエムディーエヌのデータでは、ディーティー要素は、クロームが一以降、
6:02エッジが十二以降、ファイアフォックスが一以降、サファリが四以前からと、主要ブラウザーで非常に古くから対応しています。
6:09新しい機能ではないため、対応を心配する必要はほぼありません。
6:14ただし、スマートフォンの小さな画面や文字を拡大した表示でも、名前と説明の対応が読み取りやすいかは、
6:18自分の目で確認しておきましょう。
6:23三百二十ピクセル程度の幅でも内容が欠けないかをチェックするのが、記事でも勧められている確認方法です。
6:30モバイル版のブラウザーでは表示のされ方が異なる場合もあるため、実機でも一度試しておくと安心です。
6:37最後に、よくある間違いとまとめです。
6:40一つ目は、親のディーエルを忘れて、ディーティーを単独で置いてしまうことです。
6:46ディーティーは必ずディーエルの中で使います。
6:49二つ目は、見出しの代わりや、太字にしたいだけの理由で使うことです。
6:54章の見出しにはエイチツーなどの見出しタグを使います。
6:58三つ目は、ディーディーを先に書いて順番を逆にしてしまうことです。
7:03名前が先、説明が後が原則です。
7:06ディーティーは、説明リストの中で用語や名前を示す見出し役です。
7:10ディーエル、ディーティー、ディーディーの三点セットを意識して、練習ページで一組書いてみてください。
7:18お疲れさまでした。

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

この動画で学べること

dtタグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。dl の中で用語や名前を示します。

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