How to build list in html ?

How to build list in html ?

List in html are a lot like regular shopping or to do list. They are an excellent tool for organising informations on a webpage. There are two different types of lists:

  1. Ordered list
  2. Unordered list

Ordered list

An ordered list display a list of numbered items like the result of a race. To write an ordered list we use <ol> …</ol> tags, and <li> …</>li tags to add list items.

<!DOCTYPE html>
  <html>
   <head>
          <title> my webpage </title>
   </head>
     <body>
           <h1> Ordered list </h1>

           <ol>
              <li> first </li>
              <li> second </li>
             <li> Third </li>
             <li> fourth</li>
           </ol>
    <body>
 </html>

Unordered list

An unordered list display a list of bulleted items, just like a navigation bar of a website.

To write and unordered list we use tags <ul> … <ul>, and to add items in we add nested <li> elements.

<!DOCTYPE html>
  <html>
   <head>
          <title> my webpage </title>
   </head>
     <body>
           <h1> Ordered list </h1>

           <ul>
              <li> first </li>
              <li> second </li>
             <li> Third </li>
             <li> fourth</li>
           </ul>
    <body>
 </html>

Usually developers use unordered list to add html elements as links or to build a navigation menu bar for webpages.

Nested list

A nested list is a list inside another type of list , for example :

<!DOCTYPE html>
  <html>
   <head>
          <title> my webpage </title>
   </head>
     <body>
           <h1> Ordered list </h1>

           <ul>
               <li> 
                   <ol>
                   <li>....</li>
                   <li>....</li>
                   <li>....</li>
                  </ol>
               </li>  
          </ul>
    <body>
 </html>

Leave a Reply

Your email address will not be published. Required fields are marked *

Follow by Email
LinkedIn
LinkedIn
Share
Instagram
error: Content is protected !!