Списки: нумерованные <ol>, ненумерованные <ul>, элементы списка <li>

Зачем нужны списки в HTML? 🌐

Списки — это фундаментальный инструмент для структурирования информации на веб-страницах. Они помогают визуально организовать контент, будь то перечень товаров в интернет-магазине, шаги рецепта или пункты меню. В HTML есть три основных тега для работы со списками:

• <ul> — ненумерованный список (unordered list)
• <ol> — нумерованный список (ordered list)
• <li> — элемент списка (list item)

Ненумерованные списки <ul> 🎯

Используются, когда порядок элементов не важен. По умолчанию браузер отображает их с маркерами (точками).

<ul>
  <li>Кофе</li>
  <li>Чай</li>
  <li>Молоко</li>
</ul>

Результат:

• Кофе
• Чай
• Молоко

Где применить?
Отлично подходит для:

• Перечня ингредиентов
• Списка функций продукта
• Элементов навигации (в сочетании с CSS)

Нумерованные списки <ol> 🔢

Когда важен порядок (например, шаги инструкции), используйте <ol>. Браузер автоматически нумерует элементы.

<ol>
  <li>Включите компьютер</li>
  <li>Введите пароль</li>
  <li>Откройте браузер</li>
</ol>

Результат:

1. Включите компьютер
2. Введите пароль
3. Откройте браузер

Фишка: Можно изменить тип нумерации атрибутом type:

• type="1" — цифры (по умолчанию)
• type="A" — заглавные буквы
• type="a" — строчные буквы
• type="I" — римские цифры

Вложенные списки 🏗️

Списки можно комбинировать, создавая многоуровневые структуры. Это мощный инструмент для сложного контента!

<ul>
  <li>Фрукты
    <ol>
      <li>Яблоки</li>
      <li>Бананы</li>
    </ol>
  </li>
  <li>Овощи
    <ul>
      <li>Морковь</li>
      <li>Картофель</li>
    </ul>
  </li>
</ul>

Результат:

• Фрукты
• Яблоки
• Бананы
• Овощи
• Морковь
• Картофель

Профессиональный лайфхак: Вложенные списки часто используют для создания «древовидного» меню сайта.

Кастомизация списков с CSS 🎨

Хоть браузеры и предоставляют стандартное оформление, настоящую магию спискам придает CSS. Например, можно заменить стандартные маркеры на иконки:

<style>
  ul.custom {
    list-style-type: none;
  }
  ul.custom li::before {
    content: "👉";
    margin-right: 8px;
  }
</style>

<ul class="custom">
  <li>Пункт с иконкой</li>
  <li>Еще один пункт</li>
</ul>

Важно: Для сложной стилизации часто используют list-style-type: none и создают псевдоэлементы ::before.

Частые ошибки новичков ❌

1. Забывают закрывать теги — каждый <li> должен быть внутри <ul> или <ol>
2. Путают порядок — <li> всегда потомок списка, а не наоборот
3. Используют списки для верстки — для табличных данных лучше подходит <table>

Практическое задание ✏️

Создайте HTML-документ со списком своих любимых фильмов. Используйте:

• Нумерованный список для ТОП-3
• Ненумерованный — для остальных
• Добавьте один уровень вложенности с жанрами фильмов

<!-- Пример решения -->
<ol>
  <li>Крестный отец
    <ul>
      <li>Жанр: Криминальная драма</li>
    </ul>
  </li>
  <li>Побег из Шоушенка</li>
</ol>
<ul>
  <li>Начало</li>
</ul>

Когда списки — не лучший выбор? 🧐

Хотя списки универсальны, иногда лучше выбрать альтернативы:

• Для терминов и определений — <dl>
• Для табличных данных — <table>
• Для семантически важных элементов — <nav> с <a>

Помните: HTML — это про смысл, а CSS — про внешний вид. Выбирайте теги по назначению!