Списки в HTML

Список — один из самых частых элементов разметки. Навигационное меню, теги поста, шаги инструкции, глоссарий — всё это списки. В HTML есть три вида списков, и у каждого своё предназначение.

Маркированный список <ul>

Используется, когда порядок элементов не важен:

<ul>
  <li>Python</li>
  <li>FastAPI</li>
  <li>PostgreSQL</li>
  <li>Docker</li>
</ul>

Браузер по умолчанию добавляет маркеры (точки) и отступ слева. Позже CSS позволит полностью изменить внешний вид.

Нумерованный список <ol>

Используется, когда порядок важен — инструкции, шаги, рейтинги:

<ol>
  <li>Установить Python 3.12</li>
  <li>Создать виртуальное окружение</li>
  <li>Установить зависимости: <code>pip install -r requirements.txt</code></li>
  <li>Запустить сервер: <code>python manage.py runserver</code></li>
</ol>

Атрибуты <ol>:

<ol start="3" type="A">
  <li>Третий пункт обозначен буквой C</li>
  <li>Четвёртый — D</li>
</ol>

Список определений <dl>

Подходит для глоссариев, FAQ и пар «термин — описание»:

<dl>
  <dt>Корутина</dt>
  <dd>Функция, выполнение которой можно приостановить и возобновить. Объявляется через <code>async def</code>.</dd>

  <dt>Event loop</dt>
  <dd>Цикл событий — центральный механизм asyncio, управляющий выполнением корутин.</dd>

  <dt>Awaitable</dt>
  <dd>Объект, который можно использовать с оператором <code>await</code>: корутина, Task или Future.</dd>
</dl>

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

Списки можно вкладывать друг в друга — каждый вложенный список должен быть внутри <li>:

<ul>
  <li>Backend
    <ul>
      <li>Python
        <ul>
          <li>FastAPI</li>
          <li>Django</li>
        </ul>
      </li>
      <li>Go</li>
    </ul>
  </li>
  <li>Frontend
    <ul>
      <li>HTML / CSS</li>
      <li>JavaScript</li>
    </ul>
  </li>
</ul>

Не злоупотребляйте вложенностью: три уровня — разумный максимум.

Навигация как список

Навигационное меню семантически является списком ссылок. Стандартный паттерн:

<nav>
  <ul>
    <li><a href="/">Главная</a></li>
    <li><a href="/posts/">Статьи</a></li>
    <li><a href="/about.html">Обо мне</a></li>
    <li><a href="/contact.html">Контакты</a></li>
  </ul>
</nav>

CSS убирает маркеры и превращает вертикальный список в горизонтальную панель.

Стилизация маркеров через CSS

/* Убрать стандартные маркеры */
ul.tags {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 0.5rem;
}

/* Свои маркеры через ::before */
ul.checklist li {
  list-style: none;
  padding-left: 1.5rem;
  position: relative;
}

ul.checklist li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #22c55e;
}

/* Нумерованный список с кастомными числами */
ol.steps {
  list-style: none;
  counter-reset: steps-counter;
}

ol.steps li {
  counter-increment: steps-counter;
  padding-left: 2.5rem;
  position: relative;
}

ol.steps li::before {
  content: counter(steps-counter);
  position: absolute;
  left: 0;
  background: #3b82f6;
  color: white;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
}

Пример: боковая панель тегов DevBlog

<aside class="sidebar">
  <h3>Теги</h3>
  <ul class="tags">
    <li><a href="/tags/python/">Python</a></li>
    <li><a href="/tags/fastapi/">FastAPI</a></li>
    <li><a href="/tags/asyncio/">asyncio</a></li>
    <li><a href="/tags/docker/">Docker</a></li>
  </ul>

  <h3>Недавние посты</h3>
  <ol>
    <li><a href="/posts/decorators/">Декораторы в Python</a></li>
    <li><a href="/posts/asyncio-guide/">Руководство по asyncio</a></li>
    <li><a href="/posts/pydantic-v2/">Pydantic v2: что нового</a></li>
  </ol>
</aside>

Когда сомневаетесь, какой список использовать: если порядок важен — <ol>, если это пары «термин—значение» — <dl>, во всех остальных случаях — <ul>.