HTML Списки
HTML Списки дозволяють веб-розробникам групувати набір пов’язаних елементів в списках.
HTML Приклад списку
Невпорядкований список:
- Пункт
- Пункт
- Пункт
- Пункт
Впорядкований список:
- Перший пункт
- Другий пункт
- Третій пункт
- Четвертий пункт
Невпорядкований HTML Список
Невпорядкований (ненумерований) список починається з тега <ul>. Кожний елемент списку починається з тега <li>.
Елементи списку будуть помічені маркерами (маленькі чорні кола) за замовчуванням:
Невпорядкований HTML Список - оберіть маркер елемента списка
CSS властивість list-style-type використовується для визначення стиля маркера елемента списку:
| Значення | Опис |
|---|---|
| disc | Встановлює маркер елемента списка як маленьке чорне коло (за замовчуванням) |
| circle | Встановлює маркер елемента списка у вигляді маленького пустого кола |
| square | Встановлює маркер елемента списка у вигляді квадрата |
| none | Елементи списка не будуть відмічені (маркери відсутні) |
Приклад - Disc
<ul style="list-style-type:disc;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Спробуйте самі »
Приклад - Circle
<ul style="list-style-type:circle;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Спробуйте самі »
Приклад - Square
<ul style="list-style-type:square;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Спробуйте самі »
Приклад - None
<ul style="list-style-type:none;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Спробуйте самі »
Впорядкований HTML Список
Впорядкований (нумерований) список починається з тега <ol>. Кожний елемент списку починається з тега <li>.
Елементи списку будуть помічені номерами за замовчуванням:
Впорядкований HTML Список - Атрибут Type
Атрибут type тега <ol> визначає тип маркера елемента списка:
| Тип | Опис |
|---|---|
| type="1" | Елементи списка будуть пронумеровані цифрами (за замовчуванням) |
| type="A" | Елементи списка будуть пронумеровані заглавними літерами |
| type="a" | Елементи списка будуть пронумеровані рядковими літерами |
| type="I" | Елементи списка будуть пронумеровані великими римськими цифрами |
| type="i" | Елементи списка будуть пронумеровані маленькими римськими цифрами |
Заголовні (Титульні) літери:
<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Спробуйте самі »
Великі римські цифри:
<ol type="I">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Спробуйте самі »
Маленькі римські цифри:
<ol type="i">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Спробуйте самі »
HTML Списки опису
HTML також підтримує списки опису.
Список опису - це список термінів з описом кожного терміна.
Тег <dl> визначає список опису, тег <dt> визначає термін (ім’я), а тег <dd> описує кожний термін:
Приклад
<dl>
<dt>Кава</dt>
<dd>- чорний гарячий напій</dd>
<dt>Молоко</dt>
<dd>- білий холодний напій</dd>
</dl>
Спробуйте самі »
Вкладені HTML-списки
Список може бути вкладеним (списки всередині списків):
Приклад
<ul>
<li>Кава</li>
<li>Чай
<ul>
<li>Чорний чай</li>
<li>Зелений чай</li>
</ul>
</li>
<li>Молоко</li>
</ul>
Спробуйте самі »
Примітка: Елементи списку можуть містити новий список та інші елементи HTML, такі як зображення та посилання і т.д.
Підрахунок контрольного списку
За замовчуванням впорядкований список починає відлік із 1. Якщо ви хочете почати відлік із вказаного числа, ви можете використовувати атрибут start:
Горизонтальний список за допомогою CSS
HTML-списки можна стилізувати різними способами за допомогою CSS.
Один із популярних способів - це стилізувати список по горизонталі для створення меню навігації:
Приклад
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover {
background-color: #111111;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
Спробуйте самі »
Порада: Ви можете дізнатись більше про CSS в CSS Підручнику на нашому сайті W3Schools українською.
Резюме розділу
- Використовуйте HTML елемент
<ul>для визначення невпорядкованого списку - Використовуйте CSS властивість
list-style-typeдля визначення маркера елемента списку - Використовуйте HTML елемент
<ol>для визначення впорядкованого списку - Використовуйте HTML атрибут
typeдля визначення типу нумерації - Використовуйте HTML елемент
<li>для визначення елемента списку - Використовуйте HTML елемент
<dl>для визначення списку опису - Використовуйте HTML елемент
<dt>для визначення терміна опису - Використовуйте HTML елемент
<dd>для опису терміна в списку опису - Списки можуть бути вкладені в списки
- Елементи списка можуть містити інші елементи HTML
- Використовуйте CSS властивість
float:leftабоdisplay:inlineдля горизонтального відображення списку
HTML Вправи
HTML Теги списка
| Тег | Опис |
|---|---|
| <ul> | Визначає невпорядкований (ненумерований) список |
| <ol> | Визначає впорядкований (нумерований) список |
| <li> | Визначає пункти списку |
| <dl> | Визначає список опису |
| <dt> | Визначає термін в списку опису |
| <dd> | Описує термін в списку опису |
Для отримання повного списку всіх доступних HTML тегів, відвідайте HTML Довідник тегів на нашому сайті W3Schools українською.
Запитання для самоконтроля
- Для чого потрібні HTML-списки?
- Які бувають HTML-списки?
- Яким тегом визначається невпорядкований HTML-список?
- Яким тегом визначається впорядкований HTML-список?
- Яким тегом визначається кожний елемент в HTML-списку?
- Як за замовчуванням маркуються елементи невпорядкованого HTML-списку?
- Як за замовчуванням маркуються елементи впорядкованого HTML-списку?
- Що таке список опису?
- Який тег визначає список опису?
- Який тег визначає термін (ім’я) в списку опису?
- Який тег визначає опис кожного терміна в списку опису?
