どうも、7noteです。

いつもは初心者向けの記事を書いています。
今回はセクショニングルート要素と呼ばれる要素です。

セクショニングルート要素とは

HTML5から新しく増えた要素で、ブロック要素でもなくインライン要素でもありません。
以下のタグはセクショニングルート要素と呼ばれる要素に当たります。

blockquote
body
details
dialog
fieldset
figure
td

実はbodyとかもブロック要素ではなくセクショニングルート要素なんですよ。tdとかも。
一応調べて出てくる情報としては、見出しの階層に影響されずセクショニングルート要素内では独自の階層構造を持てるのだとか。

簡単に言うとh1やh2で構成されたサイトの構造がある中で、tdの中にまた別のh1やh2のタグを記述してtdの中に階層構造を作ることができます。

配置はどうなるの？

多くのフロントエンジニアが気になるのは結局配置するときはどうなるの？ということです。
figure要素を2個書いたらどうなるの？並ぶの？など、解説していきます。

<figure>figure</figure><figure>figure</figure>

<blockquote>blockquote</blockquote><blockquote>blockquote</blockquote>

<details>details</details><details>details</details>

<dialog>dialog</dialog><dialog>dialog</dialog>

<fieldset>fieldset</fieldset><fieldset>fieldset</fieldset>

<td>td</td><td>td</td>

↓↓実行結果↓↓