WordPressでaタグが勝手に閉じまくった原因

WordPressでaタグが記述通りに動いてくれない

最近のaタグはブロック要素の中に書かなくてもいいという話を聞き、

固定ページで↓みたいに書いてみたんだけれど、どうしてもうまく行かない。。

<a href="#">
    <div>
        <h3>hoge</h3>
        <p><a href="#">hogehogehoge</a></p>
    </div>
</a>

↓みたいになっちゃう

<a href="">
    <div></div>
</a>
<a href="">
    <h3>hoge</h3>
</a>
<a href="">
    <p><a href="#">hogehogehoge</a></p>
</a>

調べてみても解決方法は出ていなかったのですが、ある記事に

HTMLはブロック要素の中にインライン要素を入れるというルールがあって〜

という記述を発見！

苦しい言い訳と今回の対応

そのルール自体は知ってたけれど、モダンなコーディングは気にしなくていいとか聞いたから
「モダンなコーディングでナウく作ってやるゼ」
とか考えて作ったのが裏目に出た様子。。

つまり
- div
- h3
- p

はブロック要素だから分解されちゃったわけだ(でもそれならそもそも囲われるのがおかしくないかと思うけど。。)

少しもやりはありつつも、今回はカード全体をクリッカブルにするのは諦めることに。

絶対なんか方法あると思うけど、優先度高くないからそんなに時間かけられないのだ。

ただ、このあたりについては対応できるようになってないとだと思うので、WP構築して勉強しよう。

端書き

ちなみにWordPressの自動挿入を無効化してくれる方法があるらしい。

今回は会社のWPだったので使えなかったけれど、自分で遊ぶときに使ってみようかと思う。