htmlのdtタグとは? 入れ子の決まり・改行の仕方も分かりやすく解説!

dt要素について知りたい人

dt要素について知りたいな!

この記事は上記のような疑問を解消するものとなっています。

この記事でお話すること
  • dt要素とは?
  • dt要素の使い方
  • dt要素の入れ子レール
  • dt要素の改行方法

dt要素はdefinition teamの略で説明する言葉を表現する要素です。

説明リストを表すdl要素や説明文を表すdd要素と組み合わせて定義リストを記述します。

この説明する言葉と説明文のセットは、dl要素の子要素として複数表記することが可能です。

この要素は使用頻度が高いのでしっかりと理解しておく必要があります。

そこでこの記事ではdt要素について詳しく解説していきます。

気になる方は是非最後まで読んで頂ければと思います。

dt要素の評価
頻出度
(5.0)
重要度
(5.0)
総合評価
(5.0)

1.dt要素とは?

dt要素はdefinition teamの略で説明型リストの用語を表す要素です。

用語説明リストの 用語を、このdt要素でマークアップし、用語に対しての説明をdd要素を使ってマークアップします。

これらを正しく使用することで検索エンジンがWebページのコンテンツを把握するときのヒントになります。

HTML5からdl要素、dt要素、dd要素は定義リストから説明リストになったことで様々な用途で利用できるようになりました。

dt要素で囲んだ部分をdd要素で囲んで説明するという形をとってもOKであるという感じです。

そのため、以前よりも使う機会が増えます。




2.dt要素の使い方

使い方はとてもシンプルです。

dt要素で囲んだ部分をdd要素で囲んで説明したいことを記述します。

そして全体をdl要素で囲むという感じです。

dl要素内にdt要素とdd要素をいくつ入れても大丈夫です。

また、1つのdt要素に複数のdd要素、複数のdt要素に1つのdd要素、複数のdt要素に複数のdd要素という組み合わせもOKです。

それではdt要素の使い方をみていきましょう。

・・・

<dl>
 <dt>HTML</dt>
 <dd>HTMLはWebページを作成するために開発された言語です。</dd>
 <dt>CSS</dt>
 <dd>CSSはWebページのスタイルを指定するための言語です。</dd>
</dl>

・・・

HTMLとCSSという用語(dt要素)に対して、説明(dd要素)を付けたものとなっています。

上記の例はオーソドックスな使い方ですが、dt要素とdd要素の組み合わせができていればどんな使い方をしてもOKです。




3.dt要素の入れ子レール

1つのdt要素に複数のdd要素、複数のdt要素に1つのdd要素、複数のdt要素に複数のdd要素という組み合わせもOKです。

dt要素に入れることができる要素は以下の通りです。

dt要素に入れることができる要素
  • a
  • blockquote
  • br
  • button
  • code
  • div
  • dl
  • figure
  • form
  • img
  • input
  • label
  • ol
  • p
  • select
  • strong
  • table
  • textarea
  • ul
  • video




4.dt要素の改行方法

dt要素内で改行した場合、「br」を利用します。

「br」とは「break」の略で、改行を行うためのタグです。

これは終了タグなしで使います。

以下はdt要素内で改行を行ったサンプルプログラムです。

・・・

<dl>
 <dt>HTML<br>Hyper Text Markup Language</dt>
 <dd>HTMLはWebページを作成するために開発された言語です。</dd>
 <dt>CSS<br>Cascading Style Sheets</dt>
 <dd>CSSはWebページのスタイルを指定するための言語です。</dd>
</dl>

・・・

dt要素の改行したい方は是非「br」を利用してみてください!

 

HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方」はHTML5/CSS3を使ってモダンなサイトを制作するためのコーディングテクニックをハンズオン形式で学ぶ本です。

実践的な内容になっているので次のステップに進みたいという方は是非利用してみてはいかがでしょうか!?

 

HTMLやCSSを利用してWebサイト制作の副業に挑戦してみたいという方はいませんか!?

そんな方に「はじめての副業コース」をオススメします。

なんとHTMLやCSSを学べるだけでなく、案件紹介も行ってくれます!

Webサイト制作で稼ぎたいという方は是非「はじめての副業コース」を受講してみてはいかがでしょうか!?