Тег <ul>: маркированные списки
Как группировать равноправные пункты и сохранять их смысл при изменении оформления.
Зачем нужен этот элемент
ul используется, когда порядок пунктов не влияет на смысл: набор инструментов, список возможностей или меню. Каждый непосредственный пункт списка оформляйте через li. Браузер добавляет маркеры, но они не являются единственным признаком структуры.
Если перестановка шагов меняет результат, нужен нумерованный список ol. С помощью CSS можно изменить отступы и маркеры. Вложенный список размещайте внутри соответствующего li, чтобы отношения между пунктами оставались понятными.
Синтаксис и пример
<ul>
<li>Редактор кода</li>
<li>Современный браузер</li>
<li>Папка для проекта</li>
</ul>Что важно в разметке
| Параметр | Как использовать |
|---|---|
| li | Непосредственные пункты списка. |
| list-style | CSS-настройка маркеров. |
| Вложенный ul | Размещается внутри пункта li. |
Частая ошибка
Не имитируйте список строками с дефисом и br. Так потеряется семантическая группировка и станет сложнее управлять отступами.
Небольшая практика
Добавьте к пункту «Редактор» вложенный список двух вариантов. Проверьте, что вложение видно и по разметке, и на экране.
Разберите также <li>, <ol>: эти элементы пригодятся в том же интерфейсе.
Попробуйте сами
РЕЗУЛЬТАТ · ИЗОЛИРОВАННЫЙ ПРЕДПРОСМОТР
Измените код и нажмите «Запустить». JavaScript и внешние запросы отключены.
Самостоятельный учебный материал. Техническая документация: первоисточник по теме ↗. Если результат отличается, проверьте код и версию браузера.