【HTML】aタグはブロックレベル要素で囲むべきか、囲まなくても良いか

HTML5から、ブロックレベル要素 / インライン要素という分類はなくなり、コンテンツモデルという分類になっているかと思います。
しかし、タグ自体の性質としてはまだ両者の概念は存在するかと思います。

インラインとして代表的なaタグで特定の幅や高さが決まっているボタンを作るとした場合、パターン1のような書き方はどうでしょうか。
制作上どちらでも良いと言われそうですが、「aタグのようなインラインはブロックで囲むべき」という考えもあると思いますので、

神経質かもしれませんが、フロントエンド周辺の知識をお持ちの方に見解を伺いたいと思っております。

html
1<!-- パターン1 -->
2      <div class="intro">
3        <div class="intro__inner">
4          <h1 class="intro__heading">テキストテキストテキストテキスト</h1>
5          <p class="intro__text">テキストテキストテキストテキスト<br>テキストテキストテキストテキスト<br>テキストテキストテキストテキスト</p>
6          <!--aタグをブロックレベルで囲まず単体で使用する、display:block等でブロック要素化する -->
7          <a href="contact.html" class="intro__link">Contact</a>
8        </div>
9      </div>
10
11<!-- パターン2 -->
12      <div class="intro">
13        <div class="intro__inner">
14          <h1 class="intro__heading">テキストテキストテキストテキスト</h1>
15          <p class="intro__text">テキストテキストテキストテキスト<br>テキストテキストテキストテキスト<br>テキストテキストテキストテキスト</p>
16          <!--aタグをブロックレベルで囲む インライン要素はブロックレベルの中にあるべきという考え方でcssを組む -->
17          <p class="intro__link"><a href="contact.html">Contact</a></p>
18        </div>
19      </div>

css
1/* パターン1に適用するcss display: flexでブロック要素として扱う */
2.intro__link {
3  display: flex;
4  justify-content: center;
5  align-items: center;
6  width: 330px;
7  height: 64px;
8  margin: 0 auto;
9  font-size: 2.4rem;
10  color: #fff;
11  background-color: #F2BB25;
12  position: relative;
13}