<ul>

Если нам нужно сверстать перечень однотипных элементов, порядок которых неважен, мы будем использовать тег неупорядоченного списка <ul>. Частный случай неупорядоченного списка — маркированный список.

        
          
          <ul>  <!-- Содержимое --></ul>
          <ul>
  <!-- Содержимое -->
</ul>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Тег <ul> является своеобразной обёрткой, указывающей браузеру на начало и конец списка. Сами пункты списка размечаются при помощи тега <li>. Таким образом, полностью список верстается с использованием обоих этих тегов:

        
          
          <ul>  <li>Молоко</li>  <li>Хлеб</li></ul>
          <ul>
  <li>Молоко</li>
  <li>Хлеб</li>
</ul>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Обратите внимание, что дочерними тегами для тега <ul> могут быть исключительно теги <li>. Любые другие теги обязательно должны находиться внутри пунктов списка <li>. Например, вложенный список должен верстаться так:

        
          
          <ul>  <li>Молоко</li>  <li>    Хлеб    <!-- В этот пункт вложен ещё один полноценный список: -->    <ul>      <li>Белый</li>      <li>Ржаной</li>    </ul>  <!-- Закрывающий тег родительского пункта: -->  </li></ul>
          <ul>
  <li>Молоко</li>
  <li>
    Хлеб
    <!-- В этот пункт вложен ещё один полноценный список: -->
    <ul>
      <li>Белый</li>
      <li>Ржаной</li>
    </ul>
  <!-- Закрывающий тег родительского пункта: -->
  </li>
</ul>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

💡 Вложенным может быть как неупорядоченный список <ul>, так и упорядоченный список <ol>.

        
          
          <ul>  <li>Сходить в магазин</li>  <li>    Посетить врачей:    <ol>      <li>Терапевт</li>      <li>Офтальмолог</li>      <li>Отоларинголог</li>    </ol>  </li>  <li>Позвонить маме</li></ul>
          <ul>
  <li>Сходить в магазин</li>
  <li>
    Посетить врачей:
    <ol>
      <li>Терапевт</li>
      <li>Офтальмолог</li>
      <li>Отоларинголог</li>
    </ol>
  </li>
  <li>Позвонить маме</li>
</ul>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

💡 Дочерними тегами обязательно должны быть <li>, в которые уже могут быть вложены любые другие теги.

💡 Как понять, где нужен список: если элементы несут один и тот же смысл, являются частью одной сущности, но их порядок не имеет значения, то выбираем <ul>. Пример: меню сайта. Каждый элемент меню является частью меню. Но перечислены они могут быть в любом порядке.

Бывают ситуации, когда порядок важен. Например, перечисление популярных статей по убыванию количества комментариев. В этом случае выбираем <ol>.

        
          
          <ul class="pagination">  <li class="pagination-item">    <a class="pagination-link" href="/page1">1</a>  </li>  <li class="pagination-item">    <a class="pagination-link pagination-link--current">2</a>  </li>  <li class="pagination-item">    <a class="pagination-link" href="/page3">3</a>  </li></ul>
          <ul class="pagination">
  <li class="pagination-item">
    <a class="pagination-link" href="/page1">1</a>
  </li>
  <li class="pagination-item">
    <a class="pagination-link pagination-link--current">2</a>
  </li>
  <li class="pagination-item">
    <a class="pagination-link" href="/page3">3</a>
  </li>
</ul>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать