<figure>タグから<figcaption>までをハイパーリンクにしたい

前提・実現したいこと

初歩的で恐縮ですが、重複の質問等も調べたところなかったため
フロント側で解決できなかった問題について質問させていただきます。

<figure>と<figcaption>全てをaタグで囲ってハイパーリンクとなるようにしたいと思います。

divの場合は、調べたところ
divのpositionをrelativeにしてa要素をabsolute、hoverすればブロックごとリンクになると書いてあるサイトを見つけることができたのですが、
figureでは同じ方法で実現できませんでした。

実現方法、または不可能か否かについてご教示いただけましたら幸いです。

該当のソースコード

HTML5
1<!--sample.html-->
2<div class="box">
3<a href="#"></a>
4     <figure>
5         <img src="hoge.png">
6         <figcaption>hogeさんのプロフィール</figcaption>
7     </figure>
8</div>

試したこと

・div以降のfigureをすべてaタグで囲う　→実現はしたのですが問題があるのではと思い変更したいと思っております
・CSSでdivを固定にし、a要素をabsoluteなどで調整　→実現しませんでした

kszk311

2018/05/23 09:46 編集

「> 実現はしたのですが問題があるのではと思い」こちらなぜ問題があると思ったのか、参考ページでもいいので教えてもらえますか。HTML5では、インタラクティブコンテンツ以外はaタグの中に含めることができます。figureを入れても構造に問題はありません。

mmmmmi_a

2018/05/23 14:37 編集

ご返信ありがとうございます! 問題があるともないとも参考資料があまり見つからず、そこから問題があるもしくは行うべきではないと判断しておりました。飛躍した推測でした。申し訳ありません。また、実際はwordpressの本文内に関数側から特定の条件で自動で本HTMLを出力するような実装だったため、構造に問題がないとのことをご教示いただきましたおかげで、 pタグやaリンクが二重表示されるなどの不具合もあったのですが自作関数側に問題があるのではと特定することができそうです。感謝いたします。

kszk311

2018/05/23 15:28 編集

http://www.htmq.com/html5/a.shtml ちなみにこちらに書かれています。ドキュメントはいろんなところにあります。回答すべき内容だったかもしれませんが、問題なさそうでしたら、解決済みにしておいてくださいね。

mmmmmi_a

2018/05/25 01:55

kszk311　様　公式やクイックリファレンスの読み込みを今後はしていきたいと思います！ご丁寧に対応いただきありがとうございました！