Html List Elements

html list:

html list plays a great importance on developing site. .In html there are common tow types of html list.They are ordered and unordered list.

Example for ordered list and unordered list –

                        Ordered list                   Unordered list
  1. First
  • First
  1. Second
  • Second
  1. Third
  • Third

Unordered html list(<ul>) :

It is one of the mostly used elements of html4/html5. Unordered lists will output data as ordered list.

Below is the example code of the unordered list :


       <li>I am one</li>

       <li>I am tow</li>

       <li>I am three</li>


Use of Unordered list : Unordered list is perfect for building navigation links. From here you can also style anchor links to appear as block elements on your page. By Unordered list you can get a beautiful header for your site.

Ordered html list (<ol>):

Ordered list is great for keeping number tasks in line. The order of your internal list (li) will describe , how you want to present data.

Example for ordered list:


       <li>I am one</li>

       <li>I am tow</li>

       <li>I am three</li>


Use of Ordered list: Recipe data, daily tasks, favorites items are used for Ordered list. top/recent logged in users are also a example of this. Blog comment is also depend on this Ordered list.

Data Definition html Lists (<dl>):

This list is not very popular . This list is used by web designer for creating complex formats of links or box content.

Example for Data Definition Lists:


<dt>First item </dt>

<dd>Description of first item</dd>

<dt>Second item </dt>

<dd>Description of Second item</dd>

<dt>Third item </dt>

<dd>Description of Third item</dd>


 html list attribute:

You can use type and start attribute for a get a great result.

Example for this:
<ol type="A" start="10">

<li>This is J</li>

<li>This is K</li>

<li>This is L</li>


is displayed as

  1. Item 1
  2. Item 2
  3. Item 3
Another example
<ol type="1" start="11">

<li>This is 11</li>

<li>This is 12</li>

<li>This is 13</li>


is rendered as:

11. This is 11

12. This is 12

13. This is 13

You can also learn about html table tag now after reading html table article.

Roy Jemee is a professional Blogger. Apart of blogging he likes to play with mathematics. He knows Blogging, Wordpress, PHP, javascript , SEO and some other.