HTML Lists

An HTML list organizes content into ordered or unordered formats, making information clear and easy to read.

• HTML lists organize content using tags like
  ,
  &
  1. .
  2. They improve readability by presenting data in a structured format.

  Syntax

      
  Item 1
     
   
  Item 2
    
    
  Item 3
  

  HTML

  
  <html lang="en">
  <head>
      <title>title>
  head>
  <body>
      <h2>Welcome To GeeksforGeeks Learningh2>
      <h5>List of available coursesh5>
      <ul>
          <li>Data Structures & Algorithmli>
          <li>Web Technologyli>
          <li>Aptitude & Logical Reasoningli>
          <li>Programming Languagesli>
      ul>
      <h5>Data Structures topicsh5>
      <ol>
          <li>Arrayli>
          <li>Linked Listli>
          <li>Stacksli>
          <li>Queuesli>
          <li>Treesli>
          <li>Graphsli>
      ol>
  body>
  html>
  

  Html Tags

  HTML (HyperText Markup Language) uses tags to define and structure elements on a webpage. Each tag tells the browser how to display the content - such as text, images, links, or layouts.

  Types of HTML Lists

  There are three main types of lists in HTML

  1. Unordered List or Bulleted List

  Unordered lists display items as bulleted points where the order of items does not matter, using the

  and
  • tags.
    • Unordered lists are ideal for scenarios where the sequence of the items is not important.
    • The unordered list items are marked with bullets, also known as bulleted lists.
    • An unordered list starts with the
      tag, and each list item begins with the
      • tag.

      Attribute: This tag contains two attributes which are listed below: 

      • compact: It will render the list smaller.
      • type: It specifies which kind of marker is used in the list.
      HTML

      
      <html>
      <head>head>
      <body>
          <h2>Grocery listh2>
          <ul>
              <li>Breadli>
              <li>Eggsli>
              <li>Milkli>
              <li>Coffeeli>
          ul>
      body>
      html>
      

      2. HTML Ordered List

      Ordered lists are used when the items need to follow a specific sequence.

      In an ordered list, all list items are marked with numbers by default. An ordered list starts with the

      tag, and each list item begins with the
      1. tag.

         Attributes:

         • compact: It defines the list should be compacted (compact attribute is not supported in HTML5. Use CSS instead.).
         • reversed: reversed defines that the order will be descending.
         • start: It defines from which number or alphabet the order will start.
         • type: It defines which type(1, A, a, I, and i) of the order you want in your list of numeric, alphabetic, or roman numbers.

         Syntax

             
           
         Item1
             
           
         Item2
             
          
         Item3
          
         

         HTML

         
         <html lang="en">
         <head>
             <title>title>
         head>
         <body>
             <h1 style="color: green">GeeksforGeeksh1>
             <h3>HTML ol tagh3>
             <p>reversed attributep>
             <ol reversed>
                 <li>HTMLli>
                 <li>CSSli>
                 <li>JSli>
             ol>
             <p>start attributep>
             <ol start="5">
                 <li>HTMLli>
                 <li>CSSli>
                 <li>JSli>
             ol>
             <p>type attributep>
             <ol type="i">
                 <li>HTMLli>
                 <li>CSSli>
                 <li>JSli>
             ol>
         body>
         html>
         

         3. HTML Description List

         A description list is a list of terms, with a description of each term. Description lists are less common but very useful for definitions, glossaries, or any other key-value pairs of items.

         • The

           tag defines the description list, the

           tag defines the term name, and the

           tag describes each term.

         • Here,
           (description term) is used for the term being defined, and
           (description details) is used for the description.

         Syntax

         
             
         Item 1
             
         Description of Item 1 
             
         Item 2
             
         Description of Item 2
         

         HTML

         
         <html lang="en">
         <head>
             <title>title>
         head>
         <body>
             <h2>A Description Listh2>
             <dl> 
                 <dt>Coffeedt>
                 <dd>- 500 gmsdd>
                 <dt>Milkdt>
                 <dd>- 1 ltr Tetra Packdd>
             dl>
         body>
         html>