Вложенные списки и иерархия [Модуль 5: Списки]: Тренажер HTML

Тренажер по HTML для пользователей с начальным уровнем подготовки.

Этот тренажер посвящен созданию списков в HTML и управлению их иерархией. Вы научитесь создавать простые маркированные и нумерованные списки, а затем перейдете к более сложным задачам — вложению одних списков в другие. Это фундаментальный навык для структурирования контента, например, при создании навигационных меню, оглавлений или многоуровневых перечней. Задания построены так, чтобы вы на практике поняли, как иерархическая структура HTML-тегов напрямую влияет на визуальное представление контента. Вам предстоит работать с тегами `<ul>`, `<ol>`, `<li>`, а также со списками определений `<dl>`, `<dt>` и `<dd>`. Готовый CSS поможет сразу увидеть результат ваших действий.

Список тем

Простой маркированный список

id: 37826_nested-lists-1

Давайте начнем с основ. Создайте простой маркированный список продуктов. Каждый продукт должен быть отдельным элементом списка. CSS уже настроен для базового отображения.

CSS

body {
  font-family: sans-serif;
  padding: 15px;
  color: #333;
}
ul, ol {
  padding-left: 20px;
}

                     <input1>
  <input2>Молоко</input2>
  <input2>Хлеб</input2>
  <input2>Яйца</input2>
</input1>

HTML

<input1>
  <input2>Молоко</input2>
  <input2>Хлеб</input2>
  <input2>Яйца</input2>
</input1>

Для создания маркированного (неупорядоченного) списка используется тег-контейнер `<ul>` (unordered list). Каждый элемент внутри этого контейнера должен быть обернут в тег `<li>` (list item).

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Простой нумерованный список

id: 37826_nested-lists-2

Теперь создайте нумерованный список дел на сегодня. Порядок в этом списке важен, поэтому используйте соответствующий тип списка. CSS автоматически пронумерует элементы.

CSS

body {
  font-family: sans-serif;
  padding: 15px;
  color: #333;
}
ul, ol {
  padding-left: 20px;
}

                     <input1 type="1">
  <li>Проснуться</li>
  <input2>Сделать зарядку</input2>
  <li>Позавтракать</li>
</input1>

HTML

<input1 type="1">
  <li>Проснуться</li>
  <input2>Сделать зарядку</input2>
  <li>Позавтракать</li>
</input1>

Для создания нумерованного (упорядоченного) списка используется тег-контейнер `<ol>` (ordered list). Как и в маркированном списке, каждый элемент оборачивается в тег `<li>`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Первый уровень вложенности

id: 37826_nested-lists-3

Усложним задачу. Создайте список покупок, где один из пунктов ('Молочные продукты') содержит свой собственный вложенный список. Обратите внимание, как CSS создаст отступ для вложенных элементов.

CSS

body {
  font-family: sans-serif;
  padding: 15px;
  color: #333;
}
ul, ol {
  padding-left: 20px;
}
li ul {
  margin-top: 5px;
}

                     <ul>
  <li>Хлеб</li>
  <input1>Молочные продукты
    <input2>
      <li>Молоко</li>
      <li>Сыр</li>
      <li>Йогурт</li>
    </input2>
  </input1>
  <li>Овощи</li>
</ul>

HTML

<ul>
  <li>Хлеб</li>
  <input1>Молочные продукты
    <input2>
      <li>Молоко</li>
      <li>Сыр</li>
      <li>Йогурт</li>
    </input2>
  </input1>
  <li>Овощи</li>
</ul>

Чтобы создать вложенный список, новый контейнер (`<ul>` или `<ol>`) должен быть помещен непосредственно внутрь тега `<li>` родительского списка. Это ключевое правило для создания правильной иерархии.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Смешанная вложенность

id: 37826_nested-lists-4

Создайте план проекта. Основные этапы должны быть в нумерованном списке, а подзадачи внутри одного из этапов — в маркированном. Это частый пример использования смешанных списков.

CSS

body {
  font-family: sans-serif;
  padding: 15px;
  color: #333;
}
ul, ol {
  padding-left: 20px;
}
li ul, li ol {
  margin-top: 5px;
}

                     <input1>
  <li>Анализ требований</li>
  <li>Проектирование
    <input2>
      <li>Создание макетов</li>
      <li>Написание ТЗ</li>
    </input2>
  </li>
  <li>Разработка</li>
  <li>Тестирование</li>
</input1>

HTML

<input1>
  <li>Анализ требований</li>
  <li>Проектирование
    <input2>
      <li>Создание макетов</li>
      <li>Написание ТЗ</li>
    </input2>
  </li>
  <li>Разработка</li>
  <li>Тестирование</li>
