HTML List Item: Mastering Unordered and Ordered Lists

Introduction

HTML lists are used to display items as a list, and they play a crucial role in web development. The HTML li tag is used to define an item in a list. The li tag is used with the ul or ol tag, and it is perfect for creating unordered and ordered lists. This lab will provide step-by-step guidance on how to create HTML lists using the li tag.

Note: You can practice coding in index.html and learn How to Write HTML in Visual Studio Code. Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("`HTML`")) -.-> html/TextContentandFormattingGroup(["`Text Content and Formatting`"]) html/TextContentandFormattingGroup -.-> html/lists_desc("`Lists and Descriptions`") subgraph Lab Skills html/lists_desc -.-> lab-70788{{"`HTML List Item`"}} end

Create an unordered list

We can create an unordered list using the HTML ul tag. To add items to the list, we should use the li tag. Let's create an unordered list with three items.

<!-- index.html -->

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

In the above code, we have used the ul tag to create an unordered list and the li tag to define each item in the list.

Create an ordered list

Creating an ordered list is very similar to creating an unordered list, with the only difference being the use of the ol tag instead of the ul tag. Let's create an ordered list with three items.

<!-- index.html -->

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

In the above code, we have used the ol tag to create an ordered list and the li tag to define each item in the list.

Adding attributes to the `li` tag

The li tag supports several attributes that can be used to modify the style of the list item bullet. An attribute that is commonly used is the type attribute which can be used to change the bullet of the list item. Let's update the unordered list from step 1 using the type attribute.

<!-- index.html -->

<ul>
  <li type="circle">Item 1</li>
  <li type="disc">Item 2</li>
  <li type="square">Item 3</li>
</ul>

In the above code, we have used the type attribute to add different bullets to the list items. We have used the circle value to make the bullet an unfilled circle, disc value to make the bullet a filled circle, and the square value to make the bullet a filled square.

Nesting lists

We can nest multiple lists inside a single list. Let's create an ordered list and add an unordered list inside the second item of the ordered list.

<!-- index.html -->

<ol>
  <li>Item 1</li>
  <li>
    Item 2
    <ul>
      <li>Sub-item 1</li>
      <li>Sub-item 2</li>
    </ul>
  </li>
  <li>Item 3</li>
</ol>

In the above code, we have used the ul tag to create an unordered list and the li tag to define each item in the list. We have also nested an unordered list inside the second item of the ordered list.

Summary

In this lab, we have learned how to create HTML lists using the li tag. We started by creating an unordered list using the ul tag and the li tag. We then created an ordered list using the ol tag and the li tag. We also learned how to add attributes to the li tag to modify the style of the list item bullet. Finally, we learned how to nest multiple lists inside a single list.

HTML List Item