HTMLで説明リストを使用するには?

説明リストは、用語とそれに対応する説明の間の関係を作成する情報を構造化および表示するための意味論的な方法を提供します。これにより、データや情報がよりアクセスしやすくなり、理解しやすくなります。作成者は、用語集、辞書、FAQ セクション、製品仕様などの場所で説明リストを利用できます。この記事では、HTML で説明リストを使用する手順を説明します。

HTMLで説明リストを使用するには?

説明リストは「

”、”

'、 と '

」タグがあり、用語とそれに対応する定義のコレクションを表すために使用されます。単純な箇条書きリストを超えた構造化された形式でコンテンツを提示/表示します。 CSS プロパティを説明リストに適用して、視覚的に魅力的なインターフェイスを作成することもできます。

---

---

HTML で説明リストを作成するには、以下のコード スニペットにアクセスしてください。

< 体 >
< ディビジョン >
< h2 > ラップトップ市場シェア h2 >
< ダウンロード >
< dt > 馬力 dt >
< DD > デスクトップ システムおよびラップトップ カテゴリでは、 30 % DD >
< dt > デル dt >
< DD > デスクトップ システムおよびラップトップ カテゴリでは、 24 % DD >
< dt > レノボ dt >
< DD > デスクトップ システムおよびラップトップ カテゴリでは、 14 % DD >
ダウンロード >
ディビジョン >
体 >

上記のコード スニペットの説明:

• • 最初は親が「 ディビジョン ” 要素が作成され、説明リスト要素や他の HTML 要素のコンテナのように機能します。

    ”。

  • 次に説明リスト「

    ”タグは記述リストの環境設定に利用されます。

  • 次に、説明名/用語「
    ”タグは、説明を追加する項目の説明を定義するために使用されます。
  • その後、説明データ「
    」タグが挿入され、説明項目に関連する説明/情報が含まれます。

コンパイル フェーズの終了後、HTML 要素は次のように Web ページに表示されます。

---

---

出力には、説明リストが生成されたことが示されています。

例 1: 単一の用語に複数の説明を割り当てる

単一の用語に対して複数の説明が含まれる説明テーブルを作成できます。これは、説明用語を説明できる意味や方法が複数ある場合に特に役立ちます。

上記のシナリオのコードを以下に示します。

< ディビジョン >
< h2 > ラップトップ市場シェア h2 >
< ダウンロード >
< dt > 馬力 dt >
< DD > デスクトップ システムおよびラップトップ カテゴリでは、 30 % の 2018年 DD >
< DD > デスクトップ システムおよびラップトップ カテゴリでは、 23 % の 2017年 DD >
< dt > デル dt >
< DD > デスクトップ システムおよびラップトップ カテゴリでは、 24 % の 2018年 DD >
< DD > デスクトップ システムおよびラップトップ カテゴリでは、 27 % の 2017年 DD >
< dt > レノボ dt >
< DD > デスクトップ システムおよびラップトップ カテゴリでは、 14 % の 2018年 と 9 % の 2017年 DD >
ダウンロード >
ディビジョン >

上記のコードでは次のようになります。

• • まず、「」を使用して説明リストを作成します。 ダウンロード ”、” dt ' と ' DD 」要素。
  • 次に、複数の「
    「」タグは単一の「」の下で使用されます。 dt ' エレメント。単一の用語に複数の説明を割り当てます。

コンパイル段階の後:

出力には、1 つの用語に対して複数の説明が追加されたことが示されています。

例 2: 単一の説明に複数の用語を割り当てる

開発者は、単一の説明データを持つ複数の説明用語で構成される説明リストを作成することもできます。これは、複数の用語が似ている場合、または同じ機能を持つ場合に特に便利です。この手法を使用すると、これらすべての用語を一度に説明できます。

< ディビジョン スタイル = 「余白：20px」 >
< h2 > ラップトップ市場シェア h2 >
< ダウンロード >
< dt > 馬力 dt >
< dt > エリートブック dt >
< dt > プロブック dt >
< DD > デスクトップ システムおよびラップトップ カテゴリでは、 30 % の 2018年 DD >
< DD > デスクトップ システムおよびラップトップ カテゴリでは、 23 % の 2017年 DD >
< dt > レノボ dt >
< DD > デスクトップ システムおよびラップトップ カテゴリでは、 14 % の 2018年 と 9 % の 2017年 DD >
ダウンロード >
ディビジョン >

上記のコードブロックでは、説明リストが作成され、複数の「

” タグは単一の” で使用されます。

' 鬼ごっこ。

コンパイルフェーズの終了後:

上のスナップショットは、複数の用語が 1 つの説明データに割り当てられていることを示しています。

結論

説明リストは、説明リストを使用して作成されます。

」タグは、リスト項目とその説明のコンテナを作成します。さらに、「

”タグは説明を行う項目名を示します。一方、「

”タグには対応する説明が格納されます。この記事では、HTML での説明リストの使用方法を説明しました。