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

HTMLで定義用語を追加するには？dtタグの使い方を解説

定義リスト（記述リスト）は、他のリストとよく似ていますが、各項目に「用語」と「その説明」という2つの要素がセットで含まれる点が特徴です。HTMLでは、<dt>タグを使用することで、定義リスト内における用語の始まりを定義できます。

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

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

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

使用例

次のコードを実行すると、HTMLで定義用語を追加する方法を実際に確認できます。

<!DOCTYPE html>
<html>
   <head>
      <title>HTML dt Tag</title>
   </head>
   <body>
      <dl>
         <dt>Understanding Definition List</dt>
         <dd>A list of terms and their definitions/descriptions.</dd>
         <dt>JAVA</dt>
         <dd>Tutorial on JAVA Programming Language.</dd>
         <dt>Android</dt>
         <dd>Tutorial on Android Operating System.</dd>
      </dl>
   </body>
</html>

ポイント

<dt>タグで用語を指定し、その直後に<dd>タグで対応する説明を記述するのが基本の構成です。ブラウザ上では、用語と説明がインデント付きで見やすく表示されます。用語集やFAQ、仕様書など、言葉とその意味を対にして示したい場面で活用すると効果的です。

  1. HTMLで順序付きリスト（番号付きリスト）を作成する方法

    HTMLで順序付きリスト（番号付きリスト）を作成するには、<ol>タグを使用します。順序付きリストは<ol>タグから開始し、個々のリスト項目は<li>タグで定義します。各項目には自動的にマーカーが付与され、その種類は「数字」「アルファベット」「ローマ数字」などから選択できます。何も指定しない場合のデフォルトは「数字」です。サンプルコード以下のコードを実行すると、HTMLでの順序付きリストの使い方を確認できます。<!DOCTYPE html> <html>    <body>    

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

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