</input1>

Правила вложенности не меняются: вы можете вложить `<ul>` внутрь `<li>` из списка `<ol>`, и наоборот. Главное — соблюдать структуру: `ol > li > ul > li`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Глубокая иерархия

id: 37826_nested-lists-5

Создайте структуру оглавления для документа с главами, разделами и подразделами. Вам понадобится три уровня вложенности. CSS подчеркнет каждый уровень иерархии своим стилем маркера.

CSS

body {
  font-family: sans-serif;
  padding: 15px;
  color: #333;
}
ul {
  list-style-type: disc; /* Круг */
}
ul ul {
  list-style-type: circle; /* Окружность */
}
input1 input2 input1 {
  list-style-type: square; /* Квадрат */
}

                     <ul>
  <li>Глава 1: Введение
    <input1>
      <li>1.1. История вопроса</li>
      <li>1.2. Цели и задачи
        <input2>
          <li>1.2.1. Основная цель</li>
          <li>1.2.2. Второстепенные задачи</li>
        </input2>
      </li>
    </input1>
  </li>
  <li>Глава 2: Основная часть</li>
</ul>

HTML

<ul>
  <li>Глава 1: Введение
    <input1>
      <li>1.1. История вопроса</li>
      <li>1.2. Цели и задачи
        <input2>
          <li>1.2.1. Основная цель</li>
          <li>1.2.2. Второстепенные задачи</li>
        </input2>
      </li>
    </input1>
  </li>
  <li>Глава 2: Основная часть</li>
</ul>

Принцип тот же, просто повторяется. Третий уровень списка (`<ul>`) вкладывается в `<li>` второго уровня, который, в свою очередь, вложен в `<li>` первого уровня.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Список определений

id: 37826_nested-lists-6

Не все списки — это перечни. Создайте глоссарий с терминами и их определениями. Используйте для этого специальный тип списка — список определений.

CSS

body {
  font-family: sans-serif;
  padding: 15px;
  color: #333;
}
dt {
  font-weight: bold;
  margin-top: 10px;
}
dd {
  margin-left: 20px;
}

                     <input1>
  <input2>HTML</input2>
  <input3>Язык гипертекстовой разметки, используемый для создания веб-страниц.</input3>

  <input2>CSS</input2>
  <input3>Каскадные таблицы стилей, используемые для описания внешнего вида документа.</input3>
</input1>

HTML

<input1>
  <input2>HTML</input2>
  <input3>Язык гипертекстовой разметки, используемый для создания веб-страниц.</input3>

  <input2>CSS</input2>
  <input3>Каскадные таблицы стилей, используемые для описания внешнего вида документа.</input3>
</input1>

Список определений создается с помощью контейнера `<dl>` (definition list). Внутри него размещаются пары: термин в теге `<dt>` (definition term) и его определение в теге `<dd>` (definition description).

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Иерархия файловой системы

id: 37826_nested-lists-7

Списки идеально подходят для отображения иерархических структур, таких как файловая система. Создайте структуру папок и файлов для простого проекта. CSS добавит иконки для папок и файлов.

CSS

body {
  font-family: sans-serif;
  padding: 15px;
  color: #333;
}
.file-tree {
  list-style-type: none;
  padding-left: 0;
}
.file-tree li {
  padding: 3px 0 3px 25px;
  position: relative;
}
.file-tree .folder::before {
  content: '📁';
  position: absolute;
  left: 0;
}
.file-tree .file::before {
  content: '📄';
  position: absolute;
  left: 0;
}

                     <ul class="file-tree">
  <li class="folder">project
    <input1>
      <li class="folder">css
        <input1>
          <li class="file">style.css</li>
        </input1>
      </li>
      <li class="folder">js
        <input1>
          <li class="file">script.js</li>
        </input1>
      </li>
      <input2 class="file">index.html</input2>
    </input1>
  </li>
</ul>

HTML

<ul class="file-tree">
  <li class="folder">project
    <input1>
      <li class="folder">css
        <input1>
          <li class="file">style.css</li>
        </input1>
      </li>
      <li class="folder">js
        <input1>
          <li class="file">script.js</li>
        </input1>
      </li>
      <input2 class="file">index.html</input2>
    </input1>
  </li>
</ul>

Используйте вложенные неупорядоченные списки `<ul>`. Для визуального разделения папок и файлов в HTML уже добавлены классы `folder` и `file`. Вам нужно только правильно расставить теги `<ul>` и `<li>`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку