CSS

What is HTML list Tags and how to use

Pinterest LinkedIn Tumblr

HTML list tags are important element for who is learning HTML language. Someone doesn’t understand some tags, attributes, etc. If you are a new learner in HTML language and if you don’t know what is HTML list tags, I will tell you what is HTML list tag. I will also show how to use HTML list tags.

Normally, we can create various types of a list like ordered & unordered. HTML provides both type of list in the document. It’s the best way to create a list in your HTML template.

Let’s Start

If you want to create an ordered list, you have to use the following tags:

<ol>
  <li>Order Item One</li>
  <li>Order Item Two</li>
  <li>Order Item Three</li>
  <li>Order Item Four</li>
  <li>Order Item Five</li>
</ol>

On the other hand, If you want to create an unordered list, you have to use the following tags:

<ul>
  <li>Order Item One</li>
  <li>Order Item Two</li>
  <li>Order Item Three</li>
  <li>Order Item Four</li>
  <li>Order Item Five</li>
</ul>

Let’s describe what is “ol” & “ul”.

Two types of list tag available in HTML. When you use ol tag, it will create a list with number format like below:

On the other hand, When you use the ul tag, it will create a list with a bullet point format. You can’t count how many list item has been added in the list. If you don’t satisfied with this type of bullet, you can change these bullets with CSS.

If you want to change your list bullets just put the following codes in your CSS file. It will be to change your default list style.

ul {list-style-type: square;}

Note that, you can use the following value in your CSS property value:

  • circle
  • decimal
  • square
  • lower-roman
  • upper-roman

You can see this reference.

I hope you have learned about the HTML list tag. May you don’t face any problem to create an HTML list in your website template. If you face any type of problem, don’t hesitate to tell me. I will try to help you so that you can fix your coding problem.

If you like my writing, see my other article Best jquery table plugin with pagination.

I'm a Web Developer. I have been working with WordPress in different online marketplace. I always try to help others. If you need any type of help about web, you can contact with me.

Write A Comment