初めてのHTML入門⑪
今日は、情報がセットになったリストについて勉強していきます。
「情報がセットになったリスト」とは、「この内容」と「この内容」はセットであるということを示している、つまり「項目名」と「その内容」があるといったイメ―ジです。それが、全体としてリストになっている状態のことです。
情報がセットになったリスト
<dl>というタグを使います。このタグを使うことによって、このリストの項目名と内容はセットになっているということを示すことができます。
情報の項目名
<dt>というタグを使います。
情報の内容
<dd>というタグを使います。
この3つのタグを組み合わせることで、情報がセットになったリストというものを作っていくことができます。
具体的には「質問」と「答え」というものがわかりやすいでしょう。
では、HTMLで書いていきます。
HTMLを書いてみる
以下のようなHTMLファイルを用意してください。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTMLの練習</title>
</head>
<body>
質問１
答え１
</body>
</html>
まずは、「質問１」「答え1」が情報がセットになったリストであることを示すために、<dl></dl>で囲ってあげましょう。
<body>
<dl>
質問１
答え１
</dl>
</body>
次に、「質問１」と「答え1」をそれぞれ<dt>と<dd>で囲みます。
<body>
<dl>
<dt>質問１</dt>
<dd>答え１</dd>
</dl>
</body>
そして保存し、ブラウザを更新してみましょう。
するとこのように画面の表示が変化しました。
「質問1」に対して「答え1」がインデントされ、これらの情報がセットであるということがわかりやすく表現されています。
これら、セットの情報が複数あるとどうなるのか、見てみましょう。
<body>
<dl>
<dt>質問１</dt>
<dd>答え１</dd>
<dt>質問２</dt>
<dd>答え２</dd>
<dt>質問３</dt>
<dd>答え３</dd>
</dl>
</body>
このように、わかりやすく表示されました。
このようにして、「何か」に対して「その内容」というように書いていく場合には、<dl>をつかったリストの表現を使うことができます。
前回の”初めてのHTML入門⑩”で学んだ、リストの入れ子とは意味合いが違うということはお分かりかと思いますが、今回学んだ「情報がセットになったリスト」はCSSを学んでいくとよく登場する書き方ですので、ぜひ覚えておきましょう。
今回は、「項目」と「情報」がセットになっているリストについて勉強をしました。
この note は”TechAcademy”の動画で学んだことを文字に起こして
備忘録及び自分のアウトプットとして公開しています。
https://youtu.be/244qUv8opsw
実際に動画を見ながら手を動かすのも有効だと思います。
いきなりハードルを上げると挫折してしまうので、簡単なことから継続して徐々にレベルアップしていきましょう。
この記事が気に入ったらサポートをしてみませんか？