Списки в HTML: ul, ol, dl і сучасне оформлення CSS

HTML пропонує кілька елементів для структурованих переліків: <ul> для списку без значущого порядку, <ol> для послідовності та <dl> для пар «термін — опис». Правильний вибір важливий не лише для зовнішнього вигляду: структура списку передає зміст браузеру та допоміжним технологіям.

У старих уроках оформлення маркерів часто задавали атрибутами HTML. Сьогодні зміст краще залишати в розмітці, а форму маркера, відступи та декоративні деталі переносити в CSS.

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

<ul> використовують, коли порядок пунктів не змінює зміст. Кожен елемент списку розміщується в <li>.

Наочний приклад. Три види списків нижче є справжньою HTML-розміткою, а не зображенням. Так простіше одразу побачити, чим відрізняються ul, ol і dl.

Нижче кожен із цих варіантів розібрано окремо й наведено у вигляді коду, який можна скопіювати.

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

Якщо пункти можна переставити місцями без втрати логіки, найчастіше підходить саме <ul>. Вид маркера за потреби змінюють через CSS, а застарілий атрибут type у ul використовувати не варто.

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

<ol> потрібен, коли послідовність важлива: інструкція, рейтинг, етапи процесу, нумеровані вимоги.

<ol>
  <li>Створити файл.</li>
  <li>Додати розмітку.</li>
  <li>Відкрити сторінку в браузері.</li>
</ol>

У ol є корисні атрибути start і reversed. Перший задає початкове число, другий вмикає зворотний відлік. Атрибут type допустимий, коли вид нумерації має зміст у самому документі, але для суто декоративної заміни цифр на літери краще використовувати CSS.

Список описів dl, dt і dd

<dl> призначений для груп термінів та описів. Це хороший варіант для словника, метаданих, характеристик або короткого FAQ, де кожна сутність пов’язана зі своїм поясненням.

<dl>
  <dt>HTML</dt>
  <dd>Мова розмітки вебсторінок.</dd>

  <dt>CSS</dt>
  <dd>Мова опису зовнішнього вигляду документа.</dd>
</dl>

Не варто підміняти dl звичайним ul, якщо між термінами та описами є явний змістовий зв’язок. І навпаки, список товарів або переваг не стає списком описів лише тому, що кожен пункт має одне речення пояснення.

Вкладені списки

Один список можна вкласти всередину елемента li іншого списку. Це підходить для деревоподібної структури, меню розділів або багаторівневого плану.

<ul>
  <li>Frontend
    <ul>
      <li>HTML</li>
      <li>CSS</li>
    </ul>
  </li>
  <li>Backend</li>
</ul>

Важливо вкладати дочірній ul або ol саме всередину батьківського li. Надто глибокої вкладеності краще уникати: після двох-трьох рівнів список часто стає складнішим для читання, ніж кілька окремих змістових блоків.

Як змінити маркери та нумерацію через CSS

Для оформлення використовують list-style-type, list-style-position, list-style-image і псевдоелемент ::marker. Прості варіанти виглядають так:

.square-list {
  list-style-type: square;
}

.roman-list {
  list-style-type: upper-roman;
}

.article-list li::marker {
  font-weight: 700;
}

Для декоративних завдань CSS зручніший за старі HTML-атрибути: оформлення можна змінити на всьому сайті однією правкою stylesheet, не торкаючись структури документів.

Коли потрібні start, reversed і value.

Іноді нумерація має змістове значення. Наприклад, стаття продовжує попередній список із пункту 4 або показує зворотний рейтинг. Тоді HTML-атрибути доречні.

<ol start="4">
  <li>Четвертий крок</li>
  <li>П’ятий крок</li>
</ol>

<ol reversed>
  <li>Третє місце</li>
  <li>Друге місце</li>
  <li>Перше місце</li>
</ol>

Для окремого li можна задати value, якщо лічильник має перейти до конкретного значення. Використовувати такі можливості лише заради незвичайного дизайну немає сенсу — для оформлення є CSS.

Типові помилки під час роботи зі списками.

Семантика списку зазвичай важливіша за його зовнішній вигляд. Перед публікацією корисно перевірити такі моменти:

• пункти списку справді утворюють однорідний перелік;
• для послідовності використовується ol, а не ul із цифрами, введеними вручну;
• дочірній список знаходиться всередині li;
• оформлення маркерів не задається застарілими атрибутами ul;
• текст не розбито на список лише заради візуальних галочок;
• після довгого списку є абзац, який продовжує або підсумовує думку.

Добре оформлений список пришвидшує читання, але десять списків підряд перетворюють статтю на конспект. Там, де думка потребує пояснення, краще залишити повноцінний абзац.

Підсумок

ul, ol і dl вирішують різні завдання. Спочатку вибирайте елемент за змістом, а вже потім оформлюйте його CSS. Такий підхід дає передбачувану структуру, краще масштабується й не прив’язує зміст до застарілих презентаційних атрибутів HTML.