Списки определений и значений

В предыдущей статье мы разобрали основы HTML: Основы HTML, а сегодня я предлагаю рассмотреть такую тему как списки. Списки играют важную роль в организации информации на веб-страницах, позволяя структурировать и представить данные в виде конкретных элементов различного типа. Они помогают упорядочить информацию и сделать её более доступной для читателей.

 В HTML существует несколько типов списков:

• Маркированные списки. Набор пунктов, очередность которых не важна.
• Нумерованные списки. Перечень, в котором последовательность элементов имеет значение.
• Списки определений и значений. Состоит из пар “термин/значение”, в том числе терминов и определений.

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

В заданиях ЕНТ часто можно встретить вопросы именно по какому-то из видов списка. Поэтому данную тему необходимо изучить более внимательно.

Списки определений используются для форматирования любых пар формата “имя/значение”, таких, как термины и их значения, вопросы и ответы, прочие виды понятий и связанной с ними информации. 

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

dl – Definition list, собственно сам список.

dt – Definition term, тег создающий термин.

dd – Definition description, тег задающий определение или комментарий термину.

Все теги являются парными, у них есть как открывающий тег, так и закрывающий. Давайте рассмотрим пример такого списка:

<dl>

  <dt>Информатика</dt>

  <dd>Информатика — это наука, изучающая способы обработки информации с помощью компьютеров. Она занимается анализом и хранением данных, их структурой, передачей и использованием в различных сферах деятельности.</dd>

</dl>

На примере видно, что сначала мы создаем тег <dl>, а уже внутри по очереди пишем термин между тегами <dt>,</dt> и определение к термину между <dd>,</dd>.

Допустим вы написали список определений, но вам необходимо написать еще несколько терминов и значений. Поэтому вместо создания нового списка можно просто расширить существующий, дополнив его новыми определениями в виде пары <dt> и <dd>. Такой подход может сэкономить время. Например:

<dl>

  <dt>Информатика</dt>

  <dd>Информатика — это наука, изучающая способы обработки информации с помощью компьютеров. Она занимается анализом и хранением данных, их структурой, передачей и использованием в различных сферах деятельности.</dd>

  <dt>Тег</dt>

  <dd>Тег — это ключевой элемент языка разметки, HTML.</dd>

</dl>

 И результат такого будет выглядеть вот так:

Этот формат списков похож на маркированные и нумерованные списки, но имеет некоторые отличия.

Во-первых, для создания маркированного списка, также известного как неупорядоченный, используют теги <ul> и <li>. Практически любой список примеров, имен, мыслей квалифицируются как неупорядоченный список. По умолчанию такие списки отображаются с пометкой в виде точки перед каждым элементом, делая их более наглядными и упорядоченными. Пример как создается маркированный список:

<ul>

  <li>Маршрутизатор</li>

   <li>Коммутатор</li>

   <li>Концентратор</li>

</ul>

А выглядеть он будет следующим образом:

• Маршрутизатор
• Коммутатор
• Концентратор

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

Нумерованные или упорядоченные списки действуют так же, как и маркированные, за исключением того, что они используют тег <ol>. Данные списки часто используются для записи, например, пошаговых инструкций. Вместо маркеров браузер автоматически добавляет номера перед элементами списка, поэтому вам не нужно проставлять их в исходном документе. Это делает создание списков более удобным и эффективным. Давайте рассмотрим пример нумерованного списка:

<ol>

  <li>Открыть интересующую вас статью</li>

   <li>Прочитать ее полностью</li>

   <li>Ответить на вопросы в разделе «Проверь себя»</li>

</ol>

В браузере отображается следующим образом:

1. Открыть интересующую вас статью
2. Прочитать ее полностью
3. Ответить на вопросы в разделе «Проверь себя»

По умолчанию браузер начинает нумерацию с цифры 1. Если вы хотите, чтобы список начинался не с номера 1, а с какого нибудь другого, следует указать это при помощи атрибута start. Давайте рассмотрим таблицу где все наглядно показано.

Здесь можно увидеть одно отличие списка определений от нумерованного и маркированного. Заключается оно в том, что никакой из тегов в списке определений и значений не имеет атрибутов.

Все три типа списков обладают общим свойством — возможность создания вложенных списков любого уровня сложности. Уникальность заключается в том, что вложенные списки могут быть составлены как из элементов одного типа, так и из элементов разных типов, что позволяет создавать более гибкие и разнообразные структуры данных. Например, следующий пример демонстрирует структуру маркированного списка, вложенного в список определений.

<ul>

  <li>

    Сетевые устройства

    <dl>

      <dt>Маршрутизатор</dt>

      <dd>способен анализировать структуру сети и находить оптимальный путь для передачи данных.</dd>

      <dt>Коммутатор</dt>

      <dd>служит точкой подключения для устройств через порты, что позволяет создать сеть.</dd>

    </dl>

  </li>

  <li>Мультимедийные устройства</li>

</ul>

В браузере отображается это так:

Вывод

В данной статье были рассмотрены основные принципы использования списков определений и значений в HTML. Этот вид списков предоставляет удобный способ организации информации, связанной с определениями и терминами. Мы выяснили, что списки определений состоят из пар термин-значение и помогают структурировать контент страницы. Благодаря использованию списков определений и значений можно быстро и легко усвоить представленную информацию, что делает ее более понятной и доступной.

Фактчек

• Списки определений и значений используются для форматирования любого типа пар формата “имя/значение”.
• Все списки по умолчанию представляются в блочном формате, то есть они занимают всю доступную горизонтальную ширину и начинаются с новой строки.
• Тройка тегов <dl>, <dt>, <dd>, предназначенные для создания списка определений.

Задания для самопроверки:

Задание 1

Выбери с помощью какого тега можно создать список определений.

1. <ul>
2. <dd>
3. <ol>
4. <dl>

Задание 2

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

1. Теги с списке определений не имеют атрибутов.
2. Список определений не может содержать вложенные списки.
3. В списке определений все теги одиночные.
4. Список определений не может быть вложенным в другие списки.

Задание 3

Для чего используют списки определений и значений?

1. Для описания многоуровневых иерархий в веб-документах.
2. Для записи пошаговых инструкций.
3. Для записи списка продуктов, мыслей, имен.
4. Для записи и форматирования терминов и из значений.

Ответы: 1 – 4; 2 – 1; 3 – 4.