ａタグの中に複数の別のリンク先を作成する方法

実現したいこと

ひとつの要素の中に各自別の複数のリンク先を作りたいと思っております。
今回作りたいもののイメージとしてはこのような形です。

①一番外側のaタグ（クラス名all）をクリックした際には該当投稿のリンクに飛ぶ。
②そしてクラス名categoryの場所をクリックしたら場所に関するリンクが開く
③クラス名categoryの特定カテゴリーをクリックしたら特定のカテゴリーに関するリンクが開く

発生している問題・分からないこと

ａタグの中にａタグを入れたのですが、それは構造上自動で閉じタグを作ってしまうので全体の枠が途中部分のcategoryのaタグによって自動補完されてしまいます。
（これは調べてみてａタグの中にａタグを入れてはいけないということに気づいています。）
ただその場合どのように対応すればいいのかわからないです。

エラーメッセージ

error

1<a href="" class="all"> 2 <div class="galleyImg"> 3 <img src="/image/blog/blog-hokkaidoBath.jpeg" alt=""> 4 </div> 5 <h3>title</h3> 6 <div class="category"> 7 <ul> 8 <li><a href="">場所</a></li> 9 <li><a href="">特定のlカテゴリーページ</a></li> 10 </ul> 11 <li>日時</li> 12 </div> 13 </a>

該当のソースコード

<a href="" class="all"> <div class="galleyImg"> <img src="/image/blog/blog-hokkaidoBath.jpeg" alt=""> </div> <h3>title</h3> <div class="category"> <ul> <li><a href="">場所</a></li> <li><a href="">特定のlカテゴリーページ</a></li> </ul> <li>日時</li> </div> </a>

試したこと・調べたこと

上記の詳細・結果

・aタグの中にaタグは記載できないこと
・一応spanで特定のリンク先に飛ばせるけど果たして正しいのか
・オブジェクトタグで囲むことも出てきたのですが、記載が古いものでもあったので信憑性が怪しい
・jsを使うものもある

以上となります。

補足

様々なものがあったのですが、どの方法をチョイスしたらいいかわからないのが正直なところです。
お忙しい中とは思いますが、ご教授よろしくお願い致します。