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:

Unordered List
Ordered List
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

<ul>
  <li>Joy</li>
  <li>Smile</li>
  <li>Happiness</li>
</ul>

Try It

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.

<ul style="list-style-type:disk">
  <li>Joy</li>
  <li>Smile</li>
  <li>Happiness</li>
</ul>

Try It

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

<ul style="list-style-type:circle">
  <li>Joy</li>
  <li>Smile</li>
  <li>Happiness</li>
</ul>

Try It

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

<ul style="list-style-type:square">
  <li>Joy</li>
  <li>Smile</li>
  <li>Happiness</li>
</ul>

Try It

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

<ul style="list-style-type:none">
  <li>Joy</li>
  <li>Smile</li>
  <li>Happiness</li>
</ul>

Try It

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.

<ol>
  <li>Banana</li>
  <li>Blueberry</li>
  <li>Strawberry</li>
</ol>

Try It

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:

<ol type="1">
  <li>Banana</li>
  <li>Blueberry</li>
  <li>Strawberry</li>
</ol>

Try It

<ol type="A">
  <li>Banana</li>
  <li>Blueberry</li>
  <li>Strawberry</li>
</ol>

Try It

<ol type="a">
  <li>Banana</li>
  <li>Blueberry</li>
  <li>Strawberry</li>
</ol>

Try It

<ol type="I">
  <li>Banana</li>
  <li>Blueberry</li>
  <li>Strawberry</li>
</ol>

Try It

<ol type="i">
  <li>Banana</li>
  <li>Blueberry</li>
  <li>Strawberry</li>
</ol>

Try It

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:

<ol type="A" start="20">
  <li>Banana</li>
  <li>Blueberry</li>
  <li>Strawberry</li>
</ol>

Try It

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:

<dl>
  <dt>Banana</dt>
  <dd>:Banana is rich in fiber.</dd>
  <dt>Blueberry</dt>
  <dd>:Blueberries protect against memory loss.</dd>
  <dt>Strawberry</dt>
  <dd>:Strawberry is member of rose family</dd>
</dl>

Try It

❮ Prev Next ❯