【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的にはどちらも有効なので、その場その場でふさわしいと思われる使い方をしてみてください!

引用:Link in Header? Or Header in Link? | CSS-Tricks

フォローして続編をチェック

@universionsをフォロー