what is li in html

Hi friends,another common tag <li> which is called as list in html is going to explain here.<li> is most often  used in creating menu lists.Now you use  below code in html editor.

HTML li

  <li>List1</li>
  <li>List2</li>
  <li>List3</li>

 

  • Now you get the output

list

There are two types of lists,

  • Ordered lists – <ol>
  • Unordered lists – <ul>

What is ordered list

  • In ordered list <ol>, you can get list in number  orders  instead of bullets of above image.Let we see with an example.

<ol>
<li>List1</li>
  <li>List2</li>
  <li>List3</li>
</ol>

  • Now you will get the output.

ordered list

What is unordered list

  • In unordered list <ul>,you can get list in bulleted and another thing you can make sub lists.In further lines  you can understand what I am saying.

unordered list

What is difference between unordered list and list

  • Ok friends now you will have a doubt then what is the difference between <ul> and <li>
  • Let we see with examples,
    <li> <ul>
    • Use below code

    <li>List1</li>
      <li>List2</li>
      <li>List3</li>
    <li>List5</li>
      <li>List6</li>
      <li>List7</li>

    • Now ouput will be

    image

    Even if you place <ul>add above code</ul> you just get same result with some spaces due to <ul> tags.
    • Use below code


    <li>List1</li>
    <ul>
      <li>List2</li>
      <li>List3</li>
    </ul>
    <li>List5</li>
      <li>List6</li>
      <li>List7</li>

     

    • Now output will be

     

    image

    Thus , ul is used to create sub menu items.In the above code <ul>tag placed below list1 and you will have subitem below list1.
  • Thus you can create sub items using <ul> tags and hope you can understand difference between <ul> and <li>.Whenever you use <ul>there will be space more .But in li there will be no space.
Print Friendly and PDF
SHARE

About me

Hi. I am interested in blogging.And sometimes play with webdesign,web development,domain sale,designing logo and more.

    Blogger Comment
    Facebook Comment

0 comments :

Post a Comment