junior
Для чего предназначены теги ol, ul, li
Теги <ol>, <ul> и <li> предназначены для создания списков в HTML. <ol> создаёт нумерованный (упорядоченный) список, <ul> — маркированный (неупорядоченный), а <li> определяет отдельный элемент списка.
Сравнение
| Тег | Тип списка | Маркер по умолчанию | Когда использовать |
|---|---|---|---|
<ol> |
Нумерованный | 1, 2, 3… | Порядок элементов важен (шаги инструкции, рейтинг) |
<ul> |
Маркированный | Точка (disc) | Порядок не важен (список функций, навигация) |
Примеры
Пример
<!-- Нумерованный список -->
<ol>
<li>Подключить зависимость</li>
<li>Настроить application.yml</li>
<li>Запустить приложение</li>
</ol>
<!-- Маркированный список -->
<ul>
<li>Spring Boot</li>
<li>Hibernate</li>
<li>PostgreSQL</li>
</ul>
Атрибуты ol
| Атрибут | Назначение | Пример |
|---|---|---|
type |
Тип нумерации: 1, a, A, i, I |
<ol type="a"> |
start |
Начальное значение | <ol start="5"> |
reversed |
Обратный порядок | <ol reversed> |
Вложенные списки
Списки можно вкладывать друг в друга для создания иерархии:
Пример
<ul>
<li>Backend
<ul>
<li>Java</li>
<li>Spring</li>
</ul>
</li>
<li>Frontend
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
</li>
</ul>
На собеседовании:
<ol>— нумерованный список (порядок важен),<ul>— маркированный (порядок не важен),<li>— элемент списка. Можно упомянуть вложенность и атрибуты<ol>(type,start,reversed).