HTML List

HTML List


HTML has three kinds of lists.


  • <ol>It is called Ordered list it uses different schemes of numerals to list items.
  • <ul>It is called Unordered list it use bullets to list items.
  • <dl>It is called defination list it use to display data in defination style.


Ordered List (<ol>)

Ordered list uses various type of letters,numerals to list your data instead of bullets.

It uses type and start attribute to display list in different numerals.

  • type="1"Default numeral
  • type="I"Uppercase numeral
  • type="i"Lowercase numeral
  • type="A"Uppercase letter
  • type="a"Lowercase letter

  • Suppose start="2" so list numerals starts from second position of every numerals

  • Example of <ol>

    <ol type="1" start="2">
    <li>Apple</li>
    </ol>
    <ol type="I" start="2">
    <li>Banana</li>
    </ol>
    <ol type="i" start="2">
    <li>Mango</li>
    </ol>
    <ol type="A" start="2">
    <li>Carrot</li>
    </ol>
    <ol type="a" start="2">
    <li>Orange</li>
    </ol>
    

    Result of the above example

    1. Apple
    1. Banana
    1. Mango
    1. Carrot
    1. Orange



    Unordered List (<ul>)

    Unordered list uses different types of bullets to list your data.

    It uses type attribute to display list in different bullets.

    • type="square"
    • type="disc"
    • type="circle"

    Example of <ul>

    <ul type="square">
    <li>Apple</li>
    </ul>
    <ul type="disc">
    <li>Banana</li>
    </ul>
    <ul type="circle">
    <li>Mango</li>
    </ul>
    

    Result of the above example

    • Apple
    • Banana
    • Mango



    Defination List(<dl>)

    It is used to represent data in defination style it consist of two more tags:

    • <dt>It is called the term.
    • <dd>It is called the term defination.

    Example of <dl>

    <dl>
    <dt>HTML</dt>
    <dd>It is Hyper Text Markup Language</dd>
    <dt>CSS</dt>
    <dd>It is Cascading Style Sheet</dd>
    </dl>
    

    Result of the above Example

    HTML
    It is Hyper Text Markup Language
    CSS
    It is Cascading Style Sheet

    PreviousNext

    Subscribe Our Newsletter And Get Tutorials
    And Offers Via Email

    Subscribe Our Newsletter And Get Tutorials And Offers Via Email