HTML5で廃止されたブロックレベル要素とインライン要素の違いとCSSのdisplayプロパティーについて
ブロックレベル要素とは、見出しタグ(hタグ)や段落タグ(pタグ)といった、文書構成要素が分類されます。
tableタグのような表を作るタグや、引用タグ(blockquoteタグ)、セクションを区切るdivタグなどもこれに該当します。
そのため、ブロックレベル要素を使うと前後に改行が自動的に入ります。
それに対してインライン要素は文章の一部として使われる要素のことを指すため、改行は入りません。
例えばリンクを表すaタグや、画像を表すimgタグといった要素もこれに該当します。
今回は、ブロックレベル要素とインライン要素の違いと、それを制御できるCSSのdisplayプロパティーについて、まとめます。
https://reviewlog.info/html-strike-line-through/HTML5でブロックレベル要素とインライン要素は無くなったが、１つだけ守らなければいけないルールが有る！
ブロックレベル要素 > インライン要素の入れ子構造しか成立しない(インライン要素の中にブロックレベル要素を配置できない)
<p><b>これは正しい例(ブロックレベル要素のpタグ内にインライン要素のbタグが入っている)</b></p> <b><p>これは逆の例で、間違った例</b></p> <b><span>インライン要素の中にインライン要素はOK(今回は太字を装飾したい場合)</span></b>
ちなみに上記のように、インライン要素の中にインライン要素を配置することは出来ます。
HTML5で概念が無くなったとは言え、セマンティックWebの考え方に則り、htmlタグを順序正しく記述することは変わらず必要です。
CSSでdisplayプロパティーをブロックレベル要素(block)、インライン要素(inline)で指定することで、変更することが出来る
p {
display:inline;
}
a {
display:block;
}
HTML5の考え方として、上記のブロックレベル要素やインライン要素は正しいマークアップの概念とは関係が無いものであり、CSSで体裁を整えろというメッセージだと受け取っています。(他にもinline-blockという中間の役割をする指定方法もあります。)
あくまで使用する順序さえ守っていれば、基本的にこれまでの実装と変わりないということだけ覚えておいておきましょう。
