LIST


A List is a collection of items,which might be organized in a sequential and unsequential manner.All lists may contain one or more list elements.There are three different types of HTML lists:

Types of List In Html

1.Ordered List or Numbered List (ol)
2.Unordered List or Bulleted List (ul)
3.Description List or Definition List (dl)
list
<ul> − An unordered list. This will list items using plain bullets.
<ol> − An ordered list. This will use different schemes of numbers to list your items.
<dl> − A definition list. This arranges your items in the same way as they are arranged in a dictionary
<li> − The <li> tag is used inside ordered lists(<ol>), unordered lists (<ul>);.
   <ol>
The ordered list is used to represent data in a Numbers list by default. The <ol> tag is used to create ordered lists. Similar to unordered lists, each item in the ordered list must be a <li> tag.

syntax

<html>
<head>
<title>list</title>
</head>
<body>
<ol>
<li>Red</li>
<li>Blue</li>
<li>Black</li>
<li>Green</li>
</ol>
</body>
</html>

Output

  1. Red
  2. Blue
  3. Black
  4. Green

Types of ordered list

Type Example
Number= "1" 1,2,3
Capital-letter = "A" A,B,C
Small-lette= "a" a,b,c
Upper-Roman= "I" i,ii,iii
Lower-Roman= "i" I,II,III

For Example

<ol type="A">
<li>Red</li>
<li>Blue</li>
<li>Black</li>
<li>Green</li>
</ol>

output

  1. Red
  2. Blue
  3. Black
  4. Green

   ul
The <ul> tag defines an unordered (bulleted) list. Use the <ul> tag together with the <li> tag to create unordered lists.

syntax

<html>
<head>
<title>list</title>
</head>
<body>
<ul>
<li>Apple</li>
<li>Mango</li>
<li>Banana</li>
<li>Grapes</li>
</ul>
</body>
</html>

Output


Types of unordered list

Type Example
disc
square
circle

For Example

<ul type="circle">
<li>Apple</li>
<li>Mango</li>
<li>Banana</li>
<li>Grapes</li>
</ul>

output

   dl
A defination list refers to a collection of terms with their corresponding description.

The 3 HTML description/defination list tags are given below:

1)DL => DL is a container element that consists of the DT and DD sub elements.It Specifies that a defination list will be created using these elements.
2) DT => Specifies the term to be define or describe
3) DD => Specifies the defination or description of the term.


syntax

<html>
<head>
<title>list</title>
</head>
<body>
<dl>
<dt>HTML</dt>
<dd>Hyper Text Markup Language.It is used for create a website or Webpages.</dd>
</dl>
</body>
</html>

Output

HTML
       Hyper Text Markup Language.It is used for create a website or Webpages.

Nested list

A nested list is a list inside another list. You can create a nested unordered list, or a nested ordered list, or even an ordered list nested inside an unordered one.

For Example

<html>
<head>
<title>list</title>
</head>
<body>
<ol>
<li>Colours Name</li>
<ul>
<li>Red</li>
<li>Blue</li>
<li>Black</li>
<li>Green</li>
</ul>
<li>Fruits Name</li>
<ul>
<li>Apple</li>
<li>Mango</li>
<li>Banana</li>
<li>Grapes</li>
</ol>
</ul>
</body>
</html>

Output

  1. Colours Name
    • Red
    • Blue
    • Black
    • Green
  2. Fruits Name
    • Apple
    • Mango
    • Banana
    • Grapes