Списки — один из тех элементов HTML, которые используют постоянно, но редко задумываются об их устройстве. А ведь именно списками часто вёрстают меню сайтов, карточки товаров и любые повторяющиеся блоки — не только классические перечисления в тексте.
Ul создаёт маркированный список без порядка, ol — нумерованный, где порядок элементов имеет значение, например, инструкция по шагам. Внутри обоих типов элементы оформляются тегом li, и это единственный тег, который может быть их прямым потомком.
Вложенные списки — обычная практика для многоуровневого меню или оглавления с подпунктами: внутрь li просто помещается ещё один ul или ol. Браузер сам разберётся с отступами и вложенностью, а стилизовать маркеры или убрать их вовсе можно через CSS-свойство list-style.
Есть ещё менее известный тег dl для списков определений — пар "термин и его описание". Он реже встречается в обычной вёрстке, но отлично подходит для глоссариев или блоков вопрос-ответ, где важна именно такая парная структура.
Почему меню сайта часто оформляют именно как ul, а не как набор div-ов, хорошо объясняется в материалах про семантическую разметку на странице тега ul на MDN.
Стандартные маркеры и цифры перед пунктами списка почти никогда не остаются в дизайне без изменений — их убирают или заменяют кастомными значками через CSS. Но сама структура списка при этом никуда не девается, и это правильно: скринридер по-прежнему сообщит пользователю, что перед ним список из, скажем, пяти пунктов, даже если визуально маркеры не видны вовсе.
Соблазн собрать меню сайта просто из блоков div с одинаковыми классами возникает часто, особенно когда хочется побыстрее. Но список из li выигрывает даже чисто практически — браузер и вспомогательные технологии сразу понимают, что перед ними группа однотипных пунктов, а не случайный набор блоков.
