HTML Basics-LISTS tag, type of lists and the unordered list

There are three types of lists in the HTML, Ordered list, unorderedlist or definition or description list. These lists define a block structure of the document and are block formatting elements. Some HTML attributes like  style, type may be used. If the list is to be displayed horizontal the css property display:inline may also be used. Some other HTML elements like <dt>, <dd> may also be used to describe the term and description.  The details of the tags used in all the three types of the lists and elements commonly used with them are mentioned below in brief –

 

HTML Basics-LISTS tag, type of lists and the unordered list

<DL>…</DL>      Used to define a Definition or Description List 
<OL>…</OL>      Used to define an Ordered List

<UL>…</UL>      Used to define an Unordered List

<li> … </li>          Used to define a list item.

<dt>…</dt>          sed in definition or description list to define term.

          <dd>…</dd>             Used in definition or description list to define the definition

                                                    

or description

 

         These HTML attributes can also be used in HTML  lists –

Style–This attribute is used to define the style of the bullets.                         
Type -This attribute is used to define the type ofnumbering

          To display the list horizontally use css property display:inline.

 

         Other HTML elements can be used and a list can be nested inside the list.

 

The Unordered List

<ul> will be the starting tag and </ul> will be the closing tag in an unordered list. Each item in side the list will start with <li> tag and end with </li> tag. A bullet mark will be displayed before each list item.

Example, without using any attribute –  

Result -

 

<ul>

<li>note books</li>                          •note books

<li>pens</li>                                     •pens

<li>pencils</li>                                 •pencils

<li>erasors</li>                                 •erasors

</ul>

The style of the marker may be defined using the style attribute in an unordered list.

 List-style-type:disk – This the default styele and the list items will be marked with a bullet.

Example using attribute list-style-type:disk –          

 Result -

 

<ul style=”list-style-type:disk”>                        

<li>note books</li>                                     •note books

<li>pens</li>                                               •pens

<li>pencils</li>                                           •pencils

<li>erasors</li>                                          • erasers

</ul>

 

List-style-type:circle – Each list items will be marked with a

 

circle instead of the bullet.

 

Example using attribute list-style-type:circle –              

 

Result -

 

<ul style=”list-style-type:circle”>                     

<li>note books</li>                                               ○ Note books

<li>pens</li>                                                        ○ pens

<li>pencils</li>                                                    ○ pencils

<li>erasors</li>                                                    ○ erasors

</ul>

List-style-type:square - Each list items will be marked with a 

 

square. Example using attribute list-style-type:square –               

 

Result -

 

<ul style=”list-style-type:square”>                  

<li>note books</li>                                              n note books

<li>pens</li>                                                        n pens

<li>pencils</li>                                                    n pencils

<li>erasors</li>                                                    n erasors

</ul>

List-style-type:none – No list Item will bear any mark.

 

Example using attribute list-style-type:none –                

 

Result -

<ul style=”list-style-type:none”>                     

<li>note books</li>                                 note books

<li>pens</li>                                          pens

<li>pencils</li>                                      pencils

<li>erasors</li>                                     erasors

</ul>

Note- HTML 5 does not support the ‘type’ attribute in unoedered list

ordered list html, html tags list, ol type= a start= b, What are the attributes of list tag, how can you make a bulleted list in html, how can you make a numbered list in html, what is ordered list discuss its various attributes with suitable example, ordered and unordered list in html example, ordered and unordered list in html example pdf, What is ordered list various attributes with example, What is ordered list write the attributes of ordered list, What is ordered list in HTML and explain the attributes of ordered list