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