こんにちは。
みなさんは、
<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
Author Profile
Latest entries
- 2018.04.16プロフェッショナルインタビュー【企業編】広島から全国、そして世界を目指す!株式会社MIRAIのハイレイヤー分析
- 2016.10.21プロフェッショナルインタビュー【企業編】【後編】「夢があればブラックじゃない」福岡の技術集団オルターブースはベーシスト小島氏と愉快な仲間たち
- 2016.10.18プロフェッショナルインタビュー【企業編】【前編】福岡の技術集団オルターブース。楽曲を作れると思ってCOBOLを書いていたベーシスト小島氏と愉快な仲間たち
- 2016.09.02プロフェッショナルインタビュー【フリーランス編】【後編】代理店の仕事は気が楽だけど、それでも直接受ける案件が大事。JUSO Coworkingオーナー深沢さんの仕事