Lists on HTML8 min read

Introduction to Lists on Html

The list is a collection of similar items or sequences of your steps. In general, when you visit the restaurant, the waiter shows you a menu that shows a list of items available in different ways or formats. HTML offers authors several mechanisms for specifying lists of information. All lists must contain one or more list elements. Inside a list item, you can put text, line breaks, images, links, other formatting tags for better appearance and presentation. Lists are created using either <UL>, <OL> or <DL> tags. Types of lists supported by HTML are,

  • Unordered Information Lists
  • Ordered Information Lists
  • Definition Lists

One can also nest the above tags within each other.

Unordered List

This type of list is usually useful when the order of the list element is not in any particular order or the element can be shown in any order. It is also referred to as a bullet list. Each item in this list is preceded by a bullet i.e. each item will be displayed automatically on the next line and one does not require to use tag <BR>. An unordered list starts within the <BODY>..</BODY> tag by using tag <UL>.</UL>. Each list item is specified by <LI>. Here

  • The <UL> tag is a paired tag
  • <LI> is a singular tag.

Attributes of Unordered list

  • TYPE = “DISC” :- Will show list using solid round bullet ( . )
  • TYPE=”CIRCLE” :- Will show list using open circle or empty circle or small hollow circle bullet.
  • TYPE = “SQUARE” :- Will show list using square black bullet.

By default, a bullet symbol is used in the list depending on the browser and the level of nesting of the information.

Demonstration of Unordered list to display list of Input Devices

<HTML>
  <HEAD> 
    <TITLE> INPUT DEVICES </TITLE> 
  </HEAD>

  <BODY> 
    <H3> INPUT DEVICES </H3> 
    <UL>
      <LI> KeyBoard </LI>
      <LI> Mouse </LI>
      <LI> Touch Screen </LI>
      <LI> Joystick </LI>
    </UL>
  </BODY>
</HTML>

Ordered List

This type of list is usually useful when one needs to specify the list of items in a specific order. It is also referred to as Numbered or Sequence List. Each item will be displayed automatically on the next line and one does not require using tag <BR>. This kind of tag should be used where the order should be emphasized. An unordered list starts within the <BODY>..</BODY> tag by using tag <OL>..</OL>. Each list item is specified by <LI>. Here • The <OL> tag is a paired tag.

. <LI> is a singular tag.

Attributes of the Ordered list

1) TYPE: Type be taken one of the following values

  • TYPE=”1″:- Show list of items in Arabic or Counting Numbers ( 1, 2, 3, …..)
  • TYPE=”I”:- Show list of items in Uppercase Roman Numerals ( I, II, III, .)
  • TYPE= “i”:- Show list of items in Lowercase Roman Numerals ( i, ii, iii, …)
  • TYPE= “A” :- Show list of items in Uppercase Letters ( A, B, C, … )
  • TYPE=”a” :- Show list of items in Lowercase Letters ( a, b, c, … )

2) START: By default sequence starts from the beginning. This attribute helps to alter the sequence. Thus, START=4 would display either D, d, IV, iv, 4 depending on the TYPE attribute.

<OL TYPE="A" START=3>
  <LI> Item 1 </LI>
  <LI> Item 2 </LI>
</OL>

Output

C. Item 1
D. Item 2

Note

All subsequent list items will follow the same style as that of the first item.

3) VALUE: This attribute overrides the current numbering order value within the list.

<OL TYPE="A" START=3>
  <LI> Item 1 </LI>
  <LI VALUE="2"> Item 2 </LI>
</OL> 

Output

C. Item 1
B. Item 2

Demonstration of Order List

<HTML>
  <HEAD> 
    <TITLE> Demo of Order List </TITLE> 
  </HEAD> 
  <BODY>
    <H3> Preparing a Tea for 2 Persons </H3> 
    <OL TYPE=1 START=1> 
      <LI> Take a Tea Container </LI>
      <LI> Add water and boil it for 1 min. </LI>
      <LI> Add 1 tea spoon of tea powder. </LI>
      <LI> Add Sugar as per need. </LI>
      <LI> Add Ginger if Required </LI>
      <LI> Boil it for while. </LI>
      <LI> Add Milk </LI>
      <LI> Pour it into 2 cups </LI>
    </OL> 
    <H2> Have taste of tea </H2>
  </BODY> 
</HTML>

Definition List

It consists of terms and is followed by its definition. It is also referred to as Glossary List or Word Dictionary List. A definition list was created by using the <DI>.<DL> tags followed by the <DT> (Definition Term) tag and the <DD> (Definition Description tag. Here <DT> and <DD> tag pair indicate a term and its definition and must appear in the same order. Definition lists are unordered lists. Here

  • The <DL> tag is a pair tag
  • <DT> and <DD> is a singular tag.

Browser aligns the definition term with the left margin and displays the definition described in the next line after indenting it. It is useful when advertising some products, one might use a definition list for such purpose.

Definition List Example

<HTML>
  <HEAD> 
    <TITLE> DEMO OF DEFINITION LIST </TITLE> 
  </HEAD> 
  
  <BODY>
    <H3> Computer Toy </H3> 
    <DL>
      <DT> Lower cost
        <DD> Product costs significantly less compare to any other company product </DD>
      </DT> 
      <B> Easier to use </B>
      <DT>
        <DD> Due to new technology it's much easier to use! </DD>
      </DT>
      <DT> 
        <DD> Saſe for kids </DD>
      </DT>
      <B> You can leave your kids alone in a room with this product. </B> 
    </DL>      
  </BODY>
</HTML>

COMPACT Attribute

It can be used with your definition term when they are short by specifying the COMPACT attribute with <DL> tag. For example, if you are showing some definition terms which can fit on the same line as the start of the definition.

A Demo of COMPACT Attribute

<HTML>
  <HEAD>
    <TITLE> DEMO OF COMPACT ATTRIBUTE </TITLE>
  </HEAD>
  
  <BODY> 
    <H3> Abbrievation </H3> 
    <DL COMPACT>
      <DT> WWW </DT>
      <DD> World Wide Web </DD>
      <DT> IE </DT>
      <DD> Internet Explorer </DD>
    </DL> 
  </BODY> 
</HTML> 

NESTED LISTS on Html

It is possible to nest the different types of lists within one another or to nest multiple lists of the same type.

Demo of Nested List

<HTML>
  <HEAD> 
    <TITLE> Demo of Nested UnOrder List </TITLE> 
  </HEAD>
  
  <BODY>
    <H3> Course Details </H3>
    <UL>
      <LI> Information Technology </LI>
      <LI> DBMS and Oracle </LI>
      <LI> Principle and Technique of Management </LI>
      <LI> Operation Research </LI>
      <LI> Optional </LI>
      <UL>
        <LI> C++ </LI>
        <LI> Web Design </LI>
        <LI> Software Engineering </LI>
      </UL>
    </UL> 
  </BODY> 
</HTML>

Difference between Ordered and Unordered List

Sr. No.Ordered ListsUnordered Lists
1)List items are prefixed by the relative order of items.List items are prefixed by a special symbol.
2)One can start with specific Arabic numbers or letters or roman numerals using attribute START. START attribute can not specify with Unordered Lists.
3)Useful when the order of list items should be emphasized.Useful where the order of the list is not important.
4)The default list type is Arabic Number (1,2,3…..)The default list type is Disc.
5)In a Nested List, the type value does not change compared to the previous type value automatically.In a nested list, the type value changes from the previous type with the new one automatically in the order Disc to Circle to Square. For example, if the previous type is Disc then the new list will be assigned a circle type automatically.

Share:

Leave a Reply