Webエンジニア向けプログラミング解説動画をYouTubeで配信中!
▶ チャンネル登録はこちら

【HTML Living Standard】dd要素の使い方

dd要素の使い方について、初心者にもわかりやすく解説します。

作成日: 更新日:

基本的な使い方

ddオブジェクトは定義リスト(<dl>要素)内で、定義語(<dt>要素)に対する説明や記述を表すオブジェクトです。この要素は、Webページ上で用語とその定義、質問とその回答、商品名とその特徴など、関連する情報のペアを構造的に表現するために不可欠です。<dl>要素は定義リスト全体を囲み、その中に<dt>要素で定義される用語(または名前)、そしてdd要素でその用語に対する説明を配置します。

具体的には、<dt>用語</dt>の後に<dd>その用語の説明</dd>という形で使用され、各dd要素は直前に登場する<dt>要素、または複数の<dt>要素に対応する詳細な情報を提供します。これにより、コンテンツの意味論的な構造が明確になり、ブラウザや検索エンジン、スクリーンリーダーなどの支援技術がリストの内容を正確に解釈できるようになります。例えば、ウェブサイトのよくある質問(FAQ)セクションで、質問を<dt>で、その回答をddでマークアップすることで、情報が整理され、ユーザーにとって理解しやすいだけでなく、アクセシビリティも向上します。dd要素は単なる見た目のインデントのためではなく、コンテンツの論理的な関係性を示すために使われるべきです。正しいセマンティックなマークアップを適用することで、ウェブページの品質とユーザーエクスペリエンスを高めることができます。

公式リファレンス: <dd>: The Description Details element

構文(syntax)

1<dl>
2  <dt>用語</dt>
3  <dd>用語の説明です。</dd>
4</dl>

引数(parameters)

引数なし

引数はありません

戻り値(return)

戻り値なし

戻り値はありません

関連コンテンツ