Using Bullet points in HTML

Hello all, in our last post we learned about HEADER and SEPARATORS tags. Today we will be discussing about using list tags in HTML.

While working on a document, we occasionally needs to format data. Sometimes we need to list down highlights using bullet points. But what if we have do to same in an HTML document. Then we use HTML List tags. Mainly there are two type of lists we use in HTML i.e. Ordered Lists and Unordered Lists. Here are the explanations. 


Unordered Lists:
Parent tag starts with <ul> tag and each list item with <li> tag. List items will be marked with bullet points (small black circles) in an web page.

Example:
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul> 

Preview:

• List Item 1
• List Item 2
• List Item 3

Default list item will be marked with small black circle completely filled. There are few more styles attributes which can be used to define the style of the marker.

Unordered Lists Style Attribute:
list-style-type:disc - The list items will be marked with bullets (default)
list-style-type:circle - The list items will be marked with circles
list-style-type:square - The list items will be marked with squares
list-style-type:none - The list items will not be marked

Use of Style Attribute:
Disc Style Attribute:
<ul style="list-style-type:circle">
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul> 

Preview:

• List Item 1
• List Item 2
• List Item 3

Same way other style attributes can be used.


Ordered Lists:
Parent tag starts with <ol> tag and each list item with <li> tag. List items will be marked with numbers in an web page.

Example:
<ol>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ol> 

Preview:

1. List Item 1
2. List Item 2
3. List Item 3

Default list item will be marked with numbers. There are few more type attributes which can be used to define the type of the marker.

Ordered Lists Type Attribute:
type="1" - The list items will be numbered with numbers (default)
type="A" - The list items will be numbered with uppercase letters
type="a" - The list items will be numbered with lowercase letters
type="I" - The list items will be numbered with uppercase roman numbers
type="i" - The list items will be numbered with lowercase roman numbers

Use of Type Attribute:
Numbers Type Attribute:
<ol type="A">
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ol> 

Preview:

1. List Item 1
2. List Item 2
3. List Item 3

Same way other type attributes can be used.

What's Next?
In our next post we will learn few more option for list tags and aligning text in a web page.