HTML Lists

83
views
html lists

There are three types of standard lists in html. These are called Ordered List, Unordered List and description list.

1Unordered list

Unordered list is useful when the sequence is not important.

Unordered list is wrapped inside <ul> and </ul> tags.
Here, ul stands for unordered list.

Each list item is wrapped inside <li> and </li> tags.
Here, li stands for list item.

Output
  • Cats
  • Dogs
  • Rats

Unordered List Item Marker

There are four types of values for marking unordered list items. These are-

  • disc(default)
  • square
  • circle
  • none

The marking style can be specified in the opening tag of an unordered list using the attribute name-value pair.

Output
  • Cats
  • Dogs
  • Rats
Similarly you can replace disc with any other value like disc or circle.

When the none value is specified then no marker is shown for list items.

2Ordered list

An ordered list is useful when the sequence is important.

Ordered list is wrapped inside <ol> and </ol> tags.
Here, ol stands for ordered list.

Each list item is wrapped inside <li> and </li> tags.
Like unordered list, li stands for list item.

Output
  1. Cats
  2. Dogs
  3. Rats

Ordered List Item Marker

There are five types of values for marking ordered list items. These are-

  • 1 (The list items will be numbered with numbers (default))
  • A (List items with uppercase letters)
  • a (List items with lowercase letters)
  • I (List items with uppercase roman numbers)
  • i (List items with lowercase roman numbers)

The marking style can be specified in the opening tag of an unordered list using attribute name-value pair.

Example for numbered ordered list

Output
  1. Coffee
  2. Tea
  3. Milk
Similarly you can replace 1 with any other value mentioned above.

Important Difference between ordered and unordered list

The attribute name used to style the unordered list is list-style-type The attribute name used to style the ordered list is type

3Description Lists

Suppose you have two items and want to write a few points under each item in a list.

  • Description list is wrapped inside <dl> and </dl> tags.
  • The description title is wrapped inside <dt> and </dt> tags.
  • The description data is wrapped inside <dd> and </dd> tags.
Output
Coffee
– black hot drink
Milk
– white cold drink

4Nested Lists

Lists can be nested with other lists. List items can also contain other list, images and links.

Output
  • Coffee
  • Tea
    • Black tea
    • Green tea
  • Milk

LEAVE A REPLY

Please enter your comment!
Please enter your name here