【HTML】aタグの位置を考える。「h1>a」と「a>h1」の違いとベストプラクティス

こんにちは。

みなさんは、

<h1>
    <a href="#">これはH1の中のaタグです</a>
</h1>

これと、

<a href="#">
   <h1>これはaの中のh1タグです</h1>
</a>

これの違いってご存じですか？

HTML5的にはどちらもOKなんです。

違いを見て行きましょう。

サンプルを用意します

See the Pen LERXQm by Tsukasa Nagata (@nt-uni) on CodePen.0

アンカータグ（a）の有効範囲が先ず違います。
マウスオーバーするとリンクのカーソルに変わる範囲が違うと思います。

h1 > aの場合は文字の部分だけに対して、
a > h1の場合はインライン全てがクリック範囲となります。

テキストをコピーしたりする際に選択しますよね。
是非上のサンプルで上の行だけ選択してみてください。

a > h1の場合選択するのは難しいはずです。

a > h1の場合、h1のパディングがaよりも外にでてやんちゃをする場合があります…。

いままでa > h1のマイナス点が多いですが、2つの要素に対して一つのリンクの場合はいいかもしれません。

<a href="#">
    <h1>aタグの中のh1タグです</h1>
    <p>aタグの中のpタグです</p>
</a>

個人的にはh1 > aがわかりやすく、かつ要素の重要度的にもいいと思っています。がHTML5的にはどちらも有効なので、その場その場でふさわしいと思われる使い方をしてみてください！

Tsukasa Nagata

株式会社ユニマル代表取締役COO。「Web制作チームのためのクリエイティブ・プラットフォーム『universions』」では、UIデザイン・開発とマーケティング、色んなところに遊びにいくのが担当。