tutorialstonight logo
A Platform To Learn To Code

HTML LISTS



HTML list provide us a way to present the contents (data or anything else) in the form of a list.

There are three type of lists defined by HTML:

  1. Unordered List
  2. Ordered List
  3. Description List


1.)HTML Unordered List

Unordered list is a collection of items which has no specific order.

Unordered list is formed using <ul> tag. Inside this tag we use <ul> tag to create a list. List item is marked with a small black circle by default.

Example:

HTML unordered list:

  • Joy
  • Smile
  • Happiness

Example:

Example

Run the code

HTML Unordered list - item marker

As mentioned above the default item marker in HTML unordered list is disk but we can alter these markers using CSS List-style-type property or by using type attribute.

Type Description
type="disk" List items is marked as disk"Default"
type="circle" List items is marked as circle
type="square" List items is marked as square
type="none" List items is not marked

We have used CSS list-style-type in example below but you can do the same using type attribute.

We can use Disk( which is default marker),circle,square and none as a marker of list items.

Example

Run the code

Note: We can also use attribute <ul type="disk"> instead of using CSS property list-style-type.


Example

Run the code

Note: We can also use attribute <ul type="circle"> instead of using CSS property list-style-type.


Example

Run the code

Note: We can also use attribute <ul type="square"> instead of using CSS property list-style-type.


Example

Run the code

Note: We can also use attribute <ul type="none"> instead of using CSS property list-style-type.



2.)HTML Ordered List

HTML Ordered list creates numbered lists instead of bullets.

For creating Ordered list <ol> tag is used.

The numbering starts from 1 by default.

Example

Run the code

HTML Ordered list - type attribute

type attribute creates different types of numberings.like-Number,roman,alphabet etc.

Type Description
type="1" List items is numbered numeral"Default"
type="A" List items is numbered upper-case alphabet
type="a" List items is lower-case albhabet
type="I" List items is numbered upper-case Roman number
type="i" List items is numbered lower-case Roman number

Example:

Example

Run the code

Example

Run the code

Example

Run the code

Example

Run the code

Example

Run the code

HTML Ordered List - Start attribute

HTML provides a type attribute to specify the starting point of the list items.

Type Description
<ol type="1" start="20" Numbering of items start from 20
<ol type="A" start="20" Numbering of items start from T
<ol type="a" start="20" Numbering of items start from t
<ol type="I" start="20" Numbering of items start from XX
<ol type="i" start="20" Numbering of items start from xx

Example:

Example

Run the code

3.)HTML Description List

Third type of HTML list is Description list.

Description list is a list of items with description or definition of each list item.

<dl> tag is used to define the description list.Iside <dl> tag we use <dt> tag to define terms of list and <dd> tag gives definition to the terms

Example:

Example

Run the code