Ordered And Unordered List

 To create list in HTML document, we can use either 

• ordered list 
• unordered list

1. Ordered List:

       To define an ordered list, we use <ol> and <li> tag. An ordered list can be in Roman, numerical or alphabetical.

       <li> is used to define list item of a list.

       Example:

        <ol>

            <li>HTML</li>

            <li>CSS</li>

            <li>Java Script</li>

        </ol>

       Output:

         1. HTML

         2. CSS

         3. Java Script

     Ordered list contains the following attribute:

• reversed : to reverse the order
• type: specifies the type as numerical or alphabetical or Roman using values as 

                              1, A, a, I, i

       Example:

              <ol type="a">

                <li>HTML</li>

               <li>CSS</li>

               <li>Java Script</li>

             </ol>

        Output:

               a. HTML

               b. CSS

               c. Java Script

• start: specifies the starting value of list

        Example:

                  <ol start="10">

                    <li>HTML</li>

                    <li>CSS</li>

                    <li>Java Script</li>

                  </ol>

         Output:

                 10. HTML

                 11. CSS

                 12. Java Script

2. Unordered List:

          To define an unordered list, we use <ul> tag.

          Example:

                <ul>

                   <li>HTML</li>

                   <li>CSS</li>

                   <li>Java Script</li>

                </ul>

           Output:

• HTML
• CSS
• Java Script

      

           You can change the list style using list-style-type, it provides the following values

• circle
• disc
• square

            Example:

                 <ul style="list-style-type:square">

                   <li>HTML</li>

                   <li>CSS</li>

                   <li>Java Script</li>

                 </ul>

        

            Output:

• HTML
• CSS
• Java Script

Nested List: You can create nested list as well by using another list inside a list.

              Example:

                      <ol>

                        <li>HTML</li>

                        <li>CSS</li>

                        <ul>

                           <li>Bootstrap</li>

                           <li>SASS</li>

                           <li>Tailwind CSS</li>

                        </ul>

                        <li>Java Script</li>

                     </ol>

             Output:

1. HTML
2. CSS
• Bootstrap
• SASS
• Tailwind CSS
3. Java Script

Continue learning: Semantic Elements