説明リスト

初めに！

  • htmlを学習して学んだことを中心にアウトプットしていきたいと思います。

説明リストとは？

  • 用語と説明をリスト化したものを指す。

作成目標

コード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>説明リストの練習</title>
</head>
<body>
  <dl>
    <dt>用語1</dt>
    <dd>説明1</dd>

    <dt>用語2</dt>
    <dd>説明2</dd>

    <dt>用語3</dt>
    <dd>説明3</dd>
  </dl>

  <dl>
    <dt>HTML</dt>
    <dd>文章構造を指定するマークアップ言語</dd>

    <dt>CSS</dt>
    <dd>webページのスタイルを指定する言語</dd>

    <dt>javascript</dt>
    <dd>動的なwebページを作成することのできるプログラミング言語</dd>
  </dl>
</body>
</html>

コードの解説

用語1~3について

  • dl要素の中にdt,dd要素を入れる。

  • dt要素には用語、dd要素には説明を記述。

  • dl要素中にdt ,dd要素を入れることで用語と説明を対にしたリストを作成することができる。

  • dl要素はDescription Listの略語。dt要素はDescription Termの略語。dd要素はDescription Definitionの略語。

HTML、CSS、JavaScriptについて

  • 用語と説明の構造と同じように作成する。

  • dl要素の中にdt、dd要素を記述していく。

  • dt要素にはHTML、CSS、JavaScriptを記述。dd要素にはそれぞれの言語の説明を記述する。

  • 言語と説明が対になっている。

結語

  • dl要素の中にdl、dd要素を記述することで対となるリストを作成することができる。

  • dl要素はDescription Listの略語。dt要素はDescription Termの略語。dd要素はDescription Definitionの略語である。