Тег <ul>
Тег <ul> (укр. – “ненумерований список”) в HTML використовується для створення ненумерованих (маркерованих) списків. Це список елементів, де кожен пункт відображається з маркером (точкою, кружечком або іншим символом), але без числової нумерації.
Тег <ul> обов’язково містить вкладені елементи <li> (елементи списку), які представляють окремі пункти в списку. Кожен елемент <li> є рядковим елементом і може містити текст, зображення, посилання або навіть інші списки. Наприклад:
<ul>
<li>Перший елемент списку</li>
<li>Другий елемент списку</li>
<li>Третій елемент списку</li>
</ul>У цьому прикладі браузер автоматично відобразить кожен пункт списку з відповідним маркером.
HTML дозволяє створювати вкладені списки всередині <ul>, що дозволяє створювати структуру підсписків:
<ul>
<li>Автор: Джордж Орвелл</li>
<li>Автор: Джек Лондон
<ul>
<li>Книга: Поклик предків</li>
<li>Книга: Біла Ікло</li>
</ul>
</li>
<li>Автор: Ернест Хемінгуей</li>
</ul>Атрибути
Специфічні атрибути
- type — визначає тип маркера для списку. За замовчуванням використовується маркер у вигляді точок, але також є інші значення:
- circle — кружечок;
- square — квадрат;
- disc (за замовчуванням) — точка.
Наприклад:
<ul type="square">
<li>Пункт із квадратним маркером</li>
<li>Ще один пункт</li>
</ul>Хоча і є можливість визначати тип маркеру для списку через атрибут type, кращою практикою вважається робити це через CSS.
Глобальні атрибути
Найпопулярніші глобальні атрибути, які використовуються на ненумерованих списках:
- id — унікальний ідентифікатор елемента на сторінці, який можна використовувати для посилань, стилізації або JavaScript-операцій;
- class — клас, який допомагає стилізувати або групувати елементи;
- style — атрибут для інлайн-стилізації конкретного елемента;
- title — текстова підказка, що з’являється при наведенні курсору на список;
- lang — атрибут для вказання мови вмісту елементу;
- dir — атрибут, який вказує напрямок тексту (наприклад, “ltr” — зліва направо, “rtl” — справа наліво).
Приклад використання
<ul id="my-list" class="custom-list" style="color: blue;" title="Мій список" lang="uk" dir="ltr">
<li>Пункт один</li>
<li>Пункт два</li>
</ul>Додаткові моменти
- Тег
<ul>є парним елементом, тому його потрібно обов’язково закривати; - Вкладеними елементами у списках можуть бути тільки елементи
<li>, які утворюють підсписки або додаткові рівні структури; - Списки
<ul>часто використовуються для відображення навігаційних меню, структурованих даних або для оформлення контенту, що має бути розбитий на пункти; - За допомогою CSS можна легко змінити вигляд маркерів, їх тип, відступи та інші візуальні аспекти списку;
- Використовуйте списки для логічної організації інформації на сторінці, де порядок елементів не є важливим (на відміну від нумерованого списку
<ol>).
