23.12.2023 08:32
Libiros 15 2300 Источник

Казалось бы, простая задача - сверстать список пар ключ-значение. Бери <div> и делай. Но что, если захотелось подушнить? Этим и займёмся в статье...
Рассмотрим три подхода к решению этой задачи: <div>, <dl>, <dt>, и <dd>, и <table>. Обсудим преимущества, недостатки, взглянем на примеры.
Цель - разобраться с выбором наиболее подходящего подхода для решения задачи.

Задача, дано

<Input>, принимающий ИНН организации. Стучится в дадату, возвращает данные, создает выпадающий список и даёт пользователю выбрать нужное.

Пример отображения списка пар ключ-значение
Пример отображения списка пар ключ-значение

Далее определяется несколько пар ключ-значение для каждой организации. Простой объект:

{
  companyName: "ООО "Моя оборона",
  inn: 1234567890,
  kpp: 1234567890,
  address: "Улица Пушкина дом Колотушкина"
}

Решение №1 <div>

Это самый простой и прямолинейный подход, который легко реализовать.

<div class="company">
  <div class="inn"><span>ИНН</span>: <span>1234567890</span></div>
  <div class="kpp"><span>КПП</span>: <span>1234567890</span></div>
  <div class="address"><span>Адрес</span>: <span>Улица Пушкина дом Колотушкина</span></div>
</div>

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

Однако, смотрим в документацию и видим, что <div> используется когда ни один другой элемент не подходит, элемент div используется в качестве крайней меры. В противном случае это приводит к снижению доступности для читателя. Также Согласно руководству W3C по доступности веб-контента (WCAG):

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

Выходит, данное решение не удовлетворяет принципу устойчивости (robust) WCAG 2, использованию правильной семантической верстки. Хорошо, тогда попробуем второе решение.

Решение №2 <dl> <dt> <dd>

Элементы <dl> , <dt> , <dd> предназначены для представления пар ключ-значение. Список - термин - описание могут смутить, поэтому обратимся к документации w3.org

<dl> элемент предоставляет ассоциативный список, состоящий из нуля или более групп имя-значение.
...
Группы "Имя-значение" (<dt> и <dd> соответственно) могут представлять собой термины и определения, разделы метаданных и значения, вопросы и ответы или любые другие группы данных "имя-значение"

В контексте HTML, “термин” в <dt> может быть более широко интерпретирован, чем просто академический или словарный термин. Он может обозначать любой элемент данных, который имеет связанное с ним значение. Так что использование ИНН и номера в качестве “терминов” вполне приемлемо.

<dl>
  <dt>ООО "Моя оборона"</dt>
  <dd>
    <dl>
      <dt>ИНН</dt>
      <dd>1234567890</dd>
      <dt>КПП</dt>
      <dd>1234567890</dd>
      <dt>Адрес</dt>
      <dd>Улица Пушкина дом Колотушкина</dd>
    </dl>
  </dd>
</dl>

Принцип устойчивости WCAG тоже соблюдён. А скринридер распознает эти элементы как определения, причем читая их последовательно:
Термин "ООО Моя оборона" -> термин "ИНН" -> 1234567889 -> термин "КПП" -> 1234567890 -> термин "Адрес" -> Улица Пушкина дом Колотушкина.

Стилизовать такой вариант немного сложнее, чем первое решение. Также с недавних пор группы терминов можно оборачивать в <div>. Однако, здесь возникает еще один вопрос - не табличные ли это данные? Ведь здесь есть её признаки:

Структура таблицы включает в себя две базовые части:

  1. Подлежащее — это признак, по которому данные группировали и обрабатывали.

  2. Сказуемое — это данные, которые раскрывают суть подлежащего.

Решение №3 <table>

Элемент <table> предназначен для представления табличных данных. С одной стороны, можно представить решение задачи как список таблиц вида: