start learning
Image 1

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)


<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)


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

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

Unordered List with Nested Ordered 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


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

Preview :
  1. Item 1
  2. Item 2
  3. Item 3

Unordered List with Links:


<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 :