HTML Lists

HTML lists are a way of organizing and presenting content in a structured format on a web page. They allow you to group related information together, making it easier for readers to understand and navigate. There are two main types of HTML lists: unordered lists (represented by bullets or other symbols) and ordered lists (represented by numbers or letters). Lists can contain a mix of text, images, links, and other HTML elements.

Here is a step-by-step example of using lists in your html code :

You can use our free live html editor to test tutorial codes .

Unordered List (unordered list items are represented by bullet points)

The ' <ul> ' tag indicates the start of an unordered list.
Each list item is represented by the ' <li> ' tag.
Place the content you want to include in each list item between the opening ' <li> ' and closing ' </li> ' tags.
Repeat the ' <li> ' tags for each item you want to include.
The ' </ul> ' tag indicates the end of the unordered list.


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

Preview :

Item 1
Item 2
Item 3

Ordered List (ordered list items are represented by numbers or letters)

The <ol> tag indicates the start of an ordered list.
Similar to the unordered list, each list item is represented by the <li> tag.
Place the content you want to include in each list item between the opening <li> and closing </li> tags.
Repeat the <li> tags for each item you want to include.
The </ol> tag indicates the end of the ordered list.


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

Preview :

First item
Second item
Third item

Unordered List with Nested Ordered List

In this example, we have an unordered list <ul> .
Inside the second list item (<li> Item 2 </li>), there is a nested ordered list <ol>.
The nested ordered list contains two subitems (<li> Subitem 2.1 </li> and <li> Subitem 2.2 </li>).
The nested list is visually indented to distinguish it from the main list.


    <ul>
  <li>Item 1</li>
  <li>Item 2</li>
    <ol>
      <li>Subitem 2.1</li>
      <li>Subitem 2.2</li>
    </ol>
  </li>
  <li>Item 3</li>
</ul>

Preview :

Item 1
Item 2
1. Subitem 2.1
2. Subitem 2.2
Item 3

Ordered List with Custom Styling

In this example, we have an ordered list <ol>.
The 'style' attribute is used to apply custom styling to the list.
'list-style-type': square; sets the bullet points of the list to squares instead of default numbers or letters.
You can explore other values for list-style-type like circle, disc, decimal, upper-alpha, etc. to achieve different visual styles.


<ol style="list-style-type: square;">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

Preview :

Item 1
Item 2
Item 3

Unordered List with Links:

In this example, we have an unordered list <ul>.
Each list item contains an anchor tag <a> with an href attribute specifying the URL.
The text within the anchor tags represents the clickable link.
Users can click on the list items to visit the respective websites.


<ul>
  <li><a href="https://example.com">Visit Example</a></li>
  <li><a href="https://bibiser.com">Visit bibiser</a></li>
  <li><a href="https://yourwebsite.com">Visit your website</a></li>
</ul>

Preview :