aタグの中にaタグを入れ子すると、ブラウザの親切（？）により、意図した表示にならないことがお恥ずかしながら最近になってわかりました（以前は問題なくできていたような？）。

<div class="card">
 <a href="#card-link" class="card-link">
  <h1>title</h1>
  <p>texttexttext</p>
  <ul>
   <li><a href="#tag1">tag1</a></li> /* <- aタグの中にaタグが入っている */
   <li><a href="#tag2">tag2</a></li> /* <- aタグの中にaタグが入っている */
  </ul>
 </a>
</div><!-- /.card -->

<div class="card">
 <a href="#card-link" class="card-link">
  <h1>title</h1>
  <p>texttexttext</p>
 </a> /* <- a の閉じタグが勝手に移動している */
 <ul>
  <li><a href="#tag1">tag1</a></li>
  <li><a href="#tag2">tag2</a></li>
 </ul>
</div><!-- /.card -->

下記のように変更すると、実際には入れ子にしていないけれど、ボックス全体にリンクが付与され、独立したリンクも問題なく使用できるようになります。

See the Pen a > a 入れ子 by Yurie (@kkrg) on CodePen.

<div class="card">
 <h1>title</h1>
 <p>texttexttext</p>
 <a href="#card-link" class="card-link"></a> /* <- 移動 */
 <ul>
  <li><a href="#tag1">tag1</a></li>
  <li><a href="#tag2">tag1</a></li>
 </ul>
</div><!-- /.card -->

.card {
 position: relative;
}

.card-link {
 position: absolute;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
} 

CSS反映後のイメージ。 .card の上に .card-link を重ねている。

※li内のリンクが押せない場合は、重なりが.card-linkより下に来ている可能性があるので、position: relative;を追加して、重なりを調整してください。