Учебник HTML. Глава 5: Списки

Основы работы со списками в HTML: маркированные, нумерованные и списки определений. Узнайте, как создавать простые и вложенные списки, а также комбинировать их для структурирования информации на ваших веб-страницах.

<< Учебник HTML

Списки в HTML используются для структурирования информации. Существует три основных типа списков: маркированные, нумерованные и списки определений. Для создания этих типов списков применяются следующие теги:

• <ul> — используется для создания маркированного списка.
• <ol> — используется для создания нумерованного списка.
• <dl> — используется для создания списка определений.
• <li> — используется для обозначения элемента списка.
• <dt> — используется для указания термина в списке определений.
• <dd> — используется для указания определения термина в списке определений.

Теперь давайте рассмотрим эти типы списков подробнее.

5.1. Маркированные списки

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

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

Пример кода:

<ul>
    <li>Яблоко</li>
    <li>Банан</li>
    <li>Апельсин</li>
</ul>

Результат:

• Яблоко
• Банан
• Апельсин

Вложенный маркированный список:

Пример кода:

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

Результат:

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

5.2. Нумерованные списки

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

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

Пример кода:

<ol>
    <li>Вымыть овощи</li>
    <li>Очистить картофель</li>
    <li>Отварить картофель до готовности</li>
</ol>

Результат:

1. Вымыть овощи
2. Очистить картофель
3. Отварить картофель до готовности

Вложенный нумерованный список:

Пример кода:

<ol>
    <li>Шаг 1</li>
    <ol>
        <li>Подготовьте ингредиенты</li>
        <li>Разогрейте духовку</li>
    </ol>
    <li>Шаг 2</li>
    <ol>
        <li>Замесите тесто</li>
        <li>Выпекайте пирог</li>
    </ol>
</ol>

Результат:

1. Шаг 1
   1. Подготовьте ингредиенты
   2. Разогрейте духовку
2. Шаг 2
   1. Замесите тесто
   2. Выпекайте пирог

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

Список определений позволяет создавать пары «термин – определение». Это удобно при создании глоссариев, справочников или других документов, где требуется пояснение терминов.

Простой список определений:

Пример кода:

<dl>
    <dt>HTML</dt>
    <dd>Язык разметки гипертекста, который используется для создания веб-страниц.</dd>
    
    <dt>CSS</dt>
    <dd>Каскадные таблицы стилей, используемые для оформления веб-страниц.</dd>
</dl>

Результат:

• HTML: Язык разметки гипертекста, который используется для создания веб-страниц.
• CSS: Каскадные таблицы стилей, используемые для оформления веб-страниц.

Вложенный список определений:

Пример кода:

<dl>
    <dt>HTML</dt>
    <dd>Язык разметки гипертекста, который используется для создания веб-страниц.</dd>
    <dt>CSS</dt>
    <dd>Каскадные таблицы стилей, используемые для оформления веб-страниц.</dd>
    <dt>JavaScript</dt>
    <dl>
        <dt>ES6</dt>
        <dd>Версия JavaScript, выпущенная в 2015 году, которая добавила множество новых возможностей.</dd>
        <dt>TypeScript</dt>
        <dd>Расширение JavaScript, добавляющее статическую типизацию.</dd>
    </dl>
</dl>

Результат:

• HTML: Язык разметки гипертекста, который используется для создания веб-страниц.
• CSS: Каскадные таблицы стилей, используемые для оформления веб-страниц.
• JavaScript:
  • ES6: Версия JavaScript, выпущенная в 2015 году, которая добавила множество новых возможностей.
  • TypeScript: Расширение JavaScript, добавляющее статическую типизацию.

5.4. Вложенные смешанные списки

Иногда возникает необходимость создать список внутри другого списка, используя разные типы списков. Это называется вложенными смешанными списками. Вложенность может применяться ко всем видам списков, создавая сложные структуры данных.

Пример вложенного смешанного списка:

Код:

<ol>
    <li>Шаг 1</li>
    <ul>
        <li>Фрукты</li>
        <ul>
            <li>Яблоки</li>
            <li>Бананы</li>
        </ul>
        <li>Овощи</li>
        <ul>
            <li>Картофель</li>
            <li>Морковь</li>
        </ul>
    </ul>
    <li>Шаг 2</li>
    <ol>
        <li>Замесите тесто</li>
        <li>Выпекайте пирог</li>
    </ol>
</ol>

Результат:

1. Шаг 1
   • Фрукты
     • Яблоки
     • Бананы
   • Овощи
     • Картофель
     • Морковь
2. Шаг 2
   1. Замесите тесто
   2. Выпекайте пирог

Как видно, мы создали смешанный вложенный список: на первом уровне у нас нумерация шагов, затем идет маркированный список с фруктами и овощами, а далее снова возвращается к нумерации для описания процесса выпечки.

Таким образом, вложенные смешанные списки позволяют гибко структурировать информацию на странице, комбинируя различные типы списков в зависимости от потребностей.

---