Welcome Guest! (App Version 3.1)

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 Numberals.
  • Unordered Lists have data having symbols infront such as - circles or squares.

Different kinds of lists in HTML

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

While unordered list adds bullets in front of list items, ordered list adds numbers in front of the list, but definition list is quite different. It has a definition title and then a definition description.

All the 3 lists are used for different purposes. While unordered list is used where the order is not of much importance, such as list of items to buy from super-market, ordered list is used where the order gets importance. For example, the Nations Ranking in Olympic as per their performance or medals won by them.

Definition list is used mostly like in glossary, where there is a title and then something about it.


Unordered Lists

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

<ul>
  <li>Apple</li>
  <li>Orange</li>
  <li>Mango</li>
  <li>Guava</li>
  <li>Grapes</li>
</ul>

Example

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

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:

<ol>
  <li>USA</li>
  <li>Russia</li>
  <li>China</li>
  <li>Germany</li>
  <li>France</li>
</ol>

Example

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

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

<dl>
  <dt>Computer</dt>
  <dd>A device that helps in computing.</dd>
  <dt>Love</dt>
  <dd>Warm feeling between 2 hearts.</dd>
</dl>

Example

<dl>
  <dt>Love</li>
  <dd>An awesome feeling in heart.</dd>
</dl>
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.