Lists in HTML | Day 04 of HTML Learning Series

Welcome to Day 04 of our 10-day HTML learning series! Today, we’re going to explore how to create and use lists in HTML.

If you’ve been following along, we’ve already covered some fundamental aspects of HTML:

Day 01 - Introduction to HTML

Day 02 - Head Section

Dat 03 - Body Section

Types of Lists in HTML

There are three main types of lists you can use in HTML:

1. Ordered Lists (<ol>)

An ordered list is ideal when the order of items matters. Each item in the list is numbered automatically by the browser.

    
<ol>
    
  <li>First item</li>
    
  <li>Second item</li>
    
  <li>Third item</li>
    
</ol>
    

Output:

This will display as:

1. First item
2. Second item
3. Third item

2. Unordered Lists (<ul>)

Use an unordered list when the order of items is not important. Each item is typically marked with a bullet point.

      
<ul>
      
  <li>Item one</li>
      
  <li>Item two</li>
      
  <li>Item three</li>
      
</ul>
      

Output:

This will display as:

• Item one
• Item two
• Item three

3. Definition Lists (<dl>)

A definition list is used for pairing terms with their definitions, such as in glossaries or FAQs.

        
<dl>
        
  <dt>HTML</dt>
        
  <dd>HyperText Markup Language</dd>
        
  <dt>CSS</dt>
        
  <dd>Cascading Style Sheets</dd>
        
</dl>
        

Output:

This will display as:

• HTML: HyperText Markup Language
• CSS: Cascading Style Sheets

Nested Lists:

HTML allows you to create nested lists, which are lists within lists. This is particularly useful for more complex or hierarchical data structures.

          
<ul>
          
  <li>Item one
          
    <ul>
          
      <li>Sub-item one</li>
          
      <li>Sub-item two</li>
          
    </ul>
          
  </li>
          
  <li>Item two</li>
          
</ul>
          

Output:

This will display as:

• Item one
  • Sub-item one
  • Sub-item two
• Item two

Conclusion

Lists are essential tools in HTML for organizing and displaying content in a structured way. Whether you need a numbered sequence, bullet points, or definitions, HTML lists provide a flexible solution for all your content needs.

Stay tuned for Day 05, where we’ll be exploring how to create and style tables in HTML