Lists

Lists are used all the time on the web. Articles, website navigation menus, and product features on e-commerce websites all make frequent use of lists – even when you can’t tell that a list is being used just by looking at the web page.

Information on your web page can be listed using the List feature of HTML. There will be a set of reasons you may have for including a list in your web pages. These reasons can vary from inserting your user's ten favorite music albums on the page or may include visitors' names along with their favorite hobby to list down in a web document. There may be plenty of reasons. So in simple terms, you can provide numbered or orderly place your information as a category or subcategory, which might increase your document's readability. In this chapter, you will learn how to use lists and the different tags used in listing your data.

Types of HTML lists are:
  1. Ordered List or Numbered List (ol)
  2. Unordered List or Bulleted List (ul)
  3. Description List or Definition List (dl)
  4. Nested List

Ordered List or Numbered List

HTML Ordered List or Numbered List displays elements in numbered format. The HTML ol tag is used for ordered list. We can use ordered list to represent items either in numerical order format or alphabetical order format, or any format where an order is emphasized.

In the ordered HTML lists, all the list items are marked with numbers by default. It is known as numbered list also. The ordered list starts with <ol> tag and the list items start with <li> tag.

Attributes used with <ol> are:
  1. Type
  2. Start
  3. Value
  4. Reversed
Type Attribute
The type attribute of the <ol> tag, defines the type of the list item marker. This attribute can also be used with <li> tag.
TypeDescription
type="1" The list items will be numbered with numbers (default)
type="A" The list items will be numbered with uppercase letters
type="a" The list items will be numbered with lowercase letters
type="I" The list items will be numbered with uppercase roman numbers
type="i"The list items will be numbered with lowercase roman numbers

Start Attribute
Using this attribute any value can be set as the starting position.

Value Attribute
Using this attribute the numbering sequence can be changed in the middle of an ordered list.
It is to be specified with the <li> tag.

Reversed Attribute
To reverse the number of a list, simply add the reversed attributed to the opening <ol> tag. It will display the list in descending order. If we are seeing the result in Microsoft browsers it do not support the reversed attribute. If you use this attribute, bear in mind that visitors using Internet Explorer or Edge will see standard numbering.

Order List Examples



<!DOCTYPE html>
<html>
<head>
<title>Example of Order List</title>
</head>
<body>

<p>Example 1 - Creating Order List</p>
<ol>
<li>Maths</li>
<li>Physics</li>
<li>Computer Science</li>
<li>Language</li>
</ol>


<p>Example 2 - Creating Order List with TYPE attribute</p>
<ol type="A">
<li>Maths</li>
<li>Physics</li>
<li>Computer Science</li>
<li>Language</li>
</ol>


<ol type="i">
<li>Maths</li>
<li>Physics</li>
<li>Computer Science</li>
<li>Language</li>
</ol>



<p>Example 3 - Creating Order List with START attribute</p>
<ol start="14">
<li>Maths</li>
<li>Physics</li>
<li>Computer Science</li>
<li>Language</li>
</ol>



<p>Example 4 - Creating Order List with VALUE attribute</p>
<ol start="14">
<li>Maths</li>
<li>Physics</li>
<li value="22">Computer Science</li>
<li>Language</li>
</ol>


<p>Example 5 - Creating Order List with REVERSED attribute</p>
<ol reversed>
<li>Maths</li>
<li>Physics</li>
<li value="22">Computer Science</li>
<li>Language</li>
</ol>



</body>
</html>

Example 1 - Creating Order List

  1. Maths
  2. Physics
  3. Computer Science
  4. Language

Example 2 - Creating Order List with TYPE attribute

  1. Maths
  2. Physics
  3. Computer Science
  4. Language
  1. Maths
  2. Physics
  3. Computer Science
  4. Language

Example 3 - Creating Order List with START attribute

  1. Maths
  2. Physics
  3. Computer Science
  4. Language

Example 4 - Creating Order List with VALUE attribute

  1. Maths
  2. Physics
  3. Computer Science
  4. Language

Example 5 - Creating Order List with REVERSED attribute

  1. Maths
  2. Physics
  3. Computer Science
  4. Language


Unordered list OR Bullet List

Unordered list is nothing but the collection of related items which has no special order or sequence. The list item in the list is indicated by bullet. This is also known as bullet list. Unordered list starts with <ul> tag and list item starts with <li> tag.

Attributes used with <ul> are:
  1. Type
Type Attribute
Used to specify type of list item like disk, circle and square. Default type is disk.

Definition list

Definition list has two parts, first is definition term and second is actual definition. The <dl> tag is used to create definition list. The <dl> tag encloses <dt> and <dd> tags which are used for definition term and actual definition respectively.

<dl> Stands for defination list
<dt> Stands for defination term
<dd> Stands for defination

Examples



<!DOCTYPE html>
<html>
<head>
<title>Example of Unorder List</title>
</head>
<body>

<p>Example 1 - Creating Unorder List</p>
<ul>
<li>Maths</li>
<li>Physics</li>
<li>Computer Science</li>
<li>Language</li>
</ul>


<p>Example 2 - Creating Unorder List with TYPE attribute</p>
<ol type="circle">
<li>Maths</li>
<li>Physics</li>
<li>Computer Science</li>
<li>Language</li>
</ol>


<ol type="square">
<li>Maths</li>
<li>Physics</li>
<li>Computer Science</li>
<li>Language</li>
</ol>



<p>Example 3 - Creating defination List</p>

<dl> <dt>URL <dd>Universal Resource Locator <dt>W3C <dd>World Wide Web Consortium <dt>PNG <dd>Portable Network Graphics </dl>


</body>
</html>

Example 1 - Creating Unorder List

  • Maths
  • Physics
  • Computer Science
  • Language

Example 2 - Creating Unorder List with TYPE attribute

  1. Maths
  2. Physics
  3. Computer Science
  4. Language
  1. Maths
  2. Physics
  3. Computer Science
  4. Language

Example 3 - Creating defination List

URL
Universal Resource Locator
W3C
World Wide Web Consortium
PNG
Portable Network Graphics