Пошук уроків, статей та іншого контенту
Навчитеся створювати марковані, нумеровані та вкладені списки за допомогою ul, ol і li.
Список — це набір пов’язаних між собою пунктів. В HTML списки допомагають правильно структурувати інформацію:
перелік продуктів;
список кроків інструкції;
навігаційне меню;
список характеристик товару.
Для створення списків використовують три основні елементи:
<ul> — маркований список;
<ol> — нумерований список;
<li> — окремий пункт списку.
Елемент <li> завжди розміщують усередині <ul> або <ol>.
Маркований список створюють за допомогою елемента <ul>. Браузер автоматично додає маркер перед кожним пунктом, зазвичай у вигляді кружечка.
<h2>Список покупок</h2>
<ul>
<li>Хліб</li>
<li>Молоко</li>
<li>Яблука</li>
</ul>Результат:
Хліб
Молоко
Яблука
Кожен окремий пункт записують між відкривальним і закривальним тегами <li>:
<li>Хліб</li>Нумерований список створюють за допомогою елемента <ol>. Браузер автоматично нумерує його пункти.
Такий список доречний, коли порядок пунктів має значення:
<h2>Як приготувати чай</h2>
<ol>
<li>Закип’ятіть воду.</li>
<li>Покладіть чай у чашку.</li>
<li>Залийте чай гарячою водою.</li>
<li>Зачекайте кілька хвилин.</li>
</ol>Результат:
Закип’ятіть воду.
Покладіть чай у чашку.
Залийте чай гарячою водою.
Зачекайте кілька хвилин.
Порядок пунктів у нумерованому списку важливий. Наприклад, у рецепті зміна порядку кроків може змінити результат.
Список можна розмістити всередині окремого пункту іншого списку. Такий список називається вкладеним.
Наприклад, категорії продуктів можна подати так:
<h2>Список покупок</h2>
<ul>
<li>
Фрукти
<ul>
<li>Яблука</li>
<li>Банани</li>
<li>Апельсини</li>
</ul>
</li>
<li>
Овочі
<ul>
<li>Морква</li>
<li>Помідори</li>
</ul>
</li>
</ul>Вкладений список потрібно розміщувати всередині конкретного <li>, а не безпосередньо поруч із ним.
Правильна структура:
<ul>
<li>
Фрукти
<ul>
<li>Яблука</li>
</ul>
</li>
</ul>Вкладати можна не лише маркований список у маркований, а й нумерований список у маркований або навпаки:
<ol>
<li>
Підготувати інгредієнти
<ul>
<li>Борошно</li>
<li>Яйця</li>
<li>Цукор</li>
</ul>
</li>
<li>Замісити тісто</li>
<li>Випікати 30 хвилин</li>
</ol>Нижче наведено повний приклад, який можна зберегти у файл index.html і відкрити в браузері.
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Списки</title>
</head>
<body>
<h1>План подорожі</h1>
<h2>Що взяти із собою</h2>
<ul>
<li>Документи</li>
<li>Зарядний пристрій</li>
<li>Аптечка</li>
</ul>
<h2>План підготовки</h2>
<ol>
<li>Забронювати квитки.</li>
<li>
Зібрати речі.
<ul>
<li>Одяг</li>
<li>Взуття</li>
<li>Засоби гігієни</li>
</ul>
</li>
<li>Перевірити документи.</li>
</ol>
</body>
</html><ul> — коли порядок неважливийВикористовуйте маркований список, якщо пункти є просто переліком:
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>Не має значення, який пункт стоїть першим.
<ol> — коли порядок важливийВикористовуйте нумерований список для послідовності дій або рейтингу:
<ol>
<li>Створити HTML-файл.</li>
<li>Додати розмітку.</li>
<li>Відкрити файл у браузері.</li>
</ol>У цьому прикладі кроки потрібно виконувати в заданому порядку.
Загальна структура маркованого списку:
<ul>
<li>Перший пункт</li>
<li>Другий пункт</li>
</ul>Загальна структура нумерованого списку:
<ol>
<li>Перший пункт</li>
<li>Другий пункт</li>
</ol>У списку може бути будь-яка кількість пунктів:
<ul>
<li>Перший пункт</li>
<li>Другий пункт</li>
<li>Третій пункт</li>
<li>Четвертий пункт</li>
</ul><li> поза спискомНеправильно:
<li>Хліб</li>
<li>Молоко</li>Елемент <li> має бути всередині <ul> або <ol>.
Правильно:
<ul>
<li>Хліб</li>
<li>Молоко</li>
</ul><br> замість спискуНеправильно:
Хліб<br>
Молоко<br>
ЯблукаТакий код лише переносить текст на новий рядок, але не створює список.
Правильно:
<ul>
<li>Хліб</li>
<li>Молоко</li>
<li>Яблука</li>
</ul>Якщо порядок пунктів важливий, не варто використовувати <ul>:
<ul>
<li>Зареєструватися</li>
<li>Заповнити форму</li>
<li>Надіслати форму</li>
</ul>Для послідовності дій краще використати <ol>:
<ol>
<li>Зареєструватися</li>
<li>Заповнити форму</li>
<li>Надіслати форму</li>
</ol><li>Неправильно:
<ul>
<li>Фрукти</li>
<ul>
<li>Яблука</li>
</ul>
</ul>Правильно:
<ul>
<li>
Фрукти
<ul>
<li>Яблука</li>
</ul>
</li>
</ul>Створіть HTML-сторінку з такими списками:
Маркований список із трьома улюбленими стравами.
Нумерований список із кроками приготування однієї зі страв.
Вкладений список інгредієнтів, згрупованих за категоріями.
Приклад структури:
<h1>Мій рецепт</h1>
<h2>Інгредієнти</h2>
<ul>
<li>
Основа
<ul>
<li>Борошно</li>
<li>Вода</li>
</ul>
</li>
<li>
Додаткові інгредієнти
<ul>
<li>Сіль</li>
<li>Олія</li>
</ul>
</li>
</ul>
<h2>Приготування</h2>
<ol>
<li>Змішати інгредієнти.</li>
<li>Замісити тісто.</li>
<li>Приготувати страву.</li>
</ol><ul> створює маркований список.
<ol> створює нумерований список.
<li> позначає окремий пункт списку.
<ul> використовують, коли порядок пунктів неважливий.
<ol> використовують, коли порядок пунктів має значення.
Вкладений список розміщують усередині відповідного <li>.
Для списків не потрібно використовувати послідовність <br> або звичайний текст.