Lists in HTML

0
139
views

HTML provides list styles to create categories of items and make them behave according to the user demands.

HTML provides two type of lists.

  1. Ordered lists. [ol] – represented by ol.
  2. Un-ordered lists. [ul]- represented by ul.

Example

 

Ordered lists:

<ol>
    <li>tea</li>
    <li>cofee</li>
    <li>milk</li>
 </ol>

Un-ordered lists:

<ul>
    <li>tea</li>
    <li>cofee</li>
    <li>milk</li>
 </ul>

Lists example explained

The tag <ul> and <ol> are used to describe that, which type of list does user/developer going to use into the web page.

And the content which is going to be visible in the browser is going to be in between the <li></li> tags.

 

Nested lists in HTML

One can use the list under an already defined list-item, this can make it a nested list. Or you can say list under list.

<ul>
    <li>tea</li>
     <ol><li>starbucks</li>
    <li>taj</li>
    <li>redlabel</li>
    </ol>
    <li>milk</li>
    <ol><li>amul</li>
    <li>mother dairy</li>
    <li>london dairy</li>
    </ol>
  </ul>

 

Linked list in HTML

One can use the list items as a link to other pages to create a menu.

 

Example

<ul>
    <li>tea</li>
     <ol><a href="#"><li>starbucks</li></a>
    <a href="#"><li>taj</li></a>
    <a href="#"><li>redlabel</li></a>
    </ol>
        <li>milk</li>
     <ol><a href="#"><li>amul</li></a>
    <a href="#"><li>mother dairy</li></a>
    <a href="#"><li>london dairy</li></a>
    </ol>
  </ul>

The list-style-type property is used to define the style of the list item bullets shape and value:

Value Description
disc Sets a bullet (default)
circle Sets a circle
square Sets a square
none The list items will not be marked

 

The type property is used to define the number of the list item

 

Type Description
type=”1″ numbered with numbers (default)
type=”A” numbered with uppercase letters
type=”a” numbered with lowercase letters
type=”I” numbered with uppercase roman numbers
type=”i” numbered with lowercase roman numbers

 

 

<ul style="list-style-type:square">
    <li>tea</li>
     <ol type="I"><a href="#"><li>starbucks</li></a>
    <a href="#"><li>taj</li></a>
    <a href="#"><li>redlabel</li></a>
    </ol>
        <li>milk</li>
     <ol><a href="#"><li>amul</li></a>
    <a href="#"><li>mother dairy</li></a>
    <a href="#"><li>london dairy</li></a>
    </ol>
  </ul>