Lesson 12 – HTML Lists

Lists are used to group related information in a sequential manner, so that they become easy to read. In html, there are three types of list arrangements:

Sno.Name of ListHtml TagDescription
1.Unordered List<ul>Where order of list items doesn’t matter
2.Ordered List<ol>Where items are listed as per serial number
3.Definition List<dl>Where items are listed in alphabetical manner
  • HTML Unordered List:

In unoredered list, the sequential order of items doesn’t matter, they can be listed in any order. You can create an unordered list using html <ul> tag, where list items are placed between html <li> tag. Following example will make you more clear on how to create a html unordered list:

<!DOCTYPE html>
<html>
<head>
<title>Unordered List Example</title>
</head>
<body>
<ul>
<li>Green</li>
<li>Yellow</li>
<li>White</li>
<li>Black</li>
</ul>
</body>
</html>

The result will be displayed as:

 Unordered List Example
  • Green
  • Yellow
  • White
  • Black

Changing bullet style:

In above example, the default style of bullets is ‘disc shape’. But, you can also change a default style using html type attribute. The options available are: Square, Circle and Disc. Let’s see the following examples:

<!DOCTYPE html>
<html>
<head>
<title>Circle Bullet Example</title>
</head>
<body>
<ul type = “circle”>
<li>Green</li>
<li>Yellow</li>
<li>White</li>
<li>Black</li>
</ul>
</body>
</html>

The result will be displayed as:

 circle-examle
  • HTMl Ordered List:

    HTML order list will display items in a numeric sequence instead of bulleted manner.  You can create an ordered list using html <ol> tag. Example of ordered list:

<!DOCTYPE html>
<html>
<head>
<title>Ordered List Example</title>
</head>
<body>
<ol >
<li> Step one</li>
<li>Step two</li>
<li>Step three</li>
<li>Step four</li>
</ol>
</body>
</html>

The result will be displayed as:

 Ordered List Example
  1. Step one
  2. Step two
  3. Step three
  4. Step four

 

Changing numbering style:

In above example, default number style of list has been set as numerals (like 1, 2 ,3 etc). You can easily change this style using html type attribute. The options available are:

<ol type=”1″> Numerals
<ol type=”I”>Roman numbers
<ol type=”i”>Lower case Roman numbers
<ol type=”a”> Lower case alphabets
<ol type=”A”>Upper case alphabets

Example:

<!DOCTYPE html>
<html>
<head>
<title>Alphabet List Example</title>
</head>
<body>
<ol type = “A”>
<li>Green</li>
<li>Yellow</li>
<li>White</li>
<li>Black</li>
</ol>
</body>
</html>

The result will be displayed as:

 lower-case-roman-number

Setting reverse order:

You can change the sequence of a list in reverse order using html <ol reversed> tag.  However, this tag is not supported by Internet Explorer, so always keep in mind I.E will show an ascending order list instead of reverse order. Example for reverse order list:

<!DOCTYPE html>
<html>
<head>
<title>Ordered List Example</title>
</head>
<body>
<ol reversed>
<li>Green</li>
<li>Yellow</li>
<li>White</li>
<li>Black</li>
</ol>
</body>
</html>

The result will be displayed as:

 Reverse order List Example
  1. Green
  2. Yellow
  3. White
  4. Black

Starting a list from one specific number:

You can also choose to start a list from one specific number using html start attribute. Example is explained below:

<!DOCTYPE html>
<html>
<head>
<title>Specific number Example</title>
</head>
<body>
<ol start = “5”>
<li>Green</li>
<li>Yellow</li>
<li>White</li>
<li>Black</li>
</ol>
</body>
</html>

The result will be displayed as:

 Specific number Example
  1. Green
  2. Yellow
  3. White
  4. Black
  • HTML Description List:

 You can create a description list using html <dl> tag. List so created will be appear in alphabetical manner. This list is ideal for explaining the description of a word/term. The following html tags are used to create a description list:

(i) html <dl> tag represent description list.

(ii) html <dt> tag represent term name.

(iii) html <dd> tag describe term full name.

Example of description list:

<!DOCTYPE html>
<html>
<head>
<title>Definition List Example</title>
</head>
<body>
<dl>
<dt> WHO</dt>
<dd>World Health Orgnization</dd>
<dt>NASA</dt>
<dd>National Aeronautics and Space Administration</dd>
</dl>
</body>
</html>

The result will be displayed as:

 Definition List Example
WHO
World Health Orgnization
NASA
National Aeronautics and Space Administration
  • HTML Nested List:

You can create a sub list inside the main list using html nested list feature. To create a sub list, simply put html list tag inside main html list tag. Example of nested list is explained below:

<!DOCTYPE html>
<html>
<head>
<title>Nested List Example</title>
</head>
<body>
<ol>
<li> Item 1 </li>
   <ol> <li> sub item 1 </li> </ol>
   <ol> <li> sub item 2 </li> </ol>
<li> Item 2 </li>
<li> Item 3 </li>
</ol>
</body>
</html>

The result will be displayed as:

 Nested List Example
  1. Item 1
    • sub item 1
    • sub item 2
  2. Item 2
  3. Item 3

 

Chapter Summery:

  • Use html <ul> element to create unordered list.
  • Use html<ol> element to create ordered list.
  • Use html <dl> element to create description list.
  • Use type attribute to change the bullet style to circle, square  and disc.
  • Use html <li> element to define items.
  • Use html <dt> element to include term name.
  • Use html <dd> element to describe term full name.

 

Interview Questions:

  • What are some of the common list names used in html?

Some common list name used in html are:

(i) Unordered List

(ii) Ordered List

(iii) Description List

  • Is it possible to change the bullet color in html list?

Color of bullet is always same as color of text. Therefore if you want to change the bullet color than change text color.

 

Practice Exercise:

<!DOCTYPE html>
<html>
<head>
<title>Practice Exercise</title>
</head>
<body>
</body>
</html>

In above html code,

  • Create an unordered list with item names “Computer”, “Keyboard”, “Mouse” and “CPU”.
  • Change the bullet style to square. 
  • Convert above created list to an ordered list.
  • Change the number style to Upper case letters.
Click here to practice above exercise in real time HTML code editor

Leave a Reply

Your email address will not be published. Required fields are marked *

7 + 3 =