Списки в HTML: ul, ol, dl

ul — неупорядоченный список (маркированный)

Используйте, когда порядок не важен. Частые кейсы: пункты меню, набор характеристик, список действий «по желанию», теги, варианты без приоритета.

Пример:

<ul>
  <li>Быстрая доставка</li>
  <li>Гарантия 2 года</li>
  <li>Поддержка 24/7</li>
</ul>

Когда брать: если фразы можно переставить местами, и смысл не изменится.

Практика: в ваших задачах по статьям и каталогам ul часто ставят для «преимуществ товара» или «что входит в комплект».

ol — упорядоченный список (нумерованный)

Нужен, когда важен порядок: пошаговые инструкции, этапы, рейтинг, последовательность действий.

Пример (инструкция):

<ol>
  <li>Откройте панель администратора.</li>
  <li>Перейдите в раздел «Статьи».</li>
  <li>Нажмите «Добавить» и заполните поля.</li>
  <li>Сохраните статью.</li>
</ol>

Когда брать: любой алгоритм, где шаг 2 нельзя сделать до шага 1.

Нюанс: браузер сам проставит цифры. Не пишите «1.», «2.» вручную в тексте <li> — это ломает семантику и усложняет стилизацию.

dl — список определений (термин + описание)

Это не «список пунктов», а пары «ключ–значение»: термин и его пояснение. Подходит для характеристик, спецификаций, глоссария, FAQ (вопрос–ответ).

Пример (характеристики товара):

<dl>
  <dt>Материал</dt>
  <dd>Алюминий, анодированный</dd>
 
  <dt>Вес</dt>
  <dd>120 г</dd>
 
  <dt>Совместимость</dt>
  <dd>iOS 15+, Android 11+</dd>
</dl>

Как читать:

• <dt> — термин (definition term),
• <dd> — описание (definition description).

Когда брать: когда нужно показать «параметр — значение» без лишних таблиц. В админках и карточках товаров это удобно для блока «Характеристики».

Частые ошибки

• Делать нумерованный список через ul и вручную писать цифры. Результат: теряется семантика, стили ломаются, скринридеры не видят порядок. Решение: используйте ol.
• Использовать dl как обычный список пунктов. Если нет пар «термин–описание», не берите dl.
• Класть в <li> целые абзацы и блоки. Внутрь <li> можно класть почти что угодно, но для сложных блоков лучше сохранять структуру: заголовок, текст, вложенные списки — всё внутри <li>.
• Смешивать типы списков там, где достаточно одного. Например, «шаги инструкции» — это ol, а не ul с цифрами.

Примеры под ваши задачи

Для статьи с инструкцией

Если вы делаете статью «Как добавить статью в админке», логичнее взять ol:

<ol>
  <li>Авторизуйтесь в панели управления.</li>
  <li>Выберите «Контент → Статьи».</li>
  <li>Заполните заголовок, текст и метаданные.</li>
  <li>Укажите категорию и опубликуйте.</li>
</ol>

Для карточки товара (характеристики)

Блок «Характеристики» удобно делать через dl:

<dl>
  <dt>Артикул</dt>
  <dd>ART-1024</dd>
  <dt>Габариты</dt>
  <dd>200×150×30 мм</dd>
  <dt>Срок службы</dt>
  <dd>5 лет</dd>
</dl>

Для меню или преимуществ

Меню в шапке или «Преимущества» — это ul:

<ul class="main-menu">
  <li><a href="/">Главная</a></li>
  <li><a href="/catalog">Каталог</a></li>
  <li><a href="/contacts">Контакты</a></li>
</ul>