logo

HTML Lists

Lists are used to write the instructions with a manner, the terms or the definitions of terms. There are three types of lists.

Example

Ordered lists

  1. Mix both solutions
  2. Stir them well.
  3. Add a few drops of the sulphuric acid.
  4. Heat it up to 20 minutes at 88 Celsius temperature.

Unordered lists

  • Sulphuric Acid
  • Temperature
  • Solution1
  • Solution2

Definition lists

String
The string is the group of characters in the double quotation marks.
Operators
The operators perform operations on operands and do calculations.
Try </>

1. Ordered list

we make ordered lists where the order is necessary for the items or instructions. When we give instructions in an ordered manner then we use ordered list.

We take the same example of the recipe to make a difference between ordered and unorodered lists. For example, we are given instructions in an ordered manner to make a recipe.

Example

<p>Directions to make a recipe(with order)</p>
<ol>
 <li>Place all ingredients except the kitchen in the crock pot.</li>
 <li>stir until mixed.</li>
 <li>add the chicken and coat well with the sauce.</li>
</ol>
Try </>

ol stands for ordered list. li stands for list item.

By default, ordered lists are marked with the decimal numbers.

Ordered list Attributes

reversed Attribute

reversed attribute reverses the numbering for the list items.

Example

Directions to make a recipe(with order)

  1. Place all ingredients except the kitchen in the crock pot.
  2. stir until mixed.
  3. add the chicken and coat well with the sauce.
  4. cover and cook on higher for 2-3 hours or on low for 7-8 hours.
Try </>

start Attribute

start attribute gives a starting numbering value to the ordered list.

Example

Directions to make a recipie(with order)

  1. place all ingredients except the kitchen in the crock pot.
  2. stir until mixed.
  3. add the chicken and coat well with the sauce.
  4. cover and cook on higher for 2-3 hours or on low for 7-8 hours.
Try </>

type Attribute

type attribute defines the type of list item markers.

Example

Directions to make a recipie(with order)

  1. place all ingredients except the kitchen in the crock pot.
  2. stir until mixed.
  3. add the chicken and coat well with the sauce.
  4. cover and cook on higher for 2-3 hours or on low for 7-8 hours.
Try </>

2. Unordered list

We use unordered lists where the order of items is not necessary. For example, ingredients can be written in an unordered manner.

Example

<ul>
 <li>Plain Dad's Chicken Breast</li>
 <li>1 cup canned tomato sauce</li>
 <li>half cup ketchup</li>
</ul>
Try </>

ul stands for unordered list. li stands for list item.

By default, unordered lists are marked with the bullets.

3. Definition lists

When we define the terms, then we use definition lists. Here is a simple example

Example

<dl>
 <dt>Google</dt>
 <dd>It is a software that indexes the pages and brings those pages in search results to provide the information to the users.</dd>
 <dt>Website</dt>
 <dd>It is a combination of web pages that provide the information.</dd>
</dl>
Try </>

dl stands for description list. dt is for description term. dd stands for description definition.

It is mostly used for name-value, question-answer pairs.

Nested lists

We can make lists of the list. We can make a combination of ordered list and unordered lists.

Example

Nested Lists

  1. Instruction 1
  2. Instruction 2
  3. Instruction 3
    • item 1
    • item 2
    • item 3
  4. Instruction 3
Try </>

Was this article helpful?