Home

Chapter 4: List

HTML lists allow web developers to group a set of related items in lists. There are 3 type of list in HTML: 1. Ordered List (<ol>), 2. Unordered List (<ul>), 3. Defination or Description List (<dl>)

Tags we are going to learn in this page:

1. ol (Ordered List)
2. ui (Unordered List)
3. li (List Item)
4. dl (Description List)
5. dt (Description Term)
6. dd (Description Details)

Explantion of the topics:

1. Ordered List:

   • <ol> tag is used to define an ordered list. In this list items are listed in a numarical(By default) or alphabetical order.
   • <li> ta g is used to store list items
   • Changing the ordering type: For <ol> there is an attribute named "type", we can set the type value with "1", "a", "A", "i", "I" (1-2-3-..., a-b-c-..., A-B-C-..., i-ii-iii-..., I-II-III-...).
   • Emmet Shortcut: " ol>li*4 + Enter Key " for making 4 ordered list.

   • Example:
     Code:

         <ol type="a">
             <li> HTML </li>
             <li> CSS </li>
             <li> Javacrript </li>
         </ol>
                         

     Output:

     1. HTML
     2. CSS
     3. Javacrript

   ---

2. Unordered List

   • The <ul> element is for grouping a collection of items that do not have a numerical ordering, and their order in the list is meaningless. Typically, unordered-list items are displayed with a bullet.
   • <li> ta g is used to store list items
   • We can change the bullet style with CSS.
   • Emmet Shortcut: " ul>li*4 + Enter Key " for making 4 unordered list.

   • Example:
     Code:

         <ul>
             <li> HTML </li>
             <li> CSS </li>
             <li> Javacrript </li>
         </ul>
                         

     Output:

     • HTML
     • CSS
     • Javacrript

   ---

3. Description List

   • The <dl> tag defines the description list. A description list is a list of terms, with a description of each term
   • The <dt> tag defines a term/name in a description list.
   • The <dd> tag is used to describe a term/name in a description list.

   • Example:
     Code:

         <dl>
             <dt>HTML</dt>
             <dd>-HTML stands for Hyper Text Markup Language. HTML is the standard markup language for creating Web pages. HTML describes the structure of a Web page.</dd>
             <dt>CSS</dt>
             <dd>-CSS stands for Cascading Style Sheets. CSS describes how HTML elements are to be displayed on screen, paper, or in other media.</dd>
             <dt>Javascript</dt>
             <dd>-Javascript, often abbreviated as JS, is a scripting languages, primarily used on the Web. It is used to enhance HTML pages and is commonly found embedded in HTML code. JavaScript is an interpreted language.</dd>
         </dl>
                         

     Output:

     HTML

     -HTML stands for Hyper Text Markup Language. HTML is the standard markup language for creating Web pages. HTML describes the structure of a Web page.

     CSS

     -CSS stands for Cascading Style Sheets. CSS describes how HTML elements are to be displayed on screen, paper, or in other media.

     Javascript

     -Javascript, often abbreviated as JS, is a scripting languages, primarily used on the Web. It is used to enhance HTML pages and is commonly found embedded in HTML code. JavaScript is an interpreted language.