HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLの定義リストで用語の開始を定義するには？（dtタグの使い方）

HTMLの<dt>タグは、定義リスト（記述リスト）内において用語の開始を定義するために使用します。定義リストは通常のリストと似ていますが、各項目が「用語」と「その説明」の2つの要素で構成されている点が大きな特徴です。

定義リストを構成する3つのタグ

定義リストは、以下の3つのタグを組み合わせて作成します。

  • <dl> … 定義リスト全体を囲むコンテナ要素
  • <dt> … 定義対象となる用語（Definition Term）
  • <dd> … 用語に対する説明や定義（Definition Description）

コード例

次のコードを実行すると、<dt>タグを使って定義リスト内の用語の開始を定義する方法を確認できます。

<!DOCTYPE html>
<html>
   <head>
      <title>HTML dtタグ</title>
   </head>
   <body>
      <dl>
         <dt>定義リスト</dt>
         <dd>用語とその定義・説明をまとめたリスト。</dd>
         <dt>JAVA</dt>
         <dd>Javaプログラミング言語のチュートリアル。</dd>
         <dt>Android</dt>
         <dd>Android OSに関するチュートリアル。</dd>
      </dl>
   </body>
</html>

表示結果のポイント

このコードをブラウザで表示すると、<dt>でマークアップした用語（「定義リスト」「JAVA」「Android」）が強調され、それぞれの直下に<dd>で記述した説明文がインデントされて表示されます。

なお、<dt>タグは1つの<dl>の中に複数配置できるため、用語と説明を好きな数だけ組み合わせられます。また、1つの用語（<dt>）に対して複数の説明（<dd>）を対応させることも可能です。用語集やFAQ、メタデータの表示など、さまざまな場面で活用できる便利な構成なので、ぜひ覚えておきましょう。

  1. HTMLのrequired属性とは？フォームの必須入力チェックを実装する方法

    HTMLのrequired属性は、フォーム送信前にその要素（フィールド）への入力が必須であることを指定するための属性です。この属性が設定されたフィールドが空のまま送信ボタンがクリックされると、ブラウザは自動的に「このフィールドに入力してください（Please fill out this field）」というエラーメッセージを表示し、フォームの送信は失敗します。 JavaScriptを使わずに、HTMLだけで簡単なバリデーション（入力チェック）を実現できるのが大きな特徴です。 required属性を使用できる要素 required属性は、以下の3つのフォーム部品に対して使用できます。 <

  2. HTMLのlist属性とは？datalist要素で入力候補を表示する方法を解説

    HTMLのlist属性とはHTMLでは、<datalist>要素を使用して、あらかじめ定義された選択肢のリストを作成できます。このリストは<input>要素（入力欄）に対して適用され、ユーザーが文字を入力すると、定義済みの選択肢が候補として自動的に表示されます。<input>要素のlist属性は、対応する<datalist>要素のidを参照することで、入力欄と選択肢リストを関連付けます。このlist属性は、HTML5で新たに導入された機能です。list属性の基本的な使い方list属性を使うには、以下の2つのステップを行います。<datali