Пример тега описания данных HTML

Введение

HTML предоставляет набор тегов, которые позволяют создавать определяющие списки, где можно определить список терминов и дать описание каждому из них. Одним из тегов, используемых в этих списках, является тег <dd> (описание данных), который используется для предоставления описания термина, представленного с использованием тега <dt>. В этом практическом занятии вы научитесь использовать тег <dd>.

Примечание: Вы можете практиковать программирование в index.html и изучить Как писать HTML в Visual Studio Code. Нажмите кнопку "Запустить в браузере" в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем можно обновить вкладку Web 8080, чтобы просмотреть веб-страницу.

Создание определяющего списка

Первым шагом является создание определяющего списка с использованием тега <dl>. В пределах этого тега вам нужно определить один или несколько терминов с использованием тега <dt>. Например, создайте определяющий список с двумя терминами: "HTML" и "CSS".

<!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