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

Введение

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

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

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/MultimediaandGraphicsGroup(["Multimedia and Graphics"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/TextContentandFormattingGroup(["Text Content and Formatting"]) html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/TextContentandFormattingGroup -.-> html/lists_desc("Lists and Descriptions") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") html/MultimediaandGraphicsGroup -.-> html/multimedia("Multimedia Elements") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") subgraph Lab Skills html/basic_elems -.-> lab-70734{{"Значение описания HTML"}} html/head_elems -.-> lab-70734{{"Значение описания HTML"}} html/lists_desc -.-> lab-70734{{"Значение описания HTML"}} html/doc_flow -.-> lab-70734{{"Значение описания HTML"}} html/multimedia -.-> lab-70734{{"Значение описания HTML"}} html/inter_elems -.-> lab-70734{{"Значение описания HTML"}} end

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

Первым шагом является создание определяющего списка с использованием тега <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>

Использование тега `<dd>`

Теперь, когда вы определили некоторые термины с использованием тега <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>` внутри тега `<dd>`

Вы также можете добавить изображение в описание термина с использованием тега <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