【複数使えるの?】htmlのdd要素とは? 使い方・改行の仕方も分かりやすく解説!

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

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

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

この記事でお話すること

dd要素とは!?
dd要素の使い方! dd要素は複数使えるの?
dd要素の改行方法
格安プログラミングスクールを利用してHTML/CSSを勉強しましょう!

dd要素はdl要素とdt要素とセットに使います。

dd要素は用語に対する説明を行うための要素です。

HTML5から定義リストから記述リストへと内容が変わっており、使う機会が増えてきています。

そのため、情報をまとめていくさいにとても役立つ要素なのでしっかりと使い方を理解しておくことをオススメします。

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

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

dd要素の評価

頻出度

(5.0)

重要度

(5.0)

総合評価

(5.0)

1.dd要素とは?

dd要素は「description difinition」の略で説明型リスト（dl要素）の説明を表す要素です。

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

HTML4ではdt要素(定義する言葉)をdd要素(定義の説明)として定義するというルールでしたが、HTML5ではdt要素(説明する言葉)をdd要素(説明文)で説明するものに変更されました。

2.dd要素の使い方! dd要素は複数使えるの?

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

・・・

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

・・・

上記の例ではHTMLとCSSという用語（dt要素）に対して、説明（dd要素）を付けたものとなっています。

dlの中にdt要素とdd要素は複数あっても大丈夫です。

また、dt要素が1つに対してdd要素が1つというきまりはありません。

例えば、「1つのdt要素に対し複数のdd要素」、「複数のdt要素に対し1つのdd要素」、「複数のdt要素に対して複数のdd要素」ということも可能です。

3.dd要素の改行方法

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

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

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

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

・・・

<dl>
  <dt>HTML</dt>
  <dd>HTMLはWebページを作成するために開発された言語です。<br>
      インターネット上で公開されてるWebページのほとんどは、HTMLで作成されています。
  </dd>
  <dt>CSS</dt>
  <dd>CSSはWebページのスタイルを指定するための言語です。<br>
      HTMLがウェブページ内の各要素の意味や情報構造を定義するのに対して、CSSではそれらをどのように装飾するかを指定します。
  </dd>
</dl>

・・・

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

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

リンク

4.格安プログラミングスクールを利用してHTML/CSSを勉強しましょう!

HTMLとCSSの勉強途中で分からないことがあり、中々進まないこともあると思います。

しかし、順を追って学習を進めていけば、必ずできるようになるのであきらめず最後までやりぬきましょう!

HTMLとCSSをプログラミングスクールで教わりたいという方も中にはいます。

そんな方は低価格のサブスク型プログラミングスクールがオススメです。

【コスパ最高】オススメのプログラミングスクール

侍テラコヤ
⇒ 学び応援キャンペーンでお得に申し込む!
・月額1,980円からいつでも現役エンジニアに質問できる。
・学び応援キャンペーン実施中!
ZeroPlus Gate
⇒ 受講料0円で学習をはじめる!
・受講料0円
・30日で副業レベルのWebスキルを学べる!
本気のパソコン塾
⇒ 無料相談会・無料トライアルに申し込む!
・特典1：学習コンテンツの1週間無料トライアル
・特典2：学習管理シートプレゼント
・特典3：副業収入獲得ノウハウ動画プレゼント