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

С возвращением.

В предыдущем уроке ты научился работать с текстом, заголовками и абзацами.

Теперь нам нужен порядок.

Потому что иногда абзаца недостаточно.

Иногда контент хочет стать списком.

Покупки.

Шаги рецепта.

Навыки.

Уроки.

Задачи.

Вещи, которые ты обещал сделать, но теперь делаешь вид, что забыл.

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="ru">
<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;
списки делают контент легче для просмотра и понимания.

Хорошие списки делают страницы чище.

Плохие списки делают страницу похожей на перевёрнутый ящик с инструментами.

Используй списки мудро.

Следующий Урок

В следующем уроке мы изучим ссылки и навигацию.

Потому что одна веб-страница — это хорошо.

А веб-страница, соединённая с другими страницами, становится сайтом.