Списки і Організація

З поверненням.

У попередньому уроці ти навчився працювати з текстом, заголовками й абзацами.

Тепер нам потрібен порядок.

Бо іноді абзацу недостатньо.

Іноді контент хоче стати списком.

Покупки.

Кроки рецепта.

Навички.

Уроки.

Завдання.

Речі, які ти пообіцяв зробити, але тепер робиш вигляд, що забув.

HTML дає нам списки саме для цього.

Дуже цивілізовано.

Що Ти Вивчиш

У цьому уроці ти дізнаєшся:

як працюють unordered lists;
як працюють ordered lists;
як використовувати li;
коли використовувати ul;
коли використовувати ol;
як створювати вкладені списки;
як організовувати контент зрозуміло.

Чому Списки Важливі

Списки роблять інформацію легшою для швидкого читання.

Порівняй це:

<p>Мені потрібно купити хліб, молоко, яблука, каву, пасту, помідори і сир.</p>

З цим:

<ul>
  <li>Хліб</li>
  <li>Молоко</li>
  <li>Яблука</li>
  <li>Кава</li>
  <li>Паста</li>
  <li>Помідори</li>
  <li>Сир</li>
</ul>

Другий варіант легше читати.

Очам не треба битися з абзацом.

Мозок дякує.

Тихо.

Але щиро.

Unordered Lists

Невпорядкований список використовує тег ul.

Кожен елемент йде всередині тегу li.

Приклад:

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

ul означає unordered list.

Порядок не важливий.

Браузер зазвичай показує маркери.

Використовуй unordered lists для:

навичок;
списків покупок;
характеристик;
інструментів;
загальних наборів.

Якщо порядок не важливий, використовуй ul.

Ordered Lists

Впорядкований список використовує тег ol.

Приклад:

<ol>
  <li>Створи HTML-файл</li>
  <li>Напиши структуру документа</li>
  <li>Додай контент</li>
  <li>Відкрий сторінку в браузері</li>
</ol>

ol означає ordered list.

Порядок важливий.

Браузер зазвичай показує числа.

Використовуй ordered lists для:

інструкцій;
кроків;
рейтингів;
рецептів;
tutorial;
процесів.

Якщо зміна порядку змінює зміст, використовуй ol.

Елемент li

Кожен елемент списку використовує li.

Приклад:

<li>Це елемент списку.</li>

Не клади звичайний текст прямо всередину ul або ol.

Це неправильно:

<ul>
  HTML
  CSS
  JavaScript
</ul>

Це правильно:

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

ul або ol — це контейнер.

li — це елемент.

Як коробка і речі всередині коробки.

Не кидай картоплю прямо в повітря і не називай це зберіганням.

Список Навичок

Створи просту секцію навичок:

<h2>Мої Навички</h2>

<ul>
  <li>HTML</li>
  <li>Linux Terminal</li>
  <li>Problem solving</li>
  <li>Робити помилки і вчитися на них</li>
</ul>

Це ідеально для персональних сторінок.

Просто.

Читабельно.

Не драматично.

Хіба що в списку є “debug CSS опівночі”.

Тоді вже драматично.

Покроковий Список

Для кроків використовуй ol:

<h2>Як Створити Вебсторінку</h2>

<ol>
  <li>Створи папку для проєкту.</li>
  <li>Створи файл index.html.</li>
  <li>Додай HTML-структуру.</li>
  <li>Напиши контент.</li>
  <li>Відкрий сторінку в браузері.</li>
</ol>

Процес стає зрозумілим.

Читач знає, що робити першим, другим, третім і так далі.

Дуже корисно.

Дуже спокійно.

Протилежність до “розберешся якось”.

Вкладені Списки

Вкладений список — це список всередині іншого списку.

Приклад:

<ul>
  <li>Frontend
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </li>
  <li>Backend
    <ul>
      <li>Python</li>
      <li>Java</li>
      <li>Databases</li>
    </ul>
  </li>
</ul>

Це корисно, коли контент має категорії.

Важливо: вкладений список має бути всередині li.

Не має плавати випадково.

HTML любить порядок.

Це не їдальня для тегів.

