Html Tutorial

HTML-Lists

Lists

You can put your content in the form of lists and for doing this on web we have three types of lists.

  • Ordered List
  • Unordered List
  • Definition List
  • Unordered List

    To create an unordered list we have to use <ul> tag. As the name suggests the list will not have a particular order. The items are displayed using bullets. Also your list item is placed inside <li> tag.

    Example:

    <body>
    <ul>
    <li>Banana</li>
    <li>Guava</li>
    <li>Apple</li>
    <li>Grapes</li>
    <li>Orange</li>
    </ul>
    </body>
    

    Output:

  • Banana
  • Guava
  • Apple
  • Grapes
  • Orange
  • Bullets design can also be changed, by default it is set to disc type.

    To change bullets we can use CSS list-style-item property.

    Example:

    <body>
    <p>List with square bullets</p>
    <ul style="list-style:square">
    List With Square bullets
    <li>Banana</li>
    <li>Guava</li>
    <li>Apple</li>
    <li>Grapes</li>
    <li>Orange</li>
    </ul>
    
    <p>List with square bullets</p>
    <ul style="list-style:disc">
    List With disc bullets
    <li>Banana</li>
    <li>Guava</li>
    <li>Apple</li>
    <li>Grapes</li>
    <li>Orange</li>
    </ul>
    
    <p>List with square bullets</p>
    <ul style="list-style:circle">
    List With circle bullets
    <li>Banana</li>
    <li>Guava</li>
    <li>Apple</li>
    <li>Grapes</li>
    <li>Orange</li>
    </ul>
    
    <p>List with square bullets</p>
    <ul style="list-style:none">
    List With no bullets
    <li>Banana</li>
    <li>Guava</li>
    <li>Apple</li>
    <li>Grapes</li>
    <li>Orange</li>
    </ul>
    </body>
    

    Output:

    List with square bullets

    • Banana
    • Guava
    • Apple
    • Grapes
    • Orange

    List with disc bullets

    • Banana
    • Guava
    • Apple
    • Grapes
    • Orange

    List with circle bullets

    • Banana
    • Guava
    • Apple
    • Grapes
    • Orange

    List with no bullets

    • Banana
    • Guava
    • Apple
    • Grapes
    • Orange

    Ordered List

    Ordered list are used to display the list items in a numbered way. To use ordered list, <ol> tag is used.

    Example:

    <body>
    <ol>
    <li>Banana</li>
    <li>Guava</li>
    <li>Apple</li>
    <li>Grapes</li>
    <li>Orange</li>
    </ol>
    </body>
    

    Output:

    1. Banana
    2. Guava
    3. Apple
    4. Grapes
    5. Orange

    Take another example:

    <body>
    <ol type="i">
    <li>Banana</li>
    <li>Guava</li>
    <li>Apple</li>
    <li>Grapes</li>
    <li>Orange</li>
    </ol>
    </body>
    

    Output:

    1. Banana
    2. Guava
    3. Apple
    4. Grapes
    5. Orange

    Take another example:

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

    Output:

    1. Banana
    2. Guava
    3. Apple
    4. Grapes
    5. Orange

    Advertisment

    Share


    Advertisement