Previous Next

HTML Lists

HTML contains following three types of lists:

  • <ul> - An unordered list. In this items are listed using plain bullets.
  • <ol> - An ordered list. In this items are listed in numeric order.
  • <dl> - A definition list. Lists terms and their descriptions.

 


  

HTML Unordered Lists

This list is created by using HTML <ul> tag.

Each item in the list is marked with a bullet.

This is used to show related items that have no special order or sequence.

Example

<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Mango</li>
<li>Carrot</li>
</ul>
</body>
</html>

Result:

  • Apple
  • Banana
  • Mango
  • Carrot

 


 

 

The type Attribute

Use type attribute for <ul> tag to specify the type of bullet.

Default type is disc.

Following are the possible options:

<ul type="square">
<ul type="disc">
<ul type="circle">

Example

Using type='square'

<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul type="square">
<li>Apple</li> <li>Banana</li> <li>Mango</li> <li>Carrot</li>
</ul>
</body>
</html>

Result:

  • Apple
  • Banana
  • Mango
  • Carrot

Example

Using type='disc'

<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
   <ul type="disc">
   <li>Apple</li>
   <li>Banana</li>
   <li>Mango</li>
   <li>Carrot</li>
   </ul>
</body>
</html>

Result:

  • Apple
  • Banana
  • Mango
  • Carrot

Example

Using type="circle"

<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
   <ul type="circle">
   <li>Apple</li>
   <li>Banana</li>
   <li>Mango</li>
   <li>Carrot</li>
   </ul>
</body>
</html>

Result:

  • Apple
  • Banana
  • Mango
  • Carrot

 


 

 

HTML Ordered Lists

Use <ol> tag to list items in numeric order.

Example

<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol>
<li>Apple</li>
<li>Banana</li>
<li>Mango</li>
<li>Carrot</li>
</ol>
</body>
</html>

Result:

  1. Apple
  2. Banana
  3. Mango
  4. Carrot

 


 

 

The type Attribute

You can use type attribute for <ol> tag to specify the type of numbering you like.

By default it is a number.

Following are the possible options:

<ol type="1"> - Default-Case Numerals.
<ol type="I"> - Upper-Case Numerals.
<ol type="i"> - Lower-Case Numerals.
<ol type="a"> - Lower-Case Letters.
<ol type="A"> - Upper-Case Letters.

Example

Using type='1'

<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
   <ol type="1">
   <li>Apple</li>
   <li>Banana</li>
   <li>Mango</li>
   <li>Carrot</li>
   </ol>
</body>
</html>

Result:

  1. Apple
  2. Mango
  3. Mango
  4. Carrot

Example

Using  type="I"

<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
   <ol type="I">
   <li>Apple</li>
   <li>Banana</li>
   <li>Mango</li>
   <li>Carrot</li>
   </ol>
</body>
</html>

Result:

  1. Apple
  2. Banana
  3. Mango
  4. Carrot

Example

Using type="i"

<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
   <ol type="i">
   <li>Apple</li>
   <li>Banana</li>
   <li>Mango</li>
   <li>Carrot</li>
   </ol>
</body>
</html>

Result:

  1. Apple
  2. Banana
  3. Mango
  4. Carrot

Example

Using  type="A"

<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
   <ol type="A">
   <li>Apple</li>
   <li>Banana</li>
   <li>Mango</li>
   <li>Carrot</li>
   </ol>
</body>
</html>

Result:

  1. Apple
  2. Banana
  3. Mango
  4. Carrot

Example

Using type="a"

<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
   <ol type="a">
   <li>Apple</li>
   <li>Banana</li>
   <li>Mango</li>
   <li>Carrot</li>
   </ol>
</body>
</html>

Result:

  1. Apple
  2. Banana
  3. Mango
  4. Carrot

 


 

 

The start Attribute

Use start attribute for <ol> tag to specify the starting point of numbering.

Following are the possible options:

<ol type="1" start="5">    - Numerals starts with 5.
<ol type="I" start="5">    - Numerals starts with V.
<ol type="i" start="5">    - Numerals starts with v.
<ol type="a" start="5">    - Letters starts with e.
<ol type="A" start="5">    - Letters starts with E.

Example

Using <ol type="i" start="4" >

<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
   <ol type="i" start="4">
   <li>Apple</li>
   <li>Banana</li>
   <li>Mango</li>
   <li>Carrot</li>
   </ol>
</body>
</html>

Result:

  1. Apple
  2. Banana
  3. Mango
  4. Carrot

 


 

 

HTML Definition Lists

Definition lists are used to show terms and their descriptions.

Definition List makes use of following three tags.

  • <dl> - Defines the start of the list
  • <dt> - A term
  • <dd> - Term definition
  • </dl> - Defines the end of the list

Example

<!DOCTYPE html>
<html>
<head>
<title>HTML Definition List</title>
</head>
<body>
<dl>
<dt><b>HTML</b></dt>
<dd>This stands for Hyper Text Markup Language</dd>
<dt><b>HTTP</b></dt>
<dd>This stands for Hyper Text Transfer Protocol</dd>
</dl>
</body>
</html>

Result:

HTML
This stands for Hyper Text Markup Language
HTTP
This stands for Hyper Text Transfer Protocol

Previous Next