Welcome Guest! (App Version 5.16)

websitnero logo name

HTML Lists

Overview

  • There are 3 lists in HTML - Unordered List, Ordered List & Defination List.
  • Ordered Lists have data ordered in - Numbers, Alphabets or Roman Numerals.
  • Unordered Lists have data having symbols infront of them such as - circles or squares.

Different kinds of lists in HTML

In HTML there are 3 types of lists in HTML -- unordered, ordered and definition.

While unordered lists add bullets in front of items, ordered lists add numbers in front of the list. Definition list has 2 parts - definition title and a definition description.

All the 3 lists are used for different purposes. While unordered lists are used where the order is not of much importance, such as list of items to buy from super-market, ordered lists are used where the order is of importance. For example, the Country Ranking based on Olympic Medals or Ranks of Students based on marks achieved in a Class Test..

Definition lists are mostly used in glossary, where there is a title and then explanation or reference about it.


Unordered Lists

Unordered list has bullet points or black circles in front of all list items. Look at the example below:

Example

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

<ul type="square">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

<ul type="disc">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

<ul type="circle">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

Output:

  • One
  • Two
  • Three
  • One
  • Two
  • Three
  • One
  • Two
  • Three
  • One
  • Two
  • Three

Ordered Lists

Ordered list has numbers in front of all list items. Here the order of list items has its importance. Look at the example below:

Example

<ol>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ol>

<ol type="1">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ol>

<ol type="I">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ol>

<ol type="i">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ol>

<ol type="A">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ol>

<ol type="a">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ol>

Output:

  1. One
  2. Two
  3. Three
  1. One
  2. Two
  3. Three
  1. One
  2. Two
  3. Three
  1. One
  2. Two
  3. Three
  1. One
  2. Two
  3. Three
  1. One
  2. Two
  3. Three

Definition Lists

Definition lists are not used very much. You may use them however sometimes to provide Definition topics with their Definitions or details. Definition lists have 2 parts - dt (Definition type) and dd (Definition description).

Example

<dl>
  <dt>Computer</li>
  <dd>A device that helps in computing.</dd>
  <dt>Love</li>
  <dd>An awesome feeling in heart.</dd>
</dl>

Output:

Computer
A device that helps in computing.
Love
Warm feeling between 2 hearts.
Further Reading

1. Styling lists

WebsiteNero is highly optimized for learning various website developing technlogies. We try our best to add maximum modules and examples to help learn the concepts clearly and vividly. We try to present all content and examples as simple as we can removing any complexity to hurdle easy understanding. We try best provide you with worthful content, but we cannot guarantee full correctness of all the content on this site. While using this website, you agree to have read and accepted all our terms of use and conditions, cookie, and privacy policy. Copyright, 2013-2018 by websitenero.com. All Rights Reserved.