HTML Lists

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 .

• 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.

Edit Copy Hide

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

• 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.

Edit Copy Hide

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

• 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.

Edit Copy Hide

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

• 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.

Edit Copy Hide

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

• 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.

Edit Copy Hide

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