Tutorials Tonight
Follow Us

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:

<ul>
  <li>Joy</li>
  <li>Smile</li>
  <li>Happiness</li>
</ul>
▶ 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.

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

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>
▶ Run the code

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>
▶ Run the code

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>
▶ 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.

<ol>
  <li>Banana</li>
  <li>Blueberry</li>
  <li>Strawberry</li>
</ol>
▶ 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:

<ol type="1">
  <li>Banana</li>
  <li>Blueberry</li>
  <li>Strawberry</li>
</ol>
▶ Run the code

<ol type="A">
  <li>Banana</li>
  <li>Blueberry</li>
  <li>Strawberry</li>
</ol>
▶ Run the code

<ol type="a">
  <li>Banana</li>
  <li>Blueberry</li>
  <li>Strawberry</li>
</ol>
▶ Run the code

<ol type="I">
  <li>Banana</li>
  <li>Blueberry</li>
  <li>Strawberry</li>
</ol>
▶ Run the code

<ol type="i">
  <li>Banana</li>
  <li>Blueberry</li>
  <li>Strawberry</li>
</ol>
▶ 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:

<ol type="A" start="20">
  <li>Banana</li>
  <li>Blueberry</li>
  <li>Strawberry</li>
</ol>
▶ 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:

<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>
▶ Run the code

Follow Us

Copyright © Tutorials Tonight. All Rights Are Reserved.