Когда речь заходит о структуре веб-страниц, маркированный список - это тот самый инструмент, который позволяет нам сгруппировать элементы без навязывания им строгой последовательности. Это удобно и логично! Чаще всего в интернете мы встречаем именно такие списки при просмотре меню или наборе гиперссылок, где порядок пунктов не играет решающей роли.
В мире HTML для этой задачи предусмотрен тег ul (unordered list). Он работает как четкая инструкция для браузера: «Внимание, всё, что находится между этим началом и закрывающим тегом /ul, является частью единого неупорядоченного списка». Каждый отдельный пункт в такой конструкции обозначается тегом li. И тут начинается самое интересное: внутри этих элементов можно размещать практически всё что угодно! Текстовые блоки, изображения, а даже другие списки - возможности по-настоящему безграничны.
С точки зрения вёрстки тег ul является блочным элементом. Это значит, что при отрисовке он уверенно займёт всю доступную ширину контейнера, а его высота будет гибко подстраиваться под объём содержимого. По умолчанию браузер сам позаботится об эстетике: каждый элемент списка получит свой уникальный маркер (точку или квадратик), переместится на новую строку и слегка отступит от левого края, создавая приятный визуальный ритм.
Примечание: если стандартные маркеры не устраивают, всегда можно добавить немного индивидуальности! Для смены типа символа или замены его на красивое изображение используются CSS свойства list-style-type или list-style-image.
А если вам нужен именно порядок, где важно, чтобы первый шёл первым, а второй - вторым? Тогда смело обращайтесь к тегу ol, который создаёт нумерованные списки.
Атрибуты Тег ul поддерживает глобальные атрибуты HTML, что делает его ещё более гибким в настройке.
Пример ul liКофе/li liЧай/li liМолоко/li /ul