Search within TutorialsPark

HTML LISTS


HTML enables you to create list of related items to enable clear association.


My Favourite Cities

Ordered List

  1. NewYork
  2. London
  3. Berlin
  4. Bangalore
  5. Wellington

Unordered List

  • NewYork
  • London
  • Berlin
  • Bangalore
  • Wellington

1.List are used to group related contents together in a structured manner making content easy to read and understand.

Types of Lists

Ordered List:To group a set of related items in a specific numbered order.

Unordered List:To group a set of related items in no specific order

Definitions List:To group a set of related terms and their definitions.

Nested List:To create a list within another list(i.e nested).


Ordered List

1. An Ordered list has each item numbered, this is useful to provide sequential instructions.Ordered list is used extensively in formal documents.

2. The Ordered element < ol > encapsulates the complete list, and list element < li > encapsulates each of list items .

Ordered List Example

Give it a TRY! »


Unordered List

1. Unordered list is similar to ordered list but the numerals are replaced with bullet points.

2. Unordered list is created within unordered tag < ul > and similar to ordered list ,list items are placed within list tag < li > .

3. Unordered list attribute " list-style-type" property can be used to replace bullet points with disc, circular and square bullets.

Example Unordered List

Give it a TRY! »




Definition List

1. The Structure of definiton list is a term followed by its description or definition.

2. Its created with a Definition list tag < dl > encapsulating the complete list .

3. Within each < dl > tag you have a pair of definition term <dt> and definition description element <dd>.

4. <dt> contains definition term, while <dd> contains the definition or description.

Example Definition List

Give it a TRY! »




Nested List

1. Nested list is created by inserting a list within a list.The Sole idea behind this is to create a sublist for a main list item .

3. The Sublist list is put inside the <li> element of the main list .

Example of Nested List

Give it a TRY! »




Ordered List: Starting with user defined order.

Example

Give it a TRY! »






Related Examples

Related Tags