Списком називається взаємопов'язаний набір окремих фраз або пропозицій, які починаються з маркера або цифри. Списки надають можливість упорядкувати і систематизувати різні дані і представити їх в наочному і зручному для користувача вигляді.
Будь-який список являє собою контейнер <ul>, який встановлює маркований список, або <ol>, що визначає список нумерований. Кожен елемент списку повинен починатися з тега <li>.
Маркований список
Маркований список визначається тим, що перед кожним елементом списку додається невеликий маркер, зазвичай у вигляді закрашеного кружка. Сам список формується за допомогою контейнера <ul>, а кожен пункт списку починається з тега <li>, як показано нижче.
See the Pen
NWPpKqy by Sofiia (@sofiia19)
on CodePen.
У списку неодмінно повинен бути присутнім кінцевий тег </ ul>, інакше виникне помилка. Кінцевий тег </ li> хоча і не обов'язковий, але радимо завжди його додавати, щоб чітко розділяти елементи списку.
У прикладі 1 наведено код HTML для додавання маркованого списку на веб-сторінці.
Приклад 1. Створення маркованого списку
See the Pen
BaypeOP by persifal17 (@)
on CodePen.
Зверніть увагу на відступи зверху, знизу і зліва від списку. Такі відступи додаються автоматично.
Вигляд маркерів може не сильно відрізнятися в різних браузерах, а також при зміні шрифту і розміру тексту.
Приклад 2. Вкладені Списки
See the Pen
BaypeOP by persifal17 (@persifal17)
on CodePen.
Нумерований список
Нумеровані списки є набором елементів з їх порядковими номерами. Вид і тип нумерації залежить від атрибутів тега <ol>, який і застосовується для створення списку. Кожен пункт нумерованого списку позначається тегом <li>, як показано нижче.
See the Pen
BaypeOP by persifal17 (@persifal17)
on CodePen.
Якщо не вказувати жодних додаткових атрибутів і просто написати тег <ol>, то за замовчуванням застосовується список з арабськими числами (1, 2, 3, ...), як показано в прикладі 3.
Приклад 3. Створення нумерованого списку
See the Pen
BaypeOP by persifal17 (persifal17/a>)
on CodePen.
Зауважте, що в нумерованому списку також додаються автоматичні відступи зверху, знизу і зліва від тексту.
Як нумерують елементів можуть виступати наступні значення:
- арабські числа (1, 2, 3, ...);
- великі латинські букви (A, B, C, ...);
- малі латинські букви (a, b, c, ...);
- великі римські числа (I, II, III, ...);
- малі римські числа (i, ii, iii, ...).
Для вказівки типу нумерованого списку застосовується атрибут type тега <ol>.
Щоб почати список з певного значення, використовується атрибут start тега <ol>. При цьому не має значення, який тип списку встановлений за допомогою type, атрибут start однаково працює і з римськими і з арабськими числами. У прикладі 4 показано створення списку з використанням римських цифр в верхньому регістрі, що починаються з восьми.
Приклад 4. Нумерація списку
See the Pen
BaypeOP by persifal17 (@persifal17)
on CodePen.
Список визначень
Список визначень складається з двох елементів - терміна і його визначення. Сам список задається за допомогою контейнера <dl>, термін - тегом <dt>, а його визначення - за допомогою тега <dd>. Вкладення тегів для створення списку визначень продемонстровано в прикладі 5.
Приклад 5. Загальна структура списку визначень
See the Pen
BaypeOP by persifal17 (@persifal17)
on CodePen.
Список визначень добре підходить для розшифровки термінів, створення глосарію, словника, довідника і т.д. У прикладі 6 показано одне з можливих використань цього виду списку.
Приклад 6. Створення списку визначень
See the Pen
BaypeOP by persifal17 (@persifal17)
on CodePen.
Як видно на зображенні, текст терміна притискається до лівого краю вікна браузера, а його визначення зсувається вправо.