Lists in HTML:

In HTML we can also list the items. List is nothing but a number of connected items. I recommend you to always list menus. In HTML there are three type of lists. They are as follows:

  • <ul> : This tag is for unordered list
  • <ol> : This tag is for ordered list
  • <dl> : This tag is for description list

HTML Unordered List:

An unordered list is typically have no order and it is by default a bulleted list type. It will display on browser as a full black circle. The <ul> and </ul> tag is used for it. Each unordered list contain <li> and </li> tag and the content goes inside <li> tag.

Example:

Style Attribute in Unordered List:

You can change the style of list by “list-style-type” or “type” attribute. There are four types of styles in unordered list. They are as follows:

  • list-style-type:disc OR type:disc – marked as circle(default)
  • list-style-type:circle OR type:circle – marked as bullet
  • list-style-type:square OR type:square – marked as square
  • list-style-type:none OR type:none – will not marked

Example: Following example is for “Circle” type

Note:

You can also directly apply list type as follows:

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

Example: Following example is for “Square” type

Example: Following example is for “None” type

HTML Ordered List:

An ordered list is in order and it is by default display the list item in number format. The <ol> and </ol> tag is used for it. Each ordered list contain <li> and </li> tag and the content goes inside <li> tag.

 Example:

Style Attribute in Ordered List:

You can change the style of list by “type” attribute. There

are five types in HTML list for ordered list. They are as follows:

  • type:1 – marked as number(default)
  • type:A– marked as upper case alphabets
  • type:a – marked as lower case alphabets
  • type:I – marked as upper case roman number
  • type:I – marked as lower case roman number

Example: Following is the example with type “A”

Example: Following is the example with type “a”

Example: Following is the example with type “I”

Example: Following is the example with type “i”

HTML Description List:

HTML supports description list style which lists the item in a dictionary or encyclopaedia pattern. Description list have three different tag which are as follows:

  • <dl> and </dl> : defines start and end of description list
  • <dt> : list item which defines a term
  • <dd> : definition of list item

Example:

Nested List in HTML:

You can also make nested list. Also you can apply ordered list and unordered list in nested list. Lets have an example:

Example:

Horizontal List in HTML:

To show menus in horizontal form there are many ways to do it. But the most common way to do it is as follows.

Example:

 

Leave a Reply

Your email address will not be published. Required fields are marked *