HTML Lists

In this tutorial, you will learn HTML Lists

HTML lists are a great way to organize and present information in a structured and easy-to-read format. Here is a tutorial on how to create lists in HTML:

  • To create an unordered list, use the <ul> element. This element acts as the container for the entire list. Inside the <ul> element, use the <li> element to create list items.
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
  • To create an ordered list, use the <ol> element instead of <ul>. The <ol> element also uses the <li> element to create list items, but the items are automatically numbered.
<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

To add a nested list, simply place a <ul> or <ol> element inside of a <li> element.

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

Choose List Item Marker in the HTML list

In HTML, you can choose the marker (bullet or number) that is used to indicate list items in an unordered or ordered list. Here is a tutorial on how to choose list item markers in HTML:

  • To choose a bullet marker for an unordered list, you can use the list-style-type property in CSS. The default value is disc, but other options include circle and square.
ul {
  list-style-type: square;
}
  • To choose a number marker for an ordered list, you can use the list-style-type property in CSS. The default value is decimal, but other options include lower-alpha, upper-alpha, lower-roman, and upper-roman.
ol {
  list-style-type: upper-alpha;
}
  • If you want to use an image as a marker, you can use the list-style-image property in CSS.
ul {
  list-style-image: url('bullet.png');
}
  • You can also use the list-style shorthand property to set the marker type, position, and image all at once.
ul {
  list-style: square inside url('bullet.png');
}
  • If you want to remove the marker completely, you can set the list-style-type property to none.
ul {
  list-style-type: none;
}

Note that you can also use the list-style attribute on the <ul> or <ol> element to set the marker type, but it’s not recommended as it’s considered as deprecated and not supported by all browsers.

You can also use these properties on specific <li> elements to customize the marker of a specific item in the list. This gives you more flexibility in customizing the look of your lists.

Scroll to Top