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

Краткое содержание

• Что такое HTML-списки и когда их использовать
• Примеры кода для
  ,
  ,

  Атрибуты

  : type, start, reversed
  1. Как стилизовать буллеты через CSS
  2. Вложенные списки, рекомендации по доступности и контроль качества

  Зачем нужны списки в HTML

  Списки структурируют связанные элементы. Они улучшают читабельность, помогают навигации и передают семантику документа. Используйте списки для:

  • последовательных шагов (инструкции),
  • чек-листов и навигации,
  • пар «термин — определение».

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

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

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

  ) подходят для шагов или ранжированных элементов.

  Простая структура:

  
  
  
    
  Item 1
    
  Item 2
    
  Item 3
    
  Item 4
  

  

  Атрибуты

  :
  • type — формат счёта: “1”, “a”, “A”, “i”, “I”;
  • start — целое число, с которого начинается нумерация;
  • reversed — булево значение, инвертирует порядок.

  Примеры с атрибутами:

  
  
  
    
  Item 1
    
  Item 2
    
  Item 3
    
  Item 4
  

  

  
  
  
    
  Item 1
    
  Item 2
    
  Item 3
    
  Item 4
  

  

  
  
  
    
  Item 1
    
  Item 2
    
  Item 3
    
  Item 4
  

  

  Совет по совместимости: атрибуты type, start и reversed поддерживаются современными браузерами, но для сложной кастомизации лучше использовать CSS и JavaScript.

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

  Неупорядоченные списки (

  ) подходят, когда порядок элементов неважен: ингредиенты, пункты меню, свойства.

  Базовый пример:

  
    
  Item 1
    
  Item 2
    
  Item 3
    
  Item 4
  

  

  Раньше имелся устаревший атрибут type для

  . Сейчас используют CSS:

  

  list-style-type позволяет выбирать: disc, circle, square, none и др. Можно также подставлять изображения через list-style-image или применять псевдоэлементы ::marker и ::before для более гибкой стилизации.

  Важно для дизайнера: не используйте слишком мелкие или незаметные маркеры; контраст должен соответствовать требованиям доступности.

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

  Вложенные списки комбинируют

  и
  для представления иерархий.

  Chicken Pasta Instructions
  
    
  Boil pasta.
    
  
     Season chicken breast.
      
  
        
  salt and pepper
        
  paprika
        
  garlic powder
        
  Italian seasoning
      
    
    
  Heat olive oil in pot over medium-high heat.
    
  Add chicken breast to pan and cook for 5 minutes.
    
  Add heavy cream and parmesan cheese to empty pot.
    
  Add pasta and slice chicken to cream sauce.
  

  

  Практика: не делайте более двух уровней вложенности без явной необходимости. Глубокая вложенность ухудшает восприятие и доступность.

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

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

  ) связывает термин и его описание. Он удобен для глоссариев, 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.
    
  

  

  Используйте

  для термина и

  для разъяснения. Для FAQ можно использовать несколько

  под одним

  .

  Полезные приёмы и шаблоны

  1-line glossary:

  • : последовательность; нумерация имеет значение.
    1. : набор элементов без порядка.

       • : термин и объяснение.

       Мини-методология выбора списка (шаги):

       1. Определите, важен ли порядок? Если да —
          .
          1. Если нет, и элементы однотипны —
             .
             • Если нужно связать термин и описание —

               .

             • Подумайте о доступности и стилизации через CSS.

          Чизхит-лист (cheat sheet) для разработчика:

          • Семантика важнее визуала.
          • Используйте CSS (::marker, list-style-type) для стилизации.
          • Для сложной нумерации используйте CSS counter или JS.
          • На мобильных экранах следите за отступами и размером маркеров.

          Краткий пример CSS для кастомных маркеров:

          ul.custom {
            list-style: none;
            padding-left: 0;
          }
          ul.custom li::before {
            content: "\2022"; /* bullet */
            color: #2b7cff;
            display: inline-block;
            width: 1em;
            margin-left: -1em;
          }

          Доступность и SEO

          • Всегда используйте семантические элементы, а не просто стилизованные
            для списков.
          • Для элементов управления списком добавляйте логичные фокусные состояния (outline, :focus).
          • Для сложных видимых списков, представляющих шаги, добавьте aria-current или aria-labelledby по необходимости.
          • Поисковые системы и голосовые помощники лучше интерпретируют контент, когда он семантически структурирован.

          Важно: избегайте пустых

       2. . Пустой элемент может запутать пользователей вспомогательных технологий.

          Когда списки не подходят (контрпримеры)

          • Таблицы подходят для табличных данных, а не для перечислений.
          • Обычные абзацы лучше, если элементы не однотипны или между ними большой контент.
          • Для интерактивных контролов (компоненты с логикой) применяйте специализированные элементы и роли (role=”listbox” и др.) с осторожностью.

          Альтернативные подходы

          • CSS Grid / Flexbox для визуального представления элементов, когда семантика списка не нужна.
          • ARIA-виджеты для сложных интерактивных списков (autocomplete, combobox).
          • Микроданные/JSON-LD для структурированных данных (FAQ, HowTo), если вы хотите, чтобы поисковые системы индексировали шаги или часто задаваемые вопросы.

          Ролевая разбивка: кто за что отвечает

          • Разработчик: писать семантический HTML, обеспечивать фокус и скрипты нумерации.
          • Дизайнер: согласовать визуальные маркеры, контраст и отступы.
          • Редактор контента: выбрать правильный тип списка и проверить логическую последовательность.

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

          • Список использует семантические теги (
            ,
            ,

            ,

            ,

            ,

            ).

            Визуальное отображение соответствует дизайну (маркер, отступы, интерклиньяж).

            На мобильных и десктопах читабельность хорошая, маркеры видны.

            Проверено с экранными читалками: порядок и семантика верны.

            Модель принятия решения (Mermaid)

            flowchart TD
              A[Есть ли смысл в порядке?] -->|Да| B[Использовать 
            ]
              A -->|Нет| C{Связка термин-описание?}
              C -->|Да| D[Использовать 
            ]
              C -->|Нет| E[Использовать 
            ]

            Подведение итогов

            Списки — простой инструмент, но мощный. Правильный выбор между

            ,
            и

            улучшает структуру контента, доступность и SEO. Стилизация через CSS даёт полный контроль над визуалом, а семантика — над смыслом.

            Важно: проверяйте список на мобильных устройствах и с помощью инструментов доступности. Малые ошибки семантики могут привести к неправильному восприятию контента пользователями вспомогательных технологий.

            Сводка ключевых рекомендаций:

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

                   для пар «термин — описание».

                 • Стилизация — через CSS, семантика — через HTML.