Правильна Структура Вкладених Списків

Правильно:

<ul>
  <li>Web Development
    <ul>
      <li>HTML</li>
      <li>CSS</li>
    </ul>
  </li>
</ul>

Не ідеально:

<ul>
  <li>Web Development</li>
  <ul>
    <li>HTML</li>
    <li>CSS</li>
  </ul>
</ul>

Другий варіант може все одно відобразитись у браузері.

Але структура неправильна.

Браузери пробачають.

Хороші розробники не живуть на пробаченні.

Створи Сторінку для Практики

Створи новий файл:

touch lists.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>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li>Web accessibility</li>
  </ul>

  <h2>Як Я Навчаюся</h2>
  <ol>
    <li>Відкриваю урок.</li>
    <li>Читаю пояснення.</li>
    <li>Пишу код самостійно.</li>
    <li>Тестую його в браузері.</li>
    <li>Виправляю помилки без паніки.</li>
  </ol>

  <h2>Сфери Web Development</h2>
  <ul>
    <li>Frontend
      <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
      </ul>
    </li>
    <li>Backend
      <ul>
        <li>Server logic</li>
        <li>Databases</li>
        <li>APIs</li>
      </ul>
    </li>
  </ul>
</body>
</html>

Відкрий сторінку в браузері.

Тепер у тебе є unordered lists, ordered lists і nested lists.

Сторінка стає організованою.

Небезпечно організованою.

Типові Помилки

Використовувати абзаци замість списків

Це не дуже добре:

<p>HTML, CSS, JavaScript, Git, Linux</p>

Краще:

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
  <li>Git</li>
  <li>Linux</li>
</ul>

Якщо це набір елементів, список часто кращий.

Використовувати ul для кроків

Це не ідеально:

<ul>
  <li>Спочатку створи файл.</li>
  <li>Потім напиши HTML.</li>
  <li>Нарешті відкрий його в браузері.</li>
</ul>

Краще:

<ol>
  <li>Створи файл.</li>
  <li>Напиши HTML.</li>
  <li>Відкрий його в браузері.</li>
</ol>

Кроки мають порядок.

Використовуй ol.

Забути li

Неправильно:

<ul>
  <p>HTML</p>
  <p>CSS</p>
</ul>

Правильно:

<ul>
  <li>HTML</li>
  <li>CSS</li>
</ul>

Всередині списків використовуй li.

Без бунту.

Практика

Створи сторінку про свою щоденну рутину.

Вона має містити:

один h1;
один unordered list речей, які ти використовуєш щодня;
один ordered list твоєї ранкової рутини;
один nested list з категоріями;
мінімум один абзац перед списком.

Приклади категорій:

інструменти;
звички;
теми для навчання;
робочі задачі;
спорт;
мови.

Зроби це реальним.

Фейковий контент нудний.

Реальний контент має плями кави й характер.

Міні-Завдання

Створи файл:

course-plan.html

Побудуй сторінку, яка описує твій навчальний план.

Вона має містити:

головний заголовок;
вступний абзац;
unordered list технологій, які ти хочеш вивчити;
ordered list кроків для навчання;
nested list, який групує теми по категоріях;
короткий фінальний абзац.

Без CSS.

Без JavaScript.

Тільки HTML-структура.

Бо сьогодні ми організовуємо контент.

Завтра контент, можливо, почне поводитися нормально.

Можливо.

Підсумок

Сьогодні ти дізнався, що:

ul створює unordered lists;
ol створює ordered lists;
li створює list items;
unordered lists підходять для наборів, де порядок не важливий;
ordered lists підходять для кроків або послідовностей, де порядок важливий;
nested lists корисні для категорій;
nested lists мають бути всередині li;
списки роблять контент легшим для перегляду й розуміння.

Хороші списки роблять сторінки чистішими.

Погані списки роблять сторінку схожою на перекинуту коробку з інструментами.

Використовуй списки мудро.

Наступний Урок

У наступному уроці ми вивчимо посилання і навігацію.

Бо одна вебсторінка — це добре.

А вебсторінка, з’єднана з іншими сторінками, стає сайтом.