Tutorial Manthra

Html allows developers to arrange data in the form of lists. There are 3 types of lists in html. All lists must contain one or more list elements. The 3 types of lists in html are

• <ul> : Unordered list. Each list item begins with a plain bullet points.
• <ol> : Ordered List. Each list item begins with a number.
• <dl> : Definition list. This arranges your items in the same way as they are arranged in a dictionary.

HTML Unordered List

An unordered list is a collection of related items that have no special order or sequence. Each item in the list is marked with a bullet. HTML <ul> tag is used to create unordered list. And each list item is created using <li> tag.

Example

<ul>
     <li>Mango</li>
     <li>Orange</li>
     <li>Apple</li>
     <li>Pineapple</li>
</ul>

Output

• Mango
• Orange
• Apple
• Pineapple

The type Attribute

Using the type attribute you can specify the type of bullets. The default is disc. The possible options are

<ul type = “square”>
<ul type = “disc”>
<ul type = “circle”>
<ul type = “none”>

Example square bullet

      <ul type = "square">
         <li>Mango</li>
         <li>Orange</li>
         <li>Apple</li>
         <li>Pineapple</li>
      </ul>

Output

• Mango
• Orange
• Apple
• Pineapple

Example disc bullet

      <ul type = "disc">
         <li>Mango</li>
         <li>Orange</li>
         <li>Apple</li>
         <li>Pineapple</li>
      </ul>

Output

• Mango
• Orange
• Apple
• Pineapple

Example circle bullet

      <ul type = "circle">
         <li>Mango</li>
         <li>Orange</li>
         <li>Apple</li>
         <li>Pineapple</li>
      </ul>

Output

• Mango
• Orange
• Apple
• Pineapple

Example no bullet

      <ul type = "none">
         <li>Mango</li>
         <li>Orange</li>
         <li>Apple</li>
         <li>Pineapple</li>
      </ul>

Output

• Mango
• Orange
• Apple
• Pineapple

HTML Ordered Lists

HTML ordered list is used if you want to arrange your list items into a numbered list items instead of bullets. <ol> tag is used to create numbered lists. Each list item is created using <li> tag as in ordered list. The numbering starts at 1 and is incremented by 1.

Example

      <ol type = "none">
         <li>Mango</li>
         <li>Orange</li>
         <li>Apple</li>
         <li>Pineapple</li>
      </ol>

Output

1. Mango
2. Orange
3. Apple
4. Pineapple

The type Attribute

Like in unordered lists here also we can use the type attribute. But here instead of bullets we specify the type of numbering. By default it is number. Other possible options are given below.

<ol type = “1”> – Default-Case Numerals.
<ol type = “A”> – Upper-Case Letters.
<ol type = “a”> – Lower-Case Letters.
<ol type = “I”> – Upper-Case roman numbers
<ol type = “i”> – Lower-Case roman numbers.

Example

Numbers

      <ol type = "1">
         <li>Mango</li>
         <li>Orange</li>
         <li>Apple</li>
         <li>Pineapple</li>
      </ol>

Output

1. Mango
2. Orange
3. Apple
4. Pineapple

Uppercase Letters:

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

Output

1. Mango
2. Orange
3. Apple
4. Pineapple

Lowercase Letters:

      <ol type = "a">
         <li>Mango</li>
         <li>Orange</li>
         <li>Apple</li>
         <li>Pineapple</li>
      </ol>

Output

1. Mango
2. Orange
3. Apple
4. Pineapple

Uppercase Roman Numbers:

      <ol type = "I">
         <li>Mango</li>
         <li>Orange</li>
         <li>Apple</li>
         <li>Pineapple</li>
      </ol>

Output

1. Mango
2. Orange
3. Apple
4. Pineapple

Lowercase Roman Numbers:

      <ol type = "i">
         <li>Mango</li>
         <li>Orange</li>
         <li>Apple</li>
         <li>Pineapple</li>
      </ol>

Output

1. Mango
2. Orange
3. Apple
4. Pineapple

The start Attribute

By default the list starts with one. If you wish you can change the starting point to any number using the start attribute.

Example

      <ol type = "1" start = "4">
         <li>Mango</li>
         <li>Orange</li>
         <li>Apple</li>
         <li>Pineapple</li>
      </ol>

Output

4. Mango
5. Orange
6. Apple
7. Pineapple

HTML Definition Lists

Another type of list supported by HTML is the definition list. It is used to list items which are of the form of a name value pair or items like in a dictionary or encyclopedia.

The tags used in a definition list are as follows.

• <dl> − Defines the start of the list
• <dt> − A term or a list title
• <dd> − Term definition or the description
• </dl> − Defines the end of the list

Example

      <dl>
         <dt>HTML</dt>
         <dd>This stands for Hyper Text Markup Language</dd>
         <dt>CSS</dt>
         <dd>This stands for Cascading Style Sheets</dd>
      </dl>

Output

HTML

This stands for Hyper Text Markup Language

CSS

This stands for Cascading Style Sheets

Nested HTML Lists

Html lists can be nested. i.e. another list can be inserted as a list item.

Note: The html list item can contain any type of html tags like images, hyperlinks or anything

Example

<ul>
<li>Vegetables</li>
  <li>Fruits
    <ul>
      <li>Mango</li>
      <li>Orange</li>
    </ul>
  </li>
  <li>Flowers</li>
</ul>

Output

• Vegetables
• Fruits
  • Mango
  • Orange
• Flowers