Основні моменти
- Списки HTML є ключовими для структурування та відображення інформації на вебсторінці. Існують три основні типи: нумеровані, марковані та списки визначень.
- Нумеровані списки застосовують цифри чи інші символи для впорядкування елементів. Атрибут “type” дозволяє налаштувати вид нумерації, а атрибути “start” та “reversed” змінюють початкову позицію та напрямок нумерації.
- Марковані списки об’єднують елементи без конкретного порядку. Вигляд маркера можна персоналізувати за допомогою CSS.
Списки HTML є важливим інструментом для організації будь-яких згрупованих даних на вебсайті. Незалежно від того, чи потрібно вам створити меню, впорядкувати товари за знижкою або подати складну інформацію у доступній формі, HTML списки допоможуть вам з цим.
У веб-розробці використовуються три основні типи HTML списків, кожен з яких має свою мету.
1. Нумерований список
Нумерований список HTML дозволяє об’єднати групу пов’язаних елементів у визначеному порядку. Щоб створити такий список, використовується тег <ol>. Всередині <ol> розміщуються окремі елементи списку, які позначаються тегом <li>. Кожен <li> представляє окремий пункт у списку.
<ol>
<li>Пункт 1</li>
<li>Пункт 2</li>
<li>Пункт 3</li>
<li>Пункт 4</li>
</ol>
Цей код відобразиться на сторінці як:
Зверніть увагу, що за замовчуванням нумерація списку відбувається цифрами. Це можна змінити за допомогою атрибута “type”. Він дозволяє обрати тип нумерації: великі чи малі літери латинського алфавіту, цифри або римські цифри (великі чи малі).
<ol type="a">
<li>Пункт 1</li>
<li>Пункт 2</li>
<li>Пункт 3</li>
<li>Пункт 4</li>
</ol>
Додавання атрибута “type” до тегу <ol> змінить вигляд списку на:
Крім атрибута “type”, тег <ol> має ще два корисні атрибути: “start” і “reversed”.
Атрибут “start” дозволяє розпочати нумерацію з будь-якого числа. Наприклад, “start=”3″” у тегу <ol> почне нумерацію з цифри 3, якщо не вказано інший тип. Якщо задано “type=”a”” чи “type=”I””, то нумерація почнеться з літери “c” або римської цифри “III” відповідно.
<ol type="I" start="3">
<li>Пункт 1</li>
<li>Пункт 2</li>
<li>Пункт 3</li>
<li>Пункт 4</li>
</ol>
Код вище відобразиться так:
Атрибут “reversed” змінює порядок нумерації на зворотний. Він приймає булеве значення, за замовчуванням – “false”.
<ol reversed="true">
<li>Пункт 1</li>
<li>Пункт 2</li>
<li>Пункт 3</li>
<li>Пункт 4</li>
</ol>
Результат у браузері буде таким:
2. Маркований список
Маркований список призначений для об’єднання елементів, порядок яких не має значення. За замовчуванням браузер використовує маркер для позначення кожного елемента.
Для створення маркованого списку використовується тег <ul> як батьківський елемент і тег <li> для кожного пункту списку:
<ul>
<li>Пункт 1</li>
<li>Пункт 2</li>
<li>Пункт 3</li>
<li>Пункт 4</li>
</ul>
Цей код створить наступний вигляд:
Типовим стилем маркера для маркованого списку є диск. Раніше для зміни стилю маркера використовували атрибут “type”, але зараз він застарілий. Рекомендованим способом є використання CSS властивості “list-style-type”.
<style>
ul { list-style-type: square; }
</style>
Наведений вище код змінить відображення списку на:
CSS властивість “list-style-type” надає великий вибір стилів маркерів, включаючи кола, зображення, іконки чи символи. Завдяки можливості зміни розміщення елементів списку за допомогою CSS, марковані списки можна використовувати навіть для створення панелей навігації.
Вкладені списки
Вкладений список – це список, який є частиною іншого списку. Ви можете створювати вкладені списки, використовуючи комбінацію нумерованих та маркованих елементів. Така структура допомагає представити складну ієрархічну інформацію.
<h3>Інструкція приготування пасти з куркою</h3>
<ol>
<li>Відварити пасту.</li>
<li>
Приправити куряче філе.
<ul>
<li>сіль та перець</li>
<li>паприка</li>
<li>часниковий порошок</li>
<li>італійські трави</li>
</ul>
</li>
<li>Розігріти оливкову олію на середньому вогні.</li>
<li>Додати куряче філе та смажити 5 хвилин.</li>
<li>В порожню каструлю додати вершки та пармезан.</li>
<li>До соусу додати пасту та нарізану курку.</li>
</ol>
Цей код відобразиться так:
3. Список визначень
Список визначень дозволяє створити перелік термінів і пов’язаних з ними пояснень. Для створення списку визначень використовується тег <dl>, всередині якого розміщуються пари елементів <dt> (термін) та <dd> (опис терміна).
<h3>Популярні ноутбуки</h3>
<dl>
<dt>MacBook Pro</dt>
<dd>
Забезпечує до 22 годин автономної роботи, має покращену камеру та клавіатуру Magic Keyboard з Touch ID.
</dd>
<dt>MSI GS76 Stealth</dt>
<dd>
Потужний ігровий ноутбук з покращеною графікою та налаштовуваними клавішами.
</dd>
</dl>
Наведений вище код відобразиться у браузері як:
Використовуйте відповідний список HTML для організації контенту
Вибір типу HTML-списку для веб-проєкту залежить від того, який контент ви хочете представити своїм користувачам. Наприклад, якщо вам потрібен послідовний список, наприклад, інструкція з приготування страви, тоді нумерований список буде оптимальним вибором.
З іншого боку, якщо вам потрібно згрупувати пов’язану інформацію, яка не потребує певного порядку (наприклад, список справ), тоді кращим варіантом буде маркований список. А для створення глосарія чи списку поширених запитань найкраще підійде список визначень.