aタグ、buttonタグ使い分けにいて

Question

前提・実現したいこと

jQueryを使ってモーダル 機能を作っています。
調べていくうちにaタグ、buttonタグを使ったやり方があると出てきました。
どういう時にaタグを使うのか、使い分けを知りたいです。

該当のソースコード

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

  <div class="life-type">
          <a href="#" class="modalopen" data-target="modal01">
            <img class="life-img" src="./image/life.png" alt="生活画像">
            <p class="life-name">食事</p>
          </a>
   </div>
   <div class="modal-main js-modal" id="modal01">
       <div class="modal-inner">
         <div class="inner-content">
           <p class="inner-title">食事風景</p>
              <p class="inner-text">食事をしている風景です</p>
              <a class="send-button modalClose">Close</a>
            </div>
          </div>
        </div>

Answer 1

ようはユーザビリティ問題です
ユーザーが「そこでクリックすると何かが起きる」と直感的に理解できるなら何でも良いと思います。
imgやdivをトリガーとすることもありますがフォーカスできる要素にしておいたほうが無難です

Answer 2

JSが執行されない場合やそのエレメント実際の挙動によって使いわけるのが一番いいと思います。
たとえばリンクで違うページに飛ばしたい場合、buttonタグ＋JSでも飛ばせるが、JSが執行されない場合aタグ使ってたらのhrefがフォールバックになりますし、セマンティック的にもaタグのほうがいいとおもいます。
なのでユーザーを違うリンクに飛ばしたい場合はaタグ、それ以外の操作がbuttonタグが一番いいと思います。

Answer 3

CSSで見た目はどうにでもなるし、本来持っているイベントも無効にできるので、
「お好きな方で」ということになりますが、
本来のタグを持つ意味とやりたいことに近い方を選んだ方が余計な対応しなくて済むのでパフォーマンス的には良いかと思います。