前回は「HTML5が廃止されHTML Living Standard へ」の記事でTML Living Standardについて書きましたので、その続きになります。
今回はインライン要素とブロックレベル要素についてです。
勉強したり調べたりしている人も多い部分ですが、できるだけわかりやすくお話しよおうと思います。
いきなりですが酷なことを言います。
2021年7月16日現在このブログを書いていますが、この時点でインライン要素とブロックレベル要素を調べようとしている人は、残念なお話をしなくてはいけません。それは、、、
インライン要素とブロックレベル要素・・・
そもそももう存在していないんです！
HTML4やXHTMLの時に出てきた要素であり（私もこれで習ってきました）、すでにHTML5からはインライン要素、ブロックレベル要素なんていうものは存在していません。もう、ばか！私の思いはどうなるの！！
気を取り直して、じゃあ要素の概念ってどうなっているの？というお話をこれからしようかと思っています。
HTML Living Standard時代の「要素」
新しいお話をする前に、使用されなくなったインライン要素とブロックレベル要素については今回お話しませんので、気になる方は以下のサイトを参照してくださいね。
コンテンツカテゴリーとコンテンツモデル
インライン要素やブロックレベル要素が無くなった今、HTML5からは別の概念が取り入れられました。そう、それが見出しにも出している「コンテンツカテゴリー」「コンテンツモデル」という概念です。これについて説明していこうと思います。
コンテンツカテゴリーとは
タグ要素は、「コンテンツカテゴリー」という9つのカテゴリーに分類されます。しかしその分類も、タグ要素によっては『「〇〇カテゴリー」と「〇〇カテゴリー」』などのように、複数のカテゴリーに分類されることもあります。
コンテンツモデルとは
コンテンツカテゴリーに分類されているタグ要素は、「コンテンツモデル」というモデル、つまりコンテンツを配置するためのルール（モデル）が決められています。
マークアップするためのルール（モデル）であり、どのコンテンツカテゴリーに分類されているタグ要素が、どのコンテンツカテゴリー要素に入れることができるかなどを定義しています。
細かなお話になってしまいますが、コンテンツカテゴリーもコンテンツモデルに含まれるのですが、便宜上ここではコンテンツカテゴリーとコンテンツモデルを別でお話そうと思います。
うーん、、、文章だけでは難しくて、もうちょっと簡単に表現したいですね。そもそも本当にインライン要素やブロックレベル要素がなくなったのでしょうか。それとも、名前が変わって存在していたりするのでしょうか？
もうちょっと見ていかないと難しいようです。。。
9つのコンテンツカテゴリー
具体的な7つのコンテンツカテゴリーを紹介していこうと思います。
- メタデータコンテンツ
- フローコンテンツ
- セクショニングコンテンツ
- ヘディングコンテンツ
- フレージングコンテンツ
- エンベッディッドコンテンツ
- インタラクティブコンテンツ
この7つのコンテンツが、「コンテンツカテゴリー」と呼ばれている分類になります。このカテゴリーに属さない例外的な要素があるのですが、「body」要素だったり「html」要素だったりがそれにあたります。意外に「li」要素もコンテンツカテゴリーには分類されません。bodyやhtmlなら、確かに分類するまでもありませんね。「li」はなぜ？って思う人もいるかもしれませんが、この辺は学者でも定義者でもないのでスルーしましょう。その議論は我々には重要なことではないのでね。
さて、コンテンツカテゴリーは、タグ要素が1つのカテゴリーに分類されるとは限らず、複数のコンテンツカテゴリーに分類されるものもあります。「span」要素だったり「a」要素のリンクだったりがそれにあたります。
以前までのインライン要素だったりブロックレベル要素だったりは、タグ要素のみでどちらになるか定義していましたが、この新しいコンテンツカテゴリーではタグ要素の状態によってカテゴリー分類されるため、複数のカテゴリーが存在しても不思議ではないってことは納得できますよね。
この7つに分類されたコンテンツカテゴリー要素を、コンテンツモデルをもとにしてマークアップしていくことになります。
さて、更にその7つに分類されたコンテンツカテゴリー要素を掘り下げてみたいと思います。
なお「パルパブルコンテンツ」「スクリプトサポート要素」と言うものも挙げられているのですが、今回のカテゴリー分類とは異なってくる要素のため別の機会にお話ししようと思いますので、今回は省略してお話進めることとします。
メタデータコンテンツ
<base>、<link>、<meta>、<noscript>、<script>、<style>、<template>、<title>
タイトルやメタデータ、表示方法や本文外の情報などを表すコンテンツカテゴリーです。<head>要素内で使用することが多いものになります。
フローコンテンツ
<a>、<abbr>、<address>、<article>、<aside>、<audio>、<b>、<bdo>、<blockquote>、<br>、<button>、<canvas>、<cite>、<code>、<command>、<datalist>、<del>、<details>、<dfn>、<div>、<dl>、<em>、<embed>、<fieldset>、<figure>、<footer>、<form>、<h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<header>、<hgroup>、<hr>、<i>、<iframe>、<img>、<input>、<ins>、<kbd>、<keygen>、<label>、<map>、<mark>、<math>、<menu>、<meter>、<nav>、<noscript>、<object>、<ol>、<output>、<p>、<pre>、<progress>、<q>、<ruby>、<samp>、<script>、<section>、<select>、<small>、<span>、<strong>、<sub>、<sup>、<svg>、<table>、<textarea>、<time>、<ul>、<var>、<video>、<wbr>
テキスト関連や埋め込みコンテンツなど、<body>内で使用されることの多いコンテンツカテゴリーになります。
特定の条件が満たされている場合にのみ、下記の要素はフロー・コンテンツのカテゴリーに分類されます。
<area> : 要素の子孫の場合
<link> : itemprop 属性がある場合
<meta> : itemprop 属性がある場合
<style> : scoped 属性がある場合
セクショニングコンテンツ（区分コンテンツ）
<article>、<aside>、<nav>、<section>
文章区分や節など、セクション（区切り）を表すコンテンツカテゴリーです。
ヘディングコンテンツ（見出しコンテンツ）
<h1>、<h2>、<h3>、<h4>、<h5>、<h6>
見出しを表すコンテンツカテゴリーです。
フレージングコンテンツ（記述コンテンツ）
<a>、<abbr>、<area>、<audio>、<b>、<bdi>、<bdo>、<br>、<button>、<canvas>、<cite>、<code>、<data>、<datalist>、<del>、<dfn>、<em>、<embed>、<i>、<iframe>、<img>、<input>、<ins>、<kbd>、<keygen>、<label>、<map>、<mark>、<meter>、<noscript>、<object>、<output>、<picture>、<progress>、<q>、<ruby>、<s>、<samp>、<script>、<select>、<small>、<span>、<strong>、<sub>、<sup>、<template>、<textarea>、<time>、<u>、<var>、<video>、<wbr>
文章中で使用するコンテンツカテゴリーです。
HTML4やXHTMLの「インライン要素」に近い要素です。
あってよかった！インライン要素！！
安心しましたか？
特定の条件が満たされている場合にのみ、下記の要素はフロー・コンテンツのカテゴリーに分類されます。
<a> : 記述コンテンツだけを含む場合
<area> : 要素の子孫である場合
<del> : 記述コンテンツだけを含む場合
<ins> : 記述コンテンツだけを含む場合
<link> : itemprop 属性がある場合
<map> : 記述コンテンツだけを含む場合
<meta> : itemprop 属性がある場合
先ほども言いましたが、以前のインライン要素がこの「フレージングコンテンツ」にあたることとなります。
逆に言えば、「フレージングコンテンツ」以外が、以前の「ブロックレベル要素」となります。
あくまでもざっくりと以前の要素に当てはめればという意味でお伝えしていますので、批判はしないでください。「この要素は違う！嘘じゃん！！」と言われたら、「そうです！！嘘です！！！」と開き直っちゃいますので。
エンベッディッドコンテンツ（埋め込みコンテンツ）
<audio>、<canvas>、<embed>、<iframe>、<img>、<object>、<picture>、<video>
画像や動画、音声など、文書内に埋め込みを行うコンテンツカテゴリーです。
インタラクティブコンテンツ（対話型コンテンツ）
<a>、<audio>、<button>、<details>、<embed>、<iframe>、<img>、<input>、<keygen>、<label>、<object>、<select>、<textarea>、<video>
ユーザとやり取りをするためのコンテンツカテゴリーです。リンクやフォームなど、ユーザーが操作することのできる分類になります。
特定の条件が満たされている場合にのみ、下記の要素はフロー・コンテンツのカテゴリーに分類されます。
<a> : href属性が存在する場合
<audio> : controls 属性がある場合
<img> : usemap 属性がある場合
<input> : type 属性が hidden 状態ではない場合
<menu> : type 属性が toolbar 状態ではない場合
<object> : usemap 属性がある場合
<video> : controls 属性がある場合
マークアップを担うコンテンツモデル
コンテンツモデルについては「この仕様で定義される各要素は、要素の期待されるコンテンツの説明となる、コンテンツモデルを持つ。」という説明が、HTML Living Standardに記載されています。うーん、日本語って難しい。英語から日本語にしたものを英語に戻してから意味を把握しないと理解できない気がします。日本語から勉強したくなります。
私の柔らかい頭を使って意味を汲み取ってみると、『対象となる各要素の「親要素」や「子要素」として入れることができる要素をここで説明するよ、それをコンテンツモデルって言うよ』ということが書かれているわけです。。。
この意味であってます？誰か日本語変換してもらってもいいですか？？
でも、大体のニュアンスは合っていると思います。
透過的コンテンツモデル
実は結構重要なこちらもご紹介。「透過的コンテンツモデル」と言う概念です。
<a>、<ins>、<del>、<object>、<video>、<audio>、<map>、<noscript>、<slot>、<canvas>
「いくつかの要素は透過的といわれる。コンテンツモデルの説明でそれらの要素は”透過的”とされる。透過的な要素のコンテンツモデルは、その親要素のコンテンツモデルを受け継ぐ。”透過的”であるコンテンツモデルの役割で要求される要素は、透過的な要素がある、透過的な親要素のコンテンツモデルの役割で要求されるものと同じ要素である。」
上記の説明がされているのですが、またまた私の柔らかい頭を使って意味を汲み取ってみると、『子要素が持てるコンテンツカテゴリーはその要素を透過することで親要素が持てるコンテンツカテゴリーを継承して子要素にも同じコンテンツカテゴリーを持つ事ができるよ、それを透過的コンテンツモデルって言うよ』ということが書かれています。。。
きっとそうに決まってる！
インライン要素・ブロックレベル要素は健在！
ここまでしっかりと読んでくれた方はわかると思いますが、結局のところ、カテゴリー分類を作ったり定義し直しているのはありますが、インライン要素やブロックレベル要素が無くなったと言っても、要素としてのインラインの概念やブロックレベルの概念は健在です。
いくらカテゴリーとして分類されていても、大きく2つに分けてって言われたら結局のところ、インライン的な要素とブロックレベル的な要素に分かれますもの。
マークアップ視点から見ればコンテンツレベルのお話ですし、レイアウト視点から見ればインライン・ブロックレベルのお話になりますからね。
過去の知識をアップデートするだけでなんとかもう数年は生きていけそうです。
参考リンク
コンテンツモデル・コンテンツカテゴリー（日本語）
コンテンツモデル・コンテンツカテゴリー（英語）
p段落要素（MDN）
