Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

HTML – List

Lists are the common requirement to place the data in a formatted manner, like if you have made a webpage where you need to display the content of the pizza menu of a hotel, then likely it would be an HTML list style, that shall appear in a clear and discrete manner.

All lists must contain one or more list elements. There are two types of list elements:

  • Ordered List <ol> Element
  • Unordered List <ul> Element

Ordered List Element

This element is used to set up an ordered list using <ol> tag and list content is placed within <li> tags.

Example:

<body>
   <ol>
      <li>Apple</li>
      <li>Grapes</li>
      <li>Orange</li>
      <li>Kiwi</li>
  </ol>
</body>

By default, the type for any ordered list is a number starting from 1. We can also change the type of these ordered list – 1, I, I, a, A.

<ol type = “1”> – Default-Case Numerals.

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

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

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

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

Following is the example to demonstrate the type of an ordered list.

<body>
   <ol type="A">
      <li>Apple</li>
      <li>Grapes</li>
      <li>Orange</li>
      <li>Kiwi</li>
  </ol>
</body>

We can also control the start of any list type. We use start attribute for <ol> tag to specify the starting point of numbering.

<body>
   <ol type="A" start=”4”>
      <li>Apple</li>
      <li>Grapes</li>
      <li>Orange</li>
      <li>Kiwi</li>
  </ol>
</body>

Unordered List

In HTML Unordered list, all the list items are marked with bullets. It is also known as the bulleted list also. The Unordered list starts with <ul> tag and list items start with the <li> tag.

<body>
   <ul>
      <li>HTML</li>
      <li>Cucumber</li>
      <li>Oracle</li>
      <li>Kiwi</li>
  </ul>
</body>

By default, the type for any unordered list is starting from bullets. We can also change type of these ordered list – square, circle, disc.

<ul type = “square”>

<ul type = “disc”>

<ul type = “circle”>

Following is the example to demonstrate the type of an ordered list.

<body>
   <ul type="square">
     <li>HTML</li>
     <li>Cucumber</li>
     <li>Oracle</li>
     <li>Kiwi</li>
   </ul>
</body>

Description or Definition List

HTML Description list is also a list style which is supported by HTML and XHTML. It is also known as a definition list where entries are listed like a dictionary or encyclopedia.

The definition list is very appropriate when you want to present glossary, list of terms or other name-value lists.

<dl> tag – defines the start of the list

<dt> tag – defines a term

<dd> tag – defines the term definition (description)

Let’s understand above tag with the help of example:-

<body>
   <dl>
     <dt><b>HTML</b></dt>
     <dd>This stands for Hyper Text Markup Language</dd>
     <dt><b>CSS</b></dt>
     <dd>This stands for Cascading Style sheet</dd>
   </dl>
</body>

Nested List

A list within another list is termed as a nested list. If you want a bullet list inside a numbered list then such type of list will be called as a nested list.

<body>
   <ol>  
     <li>Delhi  
         <ul>  
                 <li>NewDelhi</li>  
             </ul>  
         </li>  
         <li>Haryana  
             <ul>  
                 <li>Chandigarh</li>  
             </ul>  
         </li> 
     </ol> 
</body>