Основний вміст

  • <body>

Тег <dl>

Тег <dl> - Приклад та Опис

Тег <dl> використовується для створення списку визначень. Кожен список починається з контейнера <dl>, де вказується термін за допомогою тегу <dt> і його визначення за допомогою тегу <dd>.

Синтаксис

<dl>
  <dt>Термін 1</dt>
   <dd>Визначення терміна 1</dd>
  <dt>Термін 2</dt>
   <dd>Визначення терміна 2</dd>
</dl>

Закривальний тег

Обов'язковий.

Атрибути

Для цього тегу доступні універсальні атрибути та події.

Приклад

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Список визначень</title>
  <style>
   dd {
    font-style: italic; /* Курсивний шрифт */
   }
   dt {
    margin-top: 1em; /* Відступ зверху */
   }
  </style>
 </head>
 <body> 

 <dl>
  <dt>GIF</dt>
  <dd>Формат графічних файлів, широко використовується при створенні сайтів. 
   GIF використовує 8-бітовий колір та ефективно стискає однотонні кольорові області, 
   зберігаючи деталі зображення.</dd>
  <dt>JPEG</dt>
  <dd>Популярний формат графічних файлів, широко використовується при створенні 
  сайтів та зберіганні зображень. JPEG підтримує 24-бітовий колір і зберігає 
  яскравість та відтінки кольорів у фотографіях. Цей формат відомий як "втратне стиснення", 
  оскільки алгоритм JPEG вибірково відкидає дані. Метод стиснення може спотворити 
  деталь у малюнку, особливо якщо він містить текст або зображення з чіткими краями. 
  Формат JPEG не підтримує прозорість, тож при збереженні фотографії в цьому форматі, 
  прозорі пікселі заповнюються певним кольором.</dd>
 </dl>

 </body>
</html>

Результат цього прикладу показано нижче.

Списки

Часті запитання

  • Q: Як використовувати тег <dl> в HTML?

    A: Тег <dl> використовується для визначення списку означень. Він повинен містити один або більше тегів <dt> (означення терміну) та парні теги <dd> (визначення терміну).

  • Q: Які елементи можна вкладати всередину тегу <dl>?

    A: В тег <dl> можна вкладати теги <dt> (означення терміну) та <dd> (визначення терміну).

  • Q: Які стилі можна застосовувати до тегу <dl>?

    A: Тег <dl> можна стилізувати за допомогою CSS, наприклад, задавши йому колір фону, розміри шрифту тощо.

  • Q: Чим відрізняється тег <dl> від тегу <ul> або <ol>?

    A: Тег <dl> призначений для списків означень, де кожен термін (означення) має відповідне визначення. Теги <ul> та <ol> використовуються для упорядкованих та неупорядкованих списків відповідно.

  • Q: Чи можна вкладати тег <dl> всередину тегу <p>?

    A: Так, можна. Тег <dl> можна вкладати всередину тегів <p>, оскільки <dl> є блочним елементом. Однак, рекомендується використовувати його у контексті, де це логічно з точки зору семантики документа.