EasyCode365EasyCode365

Списки в HTML

Вітаємо на ще одному цікавому кроці у твоїй подорожі веброзробкою! Чи то список інгредієнтів для рецепта, список покупок або рейтинг улюблених фільмів - списки всюди в інтернеті. Вони допомагають візуально впорядковувати інформацію та роблять її легшою для читання. Давай розберемося, як створювати ці важливі структури за допомогою HTML.

Основний будівельний блок: елемент списку (<li>)

Уяви список як великий контейнер, а елементи всередині — як його вміст. Перш ніж обирати тип контейнера, треба зрозуміти, як обгорнути кожен окремий елемент. В HTML кожен елемент списку обов'язково має бути загорнутий у тег <li>.

Літери li означають "list item" (елемент списку). Незалежно від того, чи список має маркери, чи нумерацію, кожен окремий фрагмент тексту має бути всередині <li>. Це універсальний спосіб сказати браузеру: "Це один конкретний елемент мого списку".

Невпорядковані списки (Unordered List, <ul>)

Іноді точний порядок елементів не має значення. Наприклад, у звичайному списку покупок неважливо, що ти візьмеш спочатку: молоко чи яблука.

Для таких ситуацій використовують невпорядкований список (Unordered List), який створюється тегом <ul>. Коли елементи списку знаходяться всередині <ul>, браузер автоматично додає біля них маркери (маленькі чорні кружечки).

Можна редагувати
<ul>
  <li>Яблука</li>
  <li>Молоко</li>
  <li>Хліб</li>
</ul>

Впорядковані списки (Ordered List, <ol>)

В інших випадках порядок елементів дуже важливий. Якщо ти пишеш покрокову інструкцію, як спекти торт, або складаєш топ-10 улюблених серіалів, послідовність має значення.

Для цього використовують впорядкований список (Ordered List), який створюється тегом <ol>. Замість маркерів браузер автоматично нумерує елементи за порядком.

Можна редагувати
<ol>
  <li>Розігрій духовку.</li>
  <li>Змішай інгредієнти.</li>
  <li>Випікай 30 хвилин.</li>
</ol>

Вкладені списки (золоте правило)

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

Ось абсолютне золоте правило вкладених списків - і найпростіший спосіб уникнути поширеної помилки новачків:

Якщо ти хочеш вставити список в інший список, внутрішній список (новий <ul> або <ol>) ОБОВ'ЯЗКОВО має бути повністю всередині існуючого тега <li>.

Внутрішній список не може "висіти" сам по собі в основному контейнері <ul> або <ol>. Він має бути охайно вкладений у конкретний елемент списку.

Можна редагувати
<ul>
  <li>Прибрати кухню</li>
  <li>Купити продукти
    <ul>
      <li>Яйця</li>
      <li>Сир</li>
    </ul>
  </li>
  <li>Вигуляти собаку</li>
</ul>

Помічаєш, що внутрішній <ul> для "Купити продукти" повністю знаходиться до закривального тега </li> цього елемента? Ось секрет правильної структури.

Підсумок

Тепер ти готовий упорядковувати контент у вебі! Коротко закріпимо головне:

  • Тег <li>: Обгортає кожен окремий елемент списку.
  • Тег <ul> (Unordered List): Використовується для невпорядкованих списків, де порядок неважливий, і створює автоматичні маркери.
  • Тег <ol> (Ordered List): Використовується для впорядкованих списків, де порядок важливий, і створює автоматичну нумерацію.
  • Вкладення: Вкладені списки завжди розміщуй всередині існуючого тега <li>.