インライン要素の中にブロックレベル要素を書いちゃダメな話

最近陥りました。なんでリンク反応しないの！？って思ったら【インライン要素の中にブロックレベル要素を書いちゃダメ】でした。なので見直しがてら勉強し直し。

インライン要素とブロックレベル要素

そもそもhtmlは大きくわけてインライン要素をブロックレベル要素に分けれます。ちょっとしたおさらい。

ブロックレベル要素

見出しタグ(h1 ~ h6)や、blockquote、div、form、ol、p、pre、table、ulなどがブロックレベル要素です。

その他のブロックレベル要素はこちら

ブロックレベル要素のスタイル

インライン要素

aタグやemタグ、spanタグなどがインライン要素です。footerなどに使われるsmallタグもインライン要素です。

その他のインライン要素はこちら

インライン要素のスタイル

※1
上下については指定しても要素の高さに影響しないため、上下にあるコンテンツが重なることがある。

これはスタイルも効く特別なインライン要素

imgやinput、select、textareaなどは

ブロックレベル要素と同じくスタイルが効きます。

インライン要素の中にブロックレベル要素を書いてはいけない

インライン要素の中にブロックレベル要素を書くことは禁止されています。

OK : <a href="#"><p>これはNGです....。</p></a>
NG : <p><a href="#">これはOKです！！</a></p>

冒頭に書いた、最近陥ったこと

<table>
  <a href="#">
    <tr>
        <th>タイトルタイトルタイトル</th>
        <td>日付日付日付</td>
    </tr>
  </a>
  <tr>
        <th>タイトルタイトルタイトル</th>
        <td>日付日付日付</td>
    </tr>
</table>

ブロックレベル要素と定義されているのはtableだけですが、tableの中にかけるものは限られているのでtrなどを囲むのはNGみたいです。

リンクをつけたい場合はth内やtd内にaタグを書くことができます。

ソースをみるとtrがaで囲まれていますが、要素の検証をした場合にはtableの外にaが出されておりリンクとして効きませんでした....。

tableの中に書いていいもの