Best practice for ion tags - ionic-framework

Question

I am a bit confused about tag usage in the ionic framework. If you check their docs under CSS components, you'll see they use existing tags (particularly div) with a specific class choice to achieve formatting, just like you'd expect from something like bootstrap. Example:
<div class="bar bar-header bar-light">
<h1 class="title">bar-light</h1>
</div>
If you go by their code samples, however, you see that they use custom ion tags instead. Example:
<ion-header-bar class="bar-assertive">
<h1 class="title">Left Menu</h1>
</ion-header-bar>
The same practice of using custom ion tags is used in their guide as well as a pluralsight tutorial I found on ionic.
So what's going on here? If both approaches accomplish the same thing, which one is considered best practice?

Answer 1

Ionic Framework, as stated in their site, is:
Ionic is both a CSS framework and a Javascript UI library. Many
components need Javascript in order to produce magic, though often
components can easily be used without coding through framework
extensions such as our AngularIonic extensions.
Using CSS Components you're simply applying CSS styling to your HTML page.
When using the Ionic directives you're using a fully-featured JavaScript component and you have access to the APIs provided by the framework.
To better understand the difference you should dig into AngularJs directives.
Take the list for example. You could create a simple list using an HTML ul li:
<ul class="list">
<li class="item">
...
</li>
</ul>
but if you use the directive:
<ion-list>
<ion-item ng-repeat="item in items">
Hello, {{item}}!
</ion-item>
</ion-list>
you have access to the extended features provided by the framework (see the API at the bottom of the page).
I tend to use directives most of the times unless I know I don't want any kind of interaction with the interface.