Гид по технологиям

HTML‑списки: упорядоченные, неупорядоченные и описательные

• 5 min read • HTML • Обновлено 30 Dec 2025
HTML‑списки: ol, ul и dl — когда применять
HTML‑списки: ol, ul и dl — когда применять

Кратко

HTML‑списки — базовый инструмент для структурирования связанного контента на странице: шаги, меню, каталоги и словари. В статье объяснено, когда использовать упорядоченный, неупорядоченный и описательный списки, какие атрибуты и CSS пригодятся, а также приведены практические советы, примеры, подсказки и чек‑листы для разработчиков, дизайнеров и авторов контента.

Пример кода HTML‑списка

Введение

Списки в HTML служат для группировки связанных элементов и улучшения читабельности. Правильно выбранный тип списка помогает пользователю понять структуру информации: последовательность, равнозначность элементов или пары «термин — описание». Тут мы разберём синтаксис, атрибуты, практические случаи и приёмы стилизации.

Важно: однотипные элементы в интерфейсе (навигация, шаги, набор опций) обычно оформляют как списки — это повышает доступность и упрощает поддержку.

1. Упорядоченный список

Упорядоченный список (ordered list) используется когда важна последовательность элементов: шаги инструкции, ранжирование, приоритеты.

Короткое определение:

    — контейнер,
  1. — элемент списка.

    Пример базовой разметки:

    


      
  
    1. Item 1
      2. 
  
    2. Item 2
      3. 
  
    3. Item 3
      4. 
  
    4. Item 4
      5.

    Вывод упорядоченного списка по умолчанию

    Атрибуты тега

      :

      • type — меняет маркеры: “1” (числа), “a” (строчные буквы), “A” (заглавные буквы), “i” (строчные римские), “I” (заглавные римские). Пример:
      


        
  
      1. Item 1
        2. 
  
      2. Item 2
        3. 
  
      3. Item 3
        4. 
  
      4. Item 4
        5.

      Упорядоченный список с буквенными маркерами

      • start — задаёт начальное значение счётчика. Можно начать с любого числа или позиции. Если type=”a” и start=”3”, то нумерация начнётся с «c».
      


        
  
      1. Item 1
        2. 
  
      2. Item 2
        3. 
  
      3. Item 3
        4. 
  
      4. Item 4
        5.

      Упорядоченный список со start

      • reversed — булево значение, инвертирует порядок отображения (по умолчанию false). В HTML можно указать reversed или reversed=”true”.
      


        
  
      1. Item 1
        2. 
  
      2. Item 2
        3. 
  
      3. Item 3
        4. 
  
      4. Item 4
        5.

      Упорядоченный список с обратным порядком

      Советы по использованию упорядоченных списков:

      • Используйте для инструкций, рецептов, задач по шагам и любых последовательностей, где порядок имеет значение.
      • Для сложных нумераций (1.1, 1.2) комбинируйте вложенные списки и CSS счётчики.
      • Для доступности добавляйте явные заголовки перед списком и описательный контекст.

      2. Неупорядоченный список

      Неупорядоченный список (unordered list) удобен, когда элементы эквивалентны и порядок не важен: чек‑листы, перечни характеристик, меню.

      Пример базовой разметки:

        
  
      • Item 1
        • 
  
      • Item 2
        • 
  
      • Item 3
        • 
  
      • Item 4
        •

      Вывод неупорядоченного списка по умолчанию

      Ранее в HTML существовал атрибут type для

        , но он устарел. Сейчас внешний вид маркеров контролируют с помощью CSS — свойство list-style-type:

        Неупорядоченный список с квадратными маркерами

        Варианты стилизации:

        • list-style-type: disc|circle|square|none|decimal etc.
        • list-style-image: url(‘icon.svg’) для использования изображения в качестве маркера.
        • Комбинации с display:flex и псевдоэлементами (::before) для сложной вёрстки навигаций.

        Когда использовать ul:

        • Перечни особенностей товара.
        • Блоки ссылок в сайдбаре или футере (часто семантически и с точки зрения доступности стоит использовать nav > ul).
        • Чек‑листы (если важен порядок, используйте ol).

        Вложенные списки

        Вложенный список — это список внутри элемента

      • другого списка. Их используют для иерархий, группировок и составных инструкций.

        Chicken Pasta Instructions
        

          
  
        1. Boil pasta.
          2. 
  
        2. 
    Season chicken breast.
    
            
      
          • salt and pepper
            • 
      
          • paprika
            • 
      
          • garlic powder
            • 
      
          • Italian seasoning
            • 
    
          
  
          3. 
  
        3. Heat olive oil in pot over medium-high heat.
          4. 
  
        4. Add chicken breast to pan and cook for 5 minutes.
          5. 
  
        5. Add heavy cream and parmesan cheese to empty pot.
          6. 
  
        6. Add pasta and slice chicken to cream sauce.
          7.

        Вложенный список с инструкцией по приготовлению пасты

        Практические заметки по вложенным спискам:

        • Старайтесь не делать глубоко вложенные структуры (больше 3 уровней) — это ухудшает восприятие и адаптивность.
        • Для сложных многоуровневых меню используйте ARIA‑атрибуты и клавиатурную навигацию.

        3. Описательный список

        Описательный список (description list) — пара термин/описание. Подходит для глоссариев, FAQ, характеристики товара.

        Короткая семантика:

        — контейнер, внутри — пары
        (термин) и
        (описание).

        Popular Laptops
        

        
  
        MacBook Pro
        
  
        
    Provides up to 22 hours of battery life,
    has an advanced camera, and a magic keyboard with touch ID.
  
        

  
        MSI GS76 Stealth
        
  
        
    A powerful gaming laptop with supercharged graphics and customized keys.

        Описательный список: термин и описание

        Где использовать dl:

        • Списки терминов и определений (словарь, глоссарий).
        • FAQ: вопрос — ответ (вместо заголовка + абзаца можно применить dt/dd).
        • Табличные пары «поле — значение» в случаях, когда семантика не табличная.

        Когда какой список выбрать — краткие правила

        • Если важен порядок — выбирайте
            .
          1. Если порядок не важен —
              .
            • Для пар «термин — значение» —
              .
            • Если нужна сложная визуальная разметка (иконки, карточки), используйте списки как семантическую основу и оформляйте через CSS.

            Практическое руководство и подсказки (Cheat‑sheet)

            Краткая шпаргалка по атрибутам и CSS:

              • : type, start, reversed
                1. : list-style-type управляется через CSS
                • Общие CSS‑хиты:
                  • list-style-type: none (убрать маркеры)
                  • padding-left / margin-left — контролировать отступы
                  • list-style-image: url() — изображение в качестве маркера
                  • counter-reset / counter-increment — для кастомной нумерации
                  • display:flex на
                  • для горизонтальных списков (например, меню)

                Пример кастомной нумерации через CSS:

                ol.custom-counter {
  counter-reset: section;
}
ol.custom-counter > li {
  counter-increment: section;
  list-style: none;
}
ol.custom-counter > li::before {
  content: counter(section) ". ";
  font-weight: bold;
  margin-right: 0.5rem;
}

                Альтернативные подходы и когда списки не подходят

                • Таблица () лучше когда вы представляете таблично организованные данные с выравниванием колонок и заголовками столбцов.
                • Карточки/div: если элементы имеют сложную, не последовательную структуру с множеством вложенных блоков и разной семантикой, карточный макет на div может быть уместнее.
                • Компонентная разметка (React/Vue): если требуется динамическая логика рендеринга, виртуализация или сложная сортировка/фильтрация.

                  • Контрпримеры (когда списки дадут сбой):

                  • Когда нужен выбор нескольких полей с колоночной структурой и сортировкой — лучше table.
                  • Когда элементы не однотипны и не повторяются — список может ввести в заблуждение.
                  • Для визуального расположения элементов в произвольной сетке списки чаще всего усложняют вёрстку.

                  Ментальные модели и эвристики

                  • «Семантика прежде чем стиль» — начните с подходящего семантического тега (
                      ,
                        ,
                        ), затем стилизуйте.
                      • «Один уровень ответственности» — каждый
                      • должен представлять один смысловой элемент.
                      • «Максимум три уровня вложенности» — глубже трудно читать и тестировать.

                      Роли и чек‑листы

                      Разработчик:

                      • Проверить семантику и валидность HTML.
                      • Убедиться в правильных отступах и стилизации через CSS.
                      • Добавить ARIA и клавиатурную навигацию для интерактивных списков.

                      Дизайнер:

                      • Уточнить визуальные маркеры (иконка, цвет, расстояния).
                      • Предусмотреть состояния hover/focus/active для элементов меню.
                      • Убедиться, что читаемость на мобильных разрешениях.

                      Контент‑менеджер:

                      • Подготовить короткие и однородные элементы списка.
                      • Выбрать подходящий тип списка для контекста.
                      • Проверить заголовок и предисловие перед списком для доступности.

                      Примеры использования и шаблоны

                      1. Шаблон инструкции (ol):
                      Как настроить X
                      

                        
  
                      1. Скачайте архив и распакуйте.
                        2. 
  
                      2. Установите зависимости.
                        3. 
  
                      3. Запустите сборку и проверьте в браузере.
                        4.
                      1. Шаблон перечня характеристик (ul):
                        
  
                      • Время работы до 10 часов
                        • 
  
                      • Поддержка беспроводной зарядки
                        • 
  
                      • Гарантия 2 года
                        •
                      1. FAQ с dl:
                      
  
                      Как вернуть товар?
                      
  
                      Свяжитесь с поддержкой в течение 14 дней и следуйте инструкции.
                      
  
                      Есть ли гарантия?
                      
  
                      Да, 24 месяца с момента покупки.

                      Критерии приёмки