Тег <li>

Тег <li> (укр. – “елемент списку”) використовується в HTML для позначення окремого елемента в списку. Він є основним будівельним блоком як нумерованих списків (<ol>), так і ненумерованих (<ul>). Тег <li> завжди використовується всередині тегів списку, позначає кожен окремий пункт або елемент у цьому списку.

В залежності від типу списка, в якому він використовується, він буде елементом ненумерованого або елементом нумерованого списку. Наприклад:

<ul>
  <li>Перший елемент ненумерованого списку</li>
  <li>Другий елемент ненумерованого списку</li>
  <li>Третій елемент ненумерованого списку</li>
</ul>

<ol>
  <li>Перший крок нумерованого списку</li>
  <li>Другий крок нумерованого списку</li>
  <li>Третій крок нумерованого списку</li>
</ol>

Атрибути

Специфічні атрибути

  • value — використовується для зміни значення номера в нумерованому списку. Це дозволяє задати конкретне значення для елемента списку, і нумерація продовжиться від цього значення. Наприклад:
<ol>
  <li>Пункт 1</li>
  <li value="10">Пункт 10</li>
  <li>Пункт 11</li>
</ol>

У цьому прикладі другий елемент матиме номер 10, а наступний — 11

  • aria-setsize — aria-атрибут, що вказує загальну кількість елементів у списку. Підвищує доступність для користувачів із вадами зору;
  • aria-posinset — атрибут, що визначає позицію елемента в списку. Підвищує доступність для користувачів із вадами зору. Наприклад:
<ul>
  <li aria-setsize="3" aria-posinset="1">Пункт 1</li>
  <li aria-setsize="3" aria-posinset="2">Пункт 2</li>
  <li aria-setsize="3" aria-posinset="3">Пункт 3</li>
</ul>

Глобальні атрибути

Найпопулярніші глобальні атрибути, які використовуються на нумерованих списках:

  • id — унікальний ідентифікатор елемента на сторінці, який можна використовувати для посилань, стилізації або JavaScript-операцій;
  • class — клас, який допомагає стилізувати або групувати елементи;
  • style — атрибут для інлайн-стилізації конкретного елемента;
  • title — текстова підказка, що з’являється при наведенні курсору на список;
  • lang — атрибут для вказання мови вмісту елементу;
  • dir — атрибут, який вказує напрямок тексту (наприклад, “ltr” — зліва направо, “rtl” — справа наліво).

Приклад використання

<ul>
  <li id="item1" class="highlight" style="color: blue;" title="Перший елемент">Пункт 1</li>
  <li>Пункт 2</li>
  <li>Пункт 3</li>
</ul>

Додаткові моменти

  • Тег <li> є парним елементом, тому його потрібно обов’язково закривати;
  • Тег <li> є важливим елементом у структурі списків і дозволяє розділяти інформацію на логічні блоки;
  • Він може використовуватися не тільки для тексту, але й для зображень, посилань або інших елементів, що дозволяє створювати складніші структури;
  • Для кращого користувацького досвіду рекомендується використовувати alt або aria атрибути, якщо елемент містить інтерактивний контент.