aタグの中にdivタグを入れるのは間違っていますか？

Question

こんにちは。今、下のようなhtmlを作っています。
環境はhtml5です。

 <ul>
   <li class="current">
     <a>
       <div class="img">
         <img src="img/img_detail_03.png" alt="">
       </div>
       <div class="chapters">
         <h3>チャプター1</h3>
         <p>〇〇〇〇〇〇〇〇 vol.1</p>
       </div>
      </a>
  </li>
</ul>       

そこで気づいたのですが、前の会社で先輩が
「aタグの中にdivを入れるときはaタグをdisplay:blockにするように」と言っていたように思います。
ですが、リストの中を並列にするために、display:flexにしておく必要があります。

html5では、インライン要素の中にブロック要素を入れても特に問題はないはずですよね・・・？

参考
https://kuzlog.com/2017/02/03/906/

ちょっと自信がなくなってきたのでどなたか助言をお願いいたします。

Answer 1

html5では、インライン要素の中にブロック要素を入れても特に問題はないはずですよね・・・？

HTML5では「インライン要素」「ブロック要素」という区分ではなく、「フローコンテンツ」「記述コンテンツ」というように区分が変わっています（MDN）。

<a>は、<div>などのフローコンテンツも記述コンテンツも受け入れます（MDN）。

ただ、依然として<p>の中身は記述コンテンツだけとなっているなど、どれをどこに書いてもいいというわけではありません。

Comments

[takane]

丁寧な回答ありがとうございます。
aにはdivを入れていいようで安心しました。