なんかimgとかaタグとかのインライン要素はpタグやh2などで囲うらしい

a0002_011891_m
今いる現場でのルールなんだけど、暇だからそれについて調べてみた。

どういうことかというと、こんな感じ

<a href="#">詳細はこちら</a>

参考URLhttp://w3q.jp/t/6731
今までdivで囲ってたんだけど、divじゃなくてpとかにするように言われてしまった。
でも理由がいまいちわからんので自分なりに調べてみた。

前提

imgやaはインライン要素だから、ブロックレベル要素の中じゃないといけない。

<body>
  <a href="#">詳細はこちら</a>
</body>

こういうのはだめ。表示されても、正しくない。

<body>
<p><a href="#">詳細はこちら</a></p>
</body>

pはブロックレベル要素で、これは正しい。
ちなみに、divの中にはブロックレベル要素はいれられるけど、pタグの中にはいれられない。
divはそれ自体意味を持たない。pは段落という意味を持つ。
この2つしか差はない。

結局好みだよねってなった

個人的な結論からすると、意味の持つ画像(ボタンとかメインイメージとか)はpタグで囲い、そうじゃないところはdivで囲うのがいいとは思う。
けど、なんか最終的には好みなんじゃないかなあ。あとは会社のルールがあるならそれに従えばいいと思った。

コメントを残す

メールアドレスが公開されることはありません。

日本語が含まれない投稿は無視されますのでご注意ください。名前及びコメントは必須項目、メールアドレス及びサイトURLは任意です。