#9. Списки: ul, ol, li, вложенные списки, dl/dt/dd»

Списки — один из самых частых способов оформить перечисление: пункты меню, шаги инструкции, список покупок. Вы уже видели список в уроке #8 — там через него были перечислены форматы изображений. Теперь разберём, как он устроен.

Маркированный список: ul

<ul> (unordered list — неупорядоченный список) содержит пункты <li> (list item). Порядок не важен:

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

На странице это выглядит так:

• HTML
• CSS
• JavaScript

Нумерованный список: ol

<ol> (ordered list) нумерует пункты сам — удобно, когда порядок важен, например для шагов инструкции:

<ol>
    <li>Установить Apache</li>
    <li>Настроить виртуальный хост</li>
    <li>Проверить страницу в браузере</li>
</ol>

На странице это выглядит так:

1. Установить Apache
2. Настроить виртуальный хост
3. Проверить страницу в браузере

Это те же шаги, что и в уроке #0 при настройке окружения.

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

Список можно вложить в пункт другого списка — для этого вложенный <ul> ставят внутрь <li> родителя, а не между пунктами:

<ul>
    <li>Разделы сайта
        <ul>
            <li>Курсы</li>
            <li>Форум</li>
        </ul>
    </li>
    <li>Контакты</li>
</ul>

На странице это выглядит так:

• Разделы сайта
  • Курсы
  • Форум
• Контакты

Список определений: dl, dt, dd

Для пар «термин — описание» (словари, характеристики) предназначен <dl> (description list): термин — <dt>, описание — <dd>:

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

На странице это выглядит так:

HTML

Язык разметки веб-страниц

Тег

Команда браузеру, записанная в угловых скобках

Практика

Сделайте страницу «Как я учусь программированию»: нумерованный список из трёх шагов, где один шаг содержит вложенный маркированный список, а в конце — словарик из трёх терминов через <dl> (например: тег, атрибут, браузер).