How to insert ordered and unordered lists in HTML with their type?

Lists in HTML

Lists are the arrangement of text, line, paragraph in a particular order. The order may be represented as bullet, numbering or alphabetical. Lists in web page building play a very important role to show text in a revealing way. There are three ways in HTML to represent lists. All lists must contain one or more list elements. Lists may contain ordered lists, unordered lists and definition lists.

1 An Unordered list

This will list items using plain bullets. The arrangement of text is without numbering. The unordered list is represented by the <ul> tag.

2 An Ordered list

In ordered lists, different schemes of numbers are used to list your items. The unordered list is represented by the <ol> tag.

3 Definition list

A definition list arranges your items in the same way as they are    arranged in a dictionary.

List items in HTML

Once the list is declared as ordered or unordered list, the next step is to arrange the items and that can be done with the help of <li> tag, list items tag.

Unordered Lists in HTML

When there is no specific order to arrange the items in a sequence, the list is named as unordered list. This list is created by using HTML <ul> tag. Each item in the list is marked with a bullet only.

<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List of fruits</title>
</head>
<body>
      <ul>
         <li>Mango</li>
         <li>Banana</li>
         <li>Apple</li>
         <li>Grapes</li>
      </ul>
   </body>
 </html>

It results as:

The type Attribute of unordered list

The type attribute of <ul> tag used to specify the type of bullet you want to set. By default, it is a disc. The following types of bullets can be used in your HTML code.

  1. Square
  2. Disc
  3. circle

Let us take an example of type attribute as disc

<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List of fruits</title>
</head>
<body>
      <ul>
         <li>Mango</li>
         <li>Banana</li>
         <li>Apple</li>
         <li>Grapes</li>
      </ul>
   </body>
 </html>

Ordered Lists in HTML

If you do not want to use bullets in your code then there is another provision of putting items in the list i.e. in the form of numbering. You can easily put your items in a numbered list instead of bulleted. If the numbers are used in the list then it is ordered list. This list is created by using <ol> tag. The numbering starts at one and is incremented by one for each successive ordered list element tagged with <li>. By default, list is numbered.

<!DOCTYPE html>
<html>
<head>
<title>Ordered List in HTML</title>
</head>
<body>
      <ol>
         <li>Mango</li>
         <li>Banana</li>
         <li>Apple</li>
         <li>Grapes</li>
</ol>
   </body>
</html>

It results as:

Type Attribute in ordered list

The type attribute of <ol> tag used to specify the type of numbering you want to set for your list. By default, it is a numbering. The following types of numbering can be used in your HTML code.

<ol type = “1”> – Numeral case-By default.

<ol type = “I”> – Upper Case Numerals in Roman.

<ol type = “i”> – Lower Case Numerals in Roman.

<ol type = “A”> – Upper Case Letters.

<ol type = “a”> – Lower Case Letters.

Note: HTML will apply only default value. Use CSS to apply other types.

<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List of fruits</title>
</head>
<body>
      <ol type=”1”>
         <li>Mango</li>
         <li>Banana</li>
         <li>Apple</li>
         <li>Grapes</li>
      </ol
</body>
 </html>

The start Attribute

The start attribute is used to tell the browser from where the list numbering has to be started. Suppose, you want to start the numbering of your list from 3 onward, then you have to set start attribute as start=”3″. Let us take an example in the form of code.

<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List of fruits</title>
</head>
<body>
      <ol type=”1” start="3">
         <li>Mango</li>
         <li>Banana</li>
         <li>Apple</li>
         <li>Grapes</li>
      </ol
</body>
 </html>

It results as:

Definition list in HTML

HTML and XHTML supports a list style which is called definition lists where entries are listed like in a dictionary or encyclopedia. The definition list is the ideal way to present a glossary, list of terms, or other name/value list.

Definition List makes use of following three tags.

<dl> − Defines the start of the list

<dt> − A term

<dd> − Term definition

</dl> − Defines the end of the list

It results as :