HTML Lists – How to Insert Lists in HTML with Type

0
99
HTML lists

In this tutorials you will learn about HTML lists. Lists are used when data have to be present in an order ( 1 , 2 , 3 ) form or in the form of bullets.

Type of Lists in HTML

There are two types of lists in HTML.

  1. Ordered List
  2. Unordered List

Ordered List in HTML

Ordered list is used when data is represented in ordered ( 1 , 2 , 3 ) form. Tag <ol> is used to display an ordered list. Inside this tag there are list items written in <li> tags. See Syntax and Example.

Syntax of Writing an Ordered List in HTML

<ol>

      <li> First Item </li>

      <li> Second Item </li>

      <li> Third Item </li>

</ol>

Example

Code

Ordered List in HTML code

Output

Ordered List in HTML output

Attributes of Ordered List Tag

You can add type attribute in ordered list <ol> tag. Type attribute will specify which type of list will be displayed in the browser. You can add value “A” , “a” , “I” , “i” in type attribute. See Syntax and Example.

Syntax of Type Attribute

<ol type=”A”>

       <li> First Item </li>

       <li> Second Item </li>

         <li> Third Item </li>

</ol>

Example

Code

List with type A

Output

list with type A output

Unordered List in HTML

Second type of List in HTML is unordered list. It is used when data is not in ordered form. Bullets are displayed in place of numbers in unordered list. <ul> tag is used to display an unordered list.

Syntax of Unordered List in HTML

This is same as ordered list but instead of <ol> tag <ul> tag is used.

 

<ul>

    <li> First Item </li>

    <li> Second Item </li>

     <li> Third Item </li>

     <li> Forth Item </li>

</ul>

Example

Code

unordered list in HTML code

Output

unordered list in HTML output

Type Attribute in Unordered List

Type attribute can also be used in <ul> tag but instead of writing “A” , “I” you will write type name like circle , square.

Type Attribute values.

  1. Circle
  2. Square
  3. Decimal
  4. Disc
  5. Georgian
  6. Inherit
  7. Inside
  8. None
  9. Unset

Example

Code

unordered list with type circle

Output

unordered list with type circle output

Nested Lists in HTML

This is not a type of HTML lists but its important to knwo. A list can also be inserted inside another list. This is required when drop down menus or sub categories of a category is needed to add in web page. This is done by adding another list inside a list item. See Syntax and Example.

 

Syntax of Nested List in HTML.

<ul>

      <li> First Item </li>

      <ul>

            <li> Nested Item 1</li>

            <li> Nested Item 2</li>

             <li> Nested Item 2</li>

      </ul>

    <li> Second Item </li>

    <li> Third Item </li>

    <li> Forth Item </li>

</ul>

Example

Code

Nested List in HTML

Output

Nested List Output

LEAVE A REPLY

Please enter your comment!
Please enter your name here