Difference between <ion-list> and <div class="list"> in Ionic framework?

Question

I'm building an app with the Ionic Framework. I started off with the standard ionic tabs starter project as described in the getting started guide. In a list I now want to put a divider as described here:

<div class="list">
  <div class="item item-divider"> <!-- this creates the divider -->
    Candy Bars
  </div>
  <a class="item" href="#">
    Butterfinger
  </a>
  ...
</div>

to my surprise however, the pre generated code in my list looks like this:

<ion-list>
  <ion-item class="item-toggle">
    Enable Friends
    <label class="toggle">
      <input type="checkbox" ng-model="settings.enableFriends">
      <div class="track">
        <div class="handle"></div>
      </div>
    </label>
  </ion-item>
</ion-list>

So this made me wonder: what is (if any) the difference between <ion-list> and <div class="list">?

In line with the pre-generated code I tried to create a divider using <ion-divider>, but that didn't work. So I resided to <div class="item item-divider"> which works fine. I just wonder what the difference is between these "magic" <ion-xxx> tags and the traditional <div class="xxx"> tags?

Any information is welcome!

Answer 1

I believe that using the standard HTML formatting such as <div class="list">will give you all the CSS styling that you are looking for, but in some cases using the Ionic directives will provide additional functionality that may be missing with pure HTML/CSS. Check out this link to the Ionic forums for more info on the subject.

Answer 2

It depends on what is your requirements. If you just need to display a list then use HTML (), however, if you need additional functionalities like swipe, rearrange, edit etc then use .