HTML データ説明タグの例

はじめに

HTML は、用語のリストを定義し、それぞれに対する説明を提供できる定義リストを作成するための一連のタグを提供します。これらのリストで使用されるタグの 1 つは、<dt> タグで表される用語の説明を提供するために使用される <dd>（データ説明）タグです。この実験では、<dd> タグの使い方を学びます。

注：index.html でコーディングを練習し、Visual Studio Code で HTML を書く方法を学ぶことができます。画面右下の「Go Live」をクリックして、ポート 8080 でウェブサービスを実行します。その後、Web 8080 タブを更新して、ウェブページをプレビューできます。

定義リストの作成

最初のステップは、<dl> タグを使用して定義リストを作成することです。このタグの中で、<dt> タグを使って 1 つ以上の用語を定義する必要があります。たとえば、「HTML」と「CSS」の 2 つの用語を持つ定義リストを作成します。

<!doctype html>
<html>
  <head>
    <title>HTML Data Description Tag Example</title>
  </head>
  <body>
    <dl>
      <dt>HTML</dt>
      <dd>Description of HTML</dd>
      <dt>CSS</dt>
      <dd>Description of CSS</dd>
    </dl>
  </body>
</html>

タグの使用

既に <dt> タグを使っていくつかの用語を定義したので、<dd> タグを使って各用語の説明を提供できます。以下のように各用語の説明を追加します。

<!doctype html>
<html>
  <head>
    <title>HTML Data Description Tag Example</title>
  </head>
  <body>
    <dl>
      <dt>HTML</dt>
      <dd>
        HTML は Hyper Text Markup Language
        の略です。ウェブ上のコンテンツを作成し、構造化するために使用されます。
      </dd>
      <dt>CSS</dt>
      <dd>
        CSS は Cascading Style Sheets の略です。HTML
        要素にスタイルを付け、ウェブページを視覚的に魅力的に見せるために使用されます。
      </dd>
    </dl>
  </body>
</html>

定義リストのスタイリング

デフォルトでは、<dd> タグはブロックとして表示され、インデントされるため、用語と説明を区別しやすくなっています。ただし、CSS を使ってスタイルを調整することもできます。定義リストの外観を変更するために、次のスタイルを HTML コードに追加します。

<!doctype html>
<html>
  <head>
    <title>HTML Data Description Tag Example</title>
    <style>
      dd {
        font-style: italic;
      }
    </style>
  </head>
  <body>
    <dl>
      <dt>HTML</dt>
      <dd>
        HTML は Hyper Text Markup Language
        の略です。ウェブ上のコンテンツを作成し、構造化するために使用されます。
      </dd>
      <dt>CSS</dt>
      <dd>
        CSS は Cascading Style Sheets の略です。HTML
        要素にスタイルを付け、ウェブページを視覚的に魅力的に見せるために使用されます。
      </dd>
    </dl>
  </body>
</html>

タグ内でタグを使用する

<img> タグを使って、用語の説明に画像を追加することもできます。たとえば、HTML の説明に HTML のロゴの画像を追加してみましょう。

<!doctype html>
<html>
  <head>
    <title>HTML Data Description Tag Example</title>
    <style>
      dd {
        font-style: italic;
      }
    </style>
  </head>
  <body>
    <dl>
      <dt>HTML</dt>
      <dd>
        <img
          src="https://www.w3.org/html/logo/downloads/HTML5_Logo_512.png"
          alt="HTML5 Logo"
        />
        HTML は Hyper Text Markup Language
        の略です。ウェブ上のコンテンツを作成し、構造化するために使用されます。
      </dd>
      <dt>CSS</dt>
      <dd>
        CSS は Cascading Style Sheets の略です。HTML
        要素にスタイルを付け、ウェブページを視覚的に魅力的に見せるために使用されます。
      </dd>
    </dl>
  </body>
</html>

まとめ

<dd> タグは、定義リスト内で <dt> タグを使って定義された用語の説明を提供するために使用されます。デフォルトでは、ブロックとして表示され、インデントされるため、読みやすくなっています。CSS を使ってスタイルを調整し、<img> タグを使って画像を追加することもできます。

HTML の説明値

はじめに

定義リストの作成

タグの使用

定義リストのスタイリング

タグ内で タグを使用する

まとめ

タグ内でタグを使用する