List Tag with its attributes

Ordered List

1. Ordered list start with <ol> tag and ends with </ol>.
2. All the items in this list are enclosed in <li> and </li> tags.
3. By default items in this list will get numbers as a markers.
4. We can change markers using attributes.

Unordered List

Unordered list start with <ul> tag and ends with </ul>.
All the items in this list are enclosed in <li> and </li> tags.
By default items in this list will get filled circle as a bullets.
We can change bullets using attributes.

Description List

HTML also supports description list.
It is a list of some phrase(term) and description of the phrase.
It has 3 tags
<dl> — For Creating list
<dt> — For Term
<dd> — For Description
ITVoyagers

Ordered List with its attributes

By default ordered list will mark each item with number. We can change this mark by using “type” attribute.

type tag has following values.

type = “a”

type = “A”

type = “i”

type = “I”

type = “1” (default)

type = “a”

If we want our list to mark with Lower case alphabets e.g. “a”.

we have to set “a” as value for “type” attribute in <ol> tag.

 

<!– Code :

<ol  type=”a” >
        <li>Python</li>
        <li>C</li>
        <li>Java</li>
        <li>C++</li>
</ol>

–>

Output:
  1. Python
  2. C
  3. Java
  4. C++

type = “A”

If we want our list to mark with Upper case alphabets e.g. “A”.

we have to set “a” as value for “type” attribute in <ol> tag.

 

<!– Code :

<ol  type=”A” >
        <li>Python</li>
        <li>C</li>
        <li>Java</li>
        <li>C++</li>
</ol>

–>

Output:
  1. Python
  2. C
  3. Java
  4. C++

type = “i”

If we want our list to mark with lower case Roman number e.g. “i”.

we have to set “i” as value for “type” attribute in <ol> tag.

 low

<!– Code :

<ol  type=”i” >
        <li>Python</li>
        <li>C</li>
        <li>Java</li>
        <li>C++</li>
</ol>

–>

Output:
  1. Python
  2. C
  3. Java
  4. C++

type = “I”

If we want our list to mark with Capital Roman number e.g. “I”.

we have to set “I” as value for “type” attribute in

tag.

 

<!– Code :

<ol  type=”I” >
        <li>Python</li>
        <li>C</li>
        <li>Java</li>
        <li>C++</li>
</ol>

–>

Output:
  1. Python
  2. C
  3. Java
  4. C++

Start Attribute : We can also set start mark from which we have to start our list. We have to use “start” attribute for it as shown bellow.

<!– Code :

<ol type=”1″ start=”4″>
        <li>Python</li>
        <li>C</li>
        <li>Java</li>
        <li>C++</li>
</ol>

–>

Output :
           
  1. Python
  2.        
  3. C
  4.        
  5. Java
  6.        
  7. C++

Reversed Attribute : We can display list in reverse order or descending order for this we have to add “reversed” attribute.

<!– Code :

<ol type=”1″ reversed>
        <li>Python</li>
        <li>C</li>
        <li>Java</li>
        <li>C++</li>
</ol>

–>

Output :
           
  1. Python
  2.        
  3. C
  4.        
  5. Java
  6.        
  7. C++
ITVoyagers

Unordered List with its attributes

Type attribute : If we want to change default bullet marker with other shapes like : square, disc and circle.

By default disc is set as a marker in unorder list.

Then we have to use “type” attribute, following are the values for “type” attribute.

type = “square”

type = “circle”

type = “disc” 

type =”none”

type = “square”

If we want our list to mark with square bullets then we have to set “square” as value for “type” attribute in <ul> tag.

 

<!– Code :

<ul  type=”square” >
        <li>Python</li>
        <li>C</li>
        <li>Java</li>
        <li>C++</li>
</ul>

–>

output of unordered list type square

type = “circle”

If we want our list to mark with circle bullets then we have to set “circle” as value for “type” attribute in <ul> tag.

 

<!– Code :

<ul  type=”circle” >
        <li>Python</li>
        <li>C</li>
        <li>Java</li>
        <li>C++</li>
</ul>

–>

output of unordered list type circle

type = “disc”

If we want our list to mark with disc bullets then we have to set “disc” as value for “type” attribute in <ul> tag.

<!– Code :

<ul  type=”disc” >
        <li>Python</li>
        <li>C</li>
        <li>Java</li>
        <li>C++</li>
</ul>

–>

output of unordered list type disc

type = “none”

If we don’t want any mark as bullets then we have to set “none” as value for “type” attribute in <ul> tag.

<!– Code :

<ul  type=”disc” >
        <li>Python</li>
        <li>C</li>
        <li>Java</li>
        <li>C++</li>
</ul>

–>

unordered list tag type none

Style Attribute : We can also change bullets using “style” attribute. We can set following values in “style” attribute:

style=”list-style-type:disc;”

style=”list-style-type:square;”

style=”list-style-type:circle;”

style=”list-style-type:none;”

style=”list-style-type:disc;”

If we want our list to mark with disc bullets then we have to set “list-style-type:disc;” as value for “style” attribute in <ul> tag.

 

<!– Code :

<ul  style=”list-style-type:disc;” >
        <li>Python</li>
        <li>C</li>
        <li>Java</li>
        <li>C++</li>
</ul>

–>

output of unordered list type disc

style=”list-style-type:square;”

If we want our list to mark with square bullets then we have to set “list-style-type:square;” as value for “style” attribute in <ul> tag.

 

<!– Code :

<ul  style=”list-style-type:square;” >
        <li>Python</li>
        <li>C</li>
        <li>Java</li>
        <li>C++</li>
</ul>

–>

output of unordered list type square

style=”list-style-type:circle;”

If we want our list to mark with circle bullets then we have to set “list-style-type:circle;” as value for “style” attribute in <ul> tag.

 

<!– Code :

<ul  style=”list-style-type:circle;” >
        <li>Python</li>
        <li>C</li>
        <li>Java</li>
        <li>C++</li>
</ul>

output of unordered list type circle

style=”list-style-type:none;”

If we don’t want any bullets then we have to set “list-style-type:none;” as value for “style” attribute in <ul> tag.

 

<!– Code :

<ul  style=”list-style-type:none;” >
        <li>Python</li>
        <li>C</li>
        <li>Java</li>
        <li>C++</li>
</ul>

unordered list tag type none
ITVoyagers

Description List

HTML supports Description list.

There are 3 tags use in creating Description list.

<dd> — Use to create Description list.

<dt> — Description term is enclosed in this tag.

<dd> — Description for the term is enclosed in this tag.

 

 

<!– Code :

<dl>
        <dt>
                  ITVoyagers
        </dt>

        <dd>
                ITVoyagers is an educational blog for information technology and computer science program.We have started this blog with a goal of meeting the requirements of learners to cope with the changing technology.
        </dd>
</dl>

–>

       
ITVoyagers        
       
ITVoyagers is an educational blog for information technology and computer science program.We have started this blog with a goal of meeting the requirements of learners to cope with the changing technology.        

Also checkout our other related blogs.

Leave a Comment