Using List in HTML
×
Home Courses Community Support
Using List in HTML

If we have a collection of information to note in our dairy then we arrange that in a sequence to make beautiful. To do same in web pages we have listing. HTML have three types of listing; Unordered List, Ordered List and Definition List.
 

Unordered List

Unordered List displays the content in sequence with bulleted icons by default. We use <ul> to represent unordered list and <li> to add list items.

See the example of fruit list -

<!DOCTYPE html>
<html>
<head><title>My Fruit List</title></head>
<body>
<ul>
<li>Mango</li>
<li>Banana</li>
<li>Apple</li>
<li>Pineapple</li>
</ul>

</body>
</html>

 

This code will print the fruit name list as below-


 

Ordered List

Ordered list display the list item in sequence with numbers by default. We use <ol> to represent ordered list and <li> to add list elements. Let's display previous list in ordered list-

<!DOCTYPE html>
<html>
<head><title>My Fruit List</title></head>
<body>
<ol>
<li>Mango</li>
<li>Banana</li>
<li>Apple</li>
<li>Pineapple</li>
</ol>
</body>
</html>

 

This code will print the fruit name list as below-


 

Type Attribute: HTML has an attribute type for table ordered list. By using this attribute you can decide the order type of list. Available order types are "1", "A", "a", "I" and "i". If you don't use this attribute then the default order type "1" will be printed.

Below is the syntax to use this attribute.

<ol type="A">
<li>Mango</li>
<li>Banana</li>
<li>Apple</li>
<li>Pineapple</li>
</ol>


Output of this code will be-


 

Description List

This list is used when we need to add a description of each item in list. <dl> is used to define the description list, <dt> used to define the list item and <dd> to give the description of list item.

See above list with description-

<!DOCTYPE html>
<html>
<head><title>My Fruit List</title></head>
<body>
<dl>
<dt>Mango</dt>
<dd>10 KG Mango purchased.</dd>
<dt>Banana</dt>
<dd>12 dozen Mango purchased.</dd>
<dt>Apple</dt>
<dd>10 KG Apple purchased.</dd>
<dt>Pineapple</dt>
<dd>10 KG Pineapple purchased.</dd>
</dl>
</body>
</html>


This code will print the fruit name list as below-


 

Nested List

We can use a list inside another list. See below example-

<ul>
<li>Mango</li>
    <ol>
    <li>Mango</li>
    <li>Banana</li>
    <li>Apple</li>
    <li>Pineapple</li>
    </ol>
<li>Apple</li>
<li>Pineapple</li>
</ul>


Output of below code is as below-

 

 

← Preview

Use of Comments in HTML

Next →

HTML Entities and Symbols

NOTES

Our mission is to provide highly effective and quality education via innovative solutions. Geeksdemy look forward to bridge the gap between in-demand technology and academics in order to deliver innovative, easy, interesting and affordable learning across the Globe.

Courses

  • Python
  • Game Development with Unity 3D
  • Arduino
  • PCB & Circuit Designing
  • Robotics and Embedded C
  • 8051/8052 Embedded Systems
  • QuadCopter & UAV
  • MATLAB with Robotics
  • Raspberry Pi
Learn On the Go!
Get the Android App
Get the iOS App