HTML の仕様について

HTML

まずは現在のHTMLの仕様について理解する必要があります。
今現在、HTML はWHATWGが策定している「HTML Living Standard」という唯一のルールに基づき使われています。
以前はW3Cという別の団体が作成していた「HTML4」や「HTML5」が使われていて、一時期「HTML5」と「HTML Living Standard」という別々の2つのルールが存在する状態になっていました。
そして、2021年1月、W3CのHTML関連の仕様はすべて廃止され、WHATWG の HTML Living Standard に完全統一されました。


それまで全世界的に使われていたW3CのHTML関連の仕様がすべて廃止されたのが2021年という事もあり、2023年現在でもW3Cの策定したルールと「HTML Living Standard」のルールがごちゃごちゃになってしまっています。その代表例がHTMLのインライン要素とブロック要素です。

HTML4における「ブロックレベル要素」と「インライン要素」

HTML4では、HTMLの要素は「ブロックレベル要素」「インライン要素」のどちらかに定義されていて、ある要素の中にどの要素を入れることができるのかという定義は、この「ブロックレベル要素」「インライン要素」という定義を使って決めていました。
一番判りやすい例として「インライン要素」の中に「ブロックレベル要素」は入れられない、というものでした。

HTML4でNGな例
<a href="#">
<div>
<h2>Lorem, ipsum</h2>
<p>Lorem ipsum dolor sit</p>
</div>
</a>
HTML4でOKな例
<h2><a href="#">Lorem, ipsum</a></h2>
<p><a href="#">Lorem ipsum dolor sit</a></p>

HTML Living Standardにおける「ブロックレベル要素」と「インライン要素」

HTML Living Standardでは、HTML4の仕様である「ブロックレベル要素」と「インライン要素」は廃止されたので、今現在HTMLに「ブロックレベル要素」と「インライン要素」というものはありません。
代わりとなるものにコンテンツモデルというものが出て来ました。

コンテンツカテゴリー

ほとんどの HTML 要素は 1 つ以上のコンテンツカテゴリーに属していて、カテゴリーごとに共通した特徴を持つ要素を分類しています。これは緩やかなグループ分けです。例えば「h1」はフローコンテンツと見出しコンテンツに属します。

コンテンツモデル

ある要素の中にどの要素を入れることが出来るか、どうかはこのコンテンツモデルで決まります。
フローコンテンツの中にフローコンテンツを入れる事は可能ですが、記述コンテンツ (phrasing content) の中にフローコンテンツを入れる事は出来ません。

HTML Living StandardでOKな例
<a href="#">
<div>
<h2>Lorem, ipsum</h2>
<p>Lorem ipsum dolor sit</p>
</div>
</a>
HTML Living StandardでNGな例
<span>
<a href="#">
<h2>Lorem, ipsum</h2>
<p>Lorem ipsum dolor sit</p>
</a>
</span>


https://developer.mozilla.org/ja/docs/Web/HTML/Content_categories


zenn.dev


 

cssでのdisplayプロパティ

上記の話はあくまでもHTMLでの話で、cssでは今まで通り「display: block;」「display: inline;」が存在しています。
なのでa要素に余白や幅を持たせたかったらa要素に「display: block;」をかけていきます。