title: Best practice for ion tags
body: <p>I am a bit confused about tag usage in the ionic framework. If you check their docs under <a href="http://ionicframework.com/docs/components/" rel="nofollow">CSS components</a>, 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:</p>
  
  <pre><code>&lt;div class="bar bar-header bar-light"&gt;
    &lt;h1 class="title"&gt;bar-light&lt;/h1&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>If you go by their <a href="http://codepen.io/ionic/public-list/" rel="nofollow">code samples</a>, however, you see that they use custom ion tags instead. Example:</p>
  
  <pre><code>&lt;ion-header-bar class="bar-assertive"&gt;
    &lt;h1 class="title"&gt;Left Menu&lt;/h1&gt;
  &lt;/ion-header-bar&gt;
  </code></pre>
  
  <p>The same practice of using custom ion tags is used in their <a href="http://ionicframework.com/docs/guide/building.html" rel="nofollow">guide</a> as well as a pluralsight tutorial I found on ionic.</p>
  
  <p>So what's going on here? If both approaches accomplish the same thing, which one is considered best practice?</p>