Карта сайта

Урок 5: Списки в HTML

/Уроки по HTML/CSS/Урок 5: Списки в HTML
Урок 5: Списки в HTML
Автор: написал в рубрике Уроки по HTML/CSS. 0 Комментариев.

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

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

Списки это неотъемлемая часть веб-страниц. С их помощью можно:

  • Структурировать информацию.
  • Создавать меню сайта.
  • Формировать перечни товаров, задач или преимуществ.
  • Организовывать сложные многоуровневые структуры (например, оглавления).

В HTML есть три типа списков: маркированные (<ul>), нумерованные (<ol>) и списки определений (<dl>). Сегодня мы сосредоточимся на первых двух, а также научимся создавать вложенные списки.

Маркированные списки <ul>

Маркированный список (unordered list) используется для перечисления элементов без строгого порядка. Каждый пункт в таком списке выделяется маркером (точкой), кружком или квадратом (зависит от стилей).

Синтаксис

Список создается с помощью тега <ul>, а каждый его пункт с помощью тега <li> (list item).

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

Результат в браузере:

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

Атрибут type

Раньше в HTML использовался атрибут type для изменения вида маркера. Например:

  • type="disc" — черные кружки (по умолчанию).
  • type="circle" — белые кружки.
  • type="square" — квадраты.

Однако сейчас это считается устаревшим. Лучше стилизовать списки через CSS, но для общего понимания приведу пример:

<ul type="square">
  <li>Яблоко</li>
  <li>Банан</li>
</ul>

Результат:
▪ Яблоко
▪ Банан

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

Нумерованный список (ordered list) применяется, когда порядок элементов важен. Например, для пошаговых инструкций или рейтингов. Пункты автоматически нумеруются цифрами, буквами или римскими числами.

Синтаксис

Список создается тегом <ol>, пункты — <li>.

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

Результат:

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

Атрибуты <ol>

  • type — задает тип нумерации:
    • 1 — цифры (по умолчанию).
    • A — заглавные буквы.
    • a — строчные буквы.
    • I — римские цифры (заглавные).
    • i — римские цифры (строчные).
  • start — указывает, с какого числа/буквы начинать список.

Пример:

<ol type="A" start="3">
  <li>Первый пункт</li>
  <li>Второй пункт</li>
</ol>

Результат:
C. Первый пункт
D. Второй пункт

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

Списки можно вкладывать друг в друга, создавая многоуровневые структуры. Например, для меню с подпунктами или плана книги.

Как это работает?

Каждый пункт списка (<li>) может содержать внутри себя новый список. Важно соблюдать вложенность тегов!

Пример:

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

Результат:

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

Комбинирование <ul> и <ol>

Можно сочетать разные типы списков. Например, создать нумерованный список с маркированными подпунктами:

<ol>
  <li>Утро
    <ul>
      <li>Зарядка</li>
      <li>Завтрак</li>
    </ul>
  </li>
  <li>День
    <ul>
      <li>Работа</li>
      <li>Обед</li>
    </ul>
  </li>
</ol>

Результат:

  1. Утро
    • Зарядка
    • Завтрак
  2. День
    • Работа
    • Обед

Практические задачи

Теория без практики как велосипед без колес. Давайте закрепим знания!

Задача 1: Список покупок

Создайте маркированный список продуктов для магазина.
Подсказка: Используйте <ul> и 5 пунктов <li>.

Решение:

<ul>
  <li>Хлеб</li>
  <li>Молоко</li>
  <li>Яйца</li>
  <li>Фрукты</li>
  <li>Овощи</li>
</ul>

Задача 2: Инструкция по завариванию чая

Напишите нумерованный список из 4 шагов.
Подсказка: Используйте <ol> с атрибутом type="1".

Решение:

<ol>
  <li>Вскипятите воду</li>
  <li>Положите чайный пакетик в кружку</li>
  <li>Залейте кипятком</li>
  <li>Дайте настояться 3 минуты</li>
</ol>

Задача 3: Многоуровневое меню

Создайте вложенный список для структуры сайта:

  • Главная
  • Блог
    • Последние статьи
    • Архив
  • Контакты

Решение:

<ul>
  <li>Главная</li>
  <li>Блог
    <ul>
      <li>Последние статьи</li>
      <li>Архив</li>
    </ul>
  </li>
  <li>Контакты</li>
</ul>

Задача 4: План книги

Создайте нумерованный список глав, где каждая глава содержит маркированный список подтем.
Пример:

  1. Глава 1
    • Тема 1.1
    • Тема 1.2

Решение:

<ol>
  <li>Глава 1: Введение в HTML
    <ul>
      <li>Структура документа</li>
      <li>Теги и атрибуты</li>
    </ul>
  </li>
  <li>Глава 2: Основы CSS
    <ul>
      <li>Стилизация текста</li>
      <li>Работа с цветами</li>
    </ul>
  </li>
</ol>

Частые ошибки

  1. Неправильная вложенность.
    Убедитесь, что внутренний список находится внутри <li>, а не после него.Неправильно:

    <ul>
  <li>Пункт 1</li>
  <ul>
    <li>Подпункт</li>
  </ul>
</ul>

    Правильно:

    <ul>
  <li>Пункт 1
    <ul>
      <li>Подпункт</li>
    </ul>
  </li>
</ul>
  2. Использование устаревших атрибутов.
    Атрибуты вроде type и start лучше заменять на CSS для гибкости.

Итоги пятого урока

  • Маркированные списки (<ul>) для неупорядоченных данных.
  • Нумерованные списки (<ol>) для последовательностей.
  • Вложенные списки, комбинируйте <ul> и <ol> для многоуровневых структур.

Полный курс «HTML и CSS для начинающих» доступен здесь — https://max-gabov.ru/html-css-dlya-nachinaushih