<ul>

If we need to lay out a list of similar elements where the order does not matter, we will use the unordered list tag <ul>. A special case of the unordered list is the bulleted list.

        
          
          <ul>  <!-- Content --></ul>
          <ul>
  <!-- Content -->
</ul>

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

The <ul> tag is a kind of wrapper that indicates to the browser the beginning and end of a list. The list items themselves are marked up using the <li> tag. Thus, the complete list is laid out using both of these tags:

        
          
          <ul>  <li>Milk</li>  <li>Bread</li></ul>
          <ul>
  <li>Milk</li>
  <li>Bread</li>
</ul>

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

Note that the only child tags for the <ul> tag can be <li> tags. Any other tags must be contained within the list items <li>. For example, a nested list should be laid out like this:

        
          
          <ul>  <li>Milk</li>  <li>    Bread    <!-- A full list is nested within this item: -->    <ul>      <li>White</li>      <li>Rye</li>    </ul>  <!-- Closing tag for the parent item: -->  </li></ul>
          <ul>
  <li>Milk</li>
  <li>
    Bread
    <!-- A full list is nested within this item: -->
    <ul>
      <li>White</li>
      <li>Rye</li>
    </ul>
  <!-- Closing tag for the parent item: -->
  </li>
</ul>

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

💡 A nested unordered list <ul> and an ordered list <ol> can be used.

        
          
          <ul>  <li>Go to the store</li>  <li>    Visit the doctors:    <ol>      <li>Therapist</li>      <li>Ophthalmologist</li>      <li>ENT specialist</li>    </ol>  </li>  <li>Call mom</li></ul>
          <ul>
  <li>Go to the store</li>
  <li>
    Visit the doctors:
    <ol>
      <li>Therapist</li>
      <li>Ophthalmologist</li>
      <li>ENT specialist</li>
    </ol>
  </li>
  <li>Call mom</li>
</ul>

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

💡 The child tags must be <li>, into which any other tags can be nested.

💡 How to understand when a list is needed: if the elements carry the same meaning, are part of one entity, but their order does not matter, then we choose <ul>. Example: site menu. Each menu item is part of the menu. But they can be listed in any order.

There are situations where order is important. For example, listing popular articles in descending order of the number of comments. In this case, we choose <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>

        
        
          
            
            Copy
            Copied
            Failed to copy