Теги dd dl dt: Теги dl, dt и dd, список описаний — Разметка текста — HTML Academy

Синтаксис:  

 
 Содержание... 
 

Пример 1:  Ниже программы иллюстрируют элемент

HTML

Выход:

Пример 2: В этом примере используется тег

HTML

Вывод:  
 

Supported Browsers:  

• Google Chrome
• Edge 12
• Internet Explorer
• Firefox 1
• Opera
• Safari

Related Articles

Tag in HTML - Scaler Topics

Обзор

Продемонстрировать вещи становится проще, если мы представим их в виде списка с некоторым описанием каждого элемента списка. Этого можно добиться с помощью списка описаний.

Описание/Определение Список похож на другие списки в HTML, но в дополнение к именам элементов списка он также содержит описание каждого элемента списка.

В нем есть две вещи: термин, представленный тегом

Тег

В этой статье мы увидим тег

Синтаксис

Тег dd требует начального тега, но конечный тег необязателен. Этот тег используется с тегом

(список описаний) и тегом

(определяет термины/имена).

Синтаксис тега dd указан ниже:

 
 

  
Имя термина...
  
Описание термина....
  
  
Имя термина...
  
Описание термина....

 

Тег

определяет список описаний. Теги

и

используются внутри тега

. Тег

содержит название термина, а тег

описывает этот термин.

Атрибуты

Тег

поддерживает как глобальные атрибуты, так и атрибуты событий.

Атрибут, специфичный для тега dd:

• nowrap: Этот атрибут принимает два значения: да и нет . Если значение равно да , то текст определения не будет переноситься и наоборот. По умолчанию значение nowrap равно , а не .

Примечание: Этот атрибут устарел , т. е. он больше не поддерживается в HTML5, но мы можем использовать некоторые свойства CSS для достижения той же функциональности.

Как использовать тег

в HTML?

Тег dd в HTML используется для описания терминов в списке описаний. Тег

всегда должен быть заключен в элемент

и должен сопровождаться тегом

вообще или другим тегом

в случае одного термина и нескольких описаний.

Как и в теге div, внутри тега

вы можете добавлять абзацы, изображения, ссылки, изображения и даже другие списки. Тег

может содержать как встроенные, так и блочные элементы.

Давайте посмотрим пример , показывающий использование тега dd в HTML.

 
 <дл>
  
HTML
  
Стандартный язык разметки для создания веб-страниц
  
  
CSS
  
Описывает, как элементы HTML должны отображаться на экране
  
  
JavaScript
  
Язык сценариев, позволяющий создавать динамически обновляемый контент
  
  
ReactJs
  
JS-библиотека для создания пользовательских интерфейсов на основе компонентов пользовательского интерфейса

Вывод:

В приведенном выше примере тег dt содержит термин описания, т. е. название языка, а тег dd содержит описание определения, т. е. описание языка. Тег dd может содержать вложенные списки. Поскольку dd является блочным элементом, мы можем включать абзацы, изображения, списки и т.  д.

HTML

Стандартный язык разметки для создания веб-страниц.

Вывод:

Пример 2: несколько терминов, одно описание

 
 

  
HTML
  
CSS
  
JavaScript
  
ReactJs
  
JS-библиотека для создания пользовательских интерфейсов на основе компонентов пользовательского интерфейса.

 

Вывод:

Пример 3: Один термин, несколько описаний

 
 

  
HTML
  <дд>
    Язык гипертекстовой разметки или HTML — это стандартный язык разметки для документов, предназначенных для отображения в веб-браузере.
  
  <дд>
     В этом могут помочь такие технологии, как каскадные таблицы стилей и языки сценариев, такие как JavaScript.
  

 

Вывод:

Пример 4: dl Внутри тега dd (вложенный)

 
 

    
HTML
    
Изучайте HTML из тем Scaler, выполнив все модули:
        <дл>
            
Модуль 1
            
Введение в HTML

            
Модуль 2
            
HTML в ядре

Модуль 3

Основы HTML

Выходные данные:

Пример 5: Тег

По умолчанию браузер имеет некоторые стили по умолчанию для каждого элемента HTML, называемые стилями пользовательского агента , так как это стили браузера по умолчанию. , поэтому они могут немного отличаться для разных браузеров. Для большинства браузеров элемент

 
 /* таблица стилей пользовательского агента */
дд {
  дисплей: блок;
  поле слева: 40px;
}
 

Поскольку тег dd является блочным элементом, он всегда начинается с новой строки по умолчанию, но мы можем изменить его, задав наши стили CSS.

CSS:

 
 дл {
  отображение: сетка;
  столбцы сетки-шаблона: максимальное содержание авто;
}

дт {
  начало столбца сетки: 1;
}

дд {
  начало столбца сетки: 2;
}
 

HTML:

 
 

  
HTML
  
Стандартный язык разметки для создания веб-страниц
  
  
CSS
  
Описывает, как элементы HTML должны отображаться на экране
  
  
JavaScript
  
Язык сценариев, позволяющий создавать динамически обновляемый контент
  
  
ReactJs
  
JS-библиотека для создания пользовательских интерфейсов на основе компонентов пользовательского интерфейса

 

Выход:

Вопросы доступности

Доступность делает веб-сайты доступными, удобными в использовании и должным образом понятными для всех, включая людей с любым типом нарушений, таких как слуховые, физические, когнитивные, зрительные или неврологические.

Помимо этого, доступность также важна для SEO и хорошего UX.

Теги

; в противном случае он будет недоступен для программ чтения с экрана.

Список определений должен соответствовать определенной иерархии . Список определений определяется с помощью тега dl, который должен содержать чередующихся пар элементов dt и dd , где тег dt идет первым, а затем тег dd . Каждый элемент dt должен иметь соответствующий элемент dd. Только элементы dt и dd могут быть записаны в список определений.

Это позволяет пользователям, использующим программы чтения с экрана, понять правильную иерархию информации, которую пытаются доставить через список.

Например, , запись кода в этой иерархии будет считаться недействительной :

 
 <тело>
HTML
Стандартный язык разметки для создания веб-страниц
CSS
Описывает, как элементы HTML должны отображаться на экране.