『なぜインライン要素・ブロック要素概念は依然として有用なのか：現代的なWeb制作への適用』という記事について

なぜインライン要素・ブロック要素概念は依然として有用なのか：現代的なWeb制作への適用
https://zenn.dev/coedo/articles/html-css-inline-element-block-level-element

この記事では、『なぜインライン要素・ブロック要素概念は依然として有用なのか』という記事（以下「元記事」といいます）の説明について見ていきます。

2023-04-01追記：この追記を書いている時点では、元記事の言っていることを違った視点で捉える必要があると考えています。そのため、本来的にはこの記事を更新するか、新しい記事を書く必要があると思っています。

ただ、そのことを筆者（私）が言語化するのは時間がかかると見ています（そして、筆者のやる気がそこまで持つかどうかもわかりません）。ですから、追記という形にひとまず納めておこうと思います）。

Twitterで、他の方のツイートを見たり、元記事を書いた@coedoさんと別の他の方とのやりとりを見たり、筆者（私）とやりとりをさせてもらったりしたところ、そもそもの元記事の前提条件をうまく汲めていないことがわかりました。元記事では、2つの「HTML」が存在していることに触れています。

そのため HTML といった場合に、それが（CSSを含まない）文書構造を表すマークアップ言語を指しているのか、それとも（CSSを含む）Web ページ全体を指しているのかは、文脈によって異なります。

一見奇妙に思えます。そして、このことが元記事の読者の理解を妨げます。（実際、この記事を最初に書いた時点では筆者も純粋なマークアップとしてのHTMLのみを考えていたので、うまく元記事の主張を汲めていませんでした）。しかし、ウェブ（技術）に馴染みのない、いわゆる「駆け出しエンジニア」から見れば、2つの「HTML」が認識として混在しているのはあり得るのではないかと捉えるようになりました。

ですからその意味で、この記事はいわゆる「アンサー記事」にはなっていません。むしろ、当初思ってたよりも元記事の投げかけている話は根深いように思えています。

03-31時点では立ち読みした程度なのですが、実際に店頭に並んでいるいわゆる「HTML5+CSS3」のような書籍、あるいはCSSを取り上げている書籍の中には、「インライン要素」「ブロック要素」の記述が見られるようです（ここはむしろ、筆者ではなく、興味のある人に確かめてもらいたいところです）。

そのことから、HTML Standardの規定しているHTML（しいていいかえるならばDOM）から「インライン要素」「ブロック要素」の定義がなくなったからといって、そのことをもってウェブページ全体を捉えたときの「インライン要素」「ブロック要素」の考え方がなくなった、とただちに「駆け出しエンジニア」に言い切ってしまうのは無理がありそうだと思い始めています。

元記事との比較をしやすいように、元記事の文書構成に似せてこのブログ記事は書かれました。

この記事の対象者

この記事は、ウェブ制作を学んでいる人や、「インライン要素」「ブロック要素」という用語の扱いに困っている人を想定しています。

はじめに： 結論

この記事の結論は次の2つです。

• 今日のHTMLから「インライン要素」「ブロックレベル要素」という表記はなくなった。
• ある要素にどのような要素を入れるのかは、「インライン要素」「ブロック要素」という考え方を使わなくてもできる。

詳しく説明したいと思います。

元記事の「インライン要素」「ブロック要素」という概念の主張について

元記事では、次のような説明があります。

Web制作に関するディスカッションの中で、HTML Standard の内容が変更されたことにより 「インライン要素」と「ブロック要素」という"概念"がなくなったという主張 がしばしば見られます。
しかし、僕はこの主張に疑問を感じており、この記事を通して、インライン要素・ブロック要素概念が依然として有用である理由を説明したいと思います。

まず事実として、HTML Standard^[1]によって廃止されたHTML4^[2]で、「ブロックレベル要素」（「ブロック要素」とも呼ばれる）、「インライン要素」という概念が定義されていました^[3]。しかし、HTML4はHTML Standardによって廃止されている^{[4] [5] [6]}ので、今日ではこのような概念は存在しません。

「概念」という言葉は、『新明解国語辞典』^[7]によれば次のように説明されています。

「…とは何か」ということについての受取り方（を表す考え）。

HTML4の考え方はHTML Standardによって廃止されていますので、そもそも「ブロック要素」「インライン要素」という、HTML Standardの定義するHTMLにおける技術的な「概念」は、もはや存在しません。

a要素のコンテンツモデルについて

この記事を書くきっかけは、あるWeb制作者が「aタグの中にブロック要素を入れてよいか」困っていると話題にした際、別の有識者が「HTMLからブロック要素とインライン要素という概念は消えた」と主張したことです。

「ブロック要素」という考え方は、今日のHTML仕様（HTML Standard）では廃止されています。ある要素の中にどの要素を入れることができるのかという定義は、要素定義^[8]で記載されている、コンテンツモデルとしてHTML仕様で定義されています^[9]。

コンテンツモデル
コンテンツがその要素の子や子孫として含めなければならないものの、規範的な記述。

HTML仕様では、a要素のコンテンツモデルは次のように定義されています^[10]。

4.5.1 a要素

コンテンツモデル：
透過的であるが、インタラクティブコンテンツの子孫、a要素の子孫、またはtabindex属性が指定された子孫が存在してはならない。

透過的というのは、HTML仕様で次のように定義されています^[11]。

3.2.5.3 透過的なコンテンツモデル

いくつかの要素は透過的といわれる。コンテンツモデルの説明でそれらの要素は"透過的"とされる。透過的な要素のコンテンツモデルは、その親要素のコンテンツモデルを受け継ぐ。"透過的"であるコンテンツモデルの役割で要求される要素は、透過的な要素がある、透過的な親要素のコンテンツモデルの役割で要求されるものと同じ要素である。

さて、例として、次のようなHTML断片を考えてみましょう。

<div>
  <a href="example.html">
    <div>
      <h2>記事タイトル</h2>
      <p>記事の概要</p>
    </div>
  </a>
</div>

a要素は、透過的なコンテンツモデルです。よってこの場合のa要素は、親であるdiv要素のコンテンツモデルとなります。div要素のコンテンツモデルは、HTML仕様で次のように定義されています^[12]。

4.4.16 div要素

カテゴリー：
フローコンテンツ。
パルパブルコンテンツ。

コンテンツモデル：
要素がdl要素の子でない場合：フローコンテンツ。

div要素のコンテンツモデルはフローコンテンツであることがわかります。また、カテゴリーとしてもフローコンテンツとされています。h2要素^[13]とp要素^[14]についても、同じようにHTML仕様で次のように定義されています。

4.3.6 h1、h2、h3、h4、h5、h6要素

カテゴリー：
フローコンテンツ。
ヘディングコンテンツ。
パルパブルコンテンツ。

コンテンツモデル：
フレージングコンテンツ。

4.4.1 p要素

カテゴリー：
フローコンテンツ。
パルパブルコンテンツ。

コンテンツモデル：
フレージングコンテンツ。

h2要素もp要素も、カテゴリーはフローコンテンツであることがわかります。
div要素のコンテンツモデルはフローコンテンツであるので、div要素の中に、フローコンテンツであるh2要素もp要素も入れることができます。

ここで、div要素をspan要素とした例を考えてみましょう。

<span>
  <a href="example.html">
   <div>
      <h2>記事タイトル</h2>
      <p>記事の概要</p>
    </div>
  </a>
</span>

この場合のa要素は、親であるspan要素のコンテンツモデルとなります。

span要素のコンテンツモデルはフレージングコンテンツです^[15]。div要素のカテゴリーは、フローコンテンツであり、パルパブルコンテンツであって、フレージングコンテンツではありません。よって、span要素の中にdiv要素を入れることはできません。

ところで、元記事では次のような記述があります。

ただし、注意点として、<a>要素内にはインタラクティブコンテンツを含めることができません。
これは、ユーザーがどのインタラクションを選択すべきか混乱を招く可能性があるためです。

a要素は、a要素を入れることができません。これはHTML仕様のコンテンツモデルでそのように定義されているためです。

このように、HTML仕様のコンテンツモデルの定義に従って、ある要素がどのような要素を含めることができるか、厳密に説明することができます。ここでは、「ブロック要素」「インライン要素」という廃止された概念を使うことなく説明していることに注意してください。

HTML仕様から「ブロック要素」「インライン要素」という考え方がなくなった理由

『HTML5 Differences from HTML4』（HTML4からのHTML5の差分）というW3Cの文書では、次のような説明があります^[16]。

4 コンテンツモデル
コンテンツモデルは、ある要素の子（または子孫）として許可されているもの―どのように要素を入れ子にできるかを定義するものです。

高レベルで、HTML4は要素の2つの主要なカテゴリ、「インライン」（span、img、テキストなど）と「ブロックレベル」（div、hr、tableなど）を持っていました。一部の要素は、カテゴリーのどちらにも適合しません。

ある要素は「インライン」要素を許可し（たとえばpなど）、ある要素は「ブロックレベル」要素を許可し（たとえばbodyなど）、一部の要素はその両方を許可しました（たとえばdivなど）。その一方である要素はどちらのカテゴリーも許可しませんが、特定の要素のみを許可する（たとえばdl、tableなど）、またはどの子も許可しませんでした（たとえばlink、img、hrなど）。

要素自身が特定のカテゴリーにあることと、特定のカテゴリーのコンテンツモデルを持つこととの違いに注意してください。たとえば、p要素は「ブロックレベル」要素そのものですが、「インライン」のコンテンツモデルを持っています。

コンテンツモデルをさらに混乱させるように、HTML4はStrict（厳格）、Transitional（移行）とFrameset（フレームセット）の種類があり、異なるコンテンツモデルのルールを持っていました。たとえば、Strictで、body要素は「ブロックレベル」の要素のみを持てましたが、Transitionalでは、「インライン」と「ブロックレベル」の両方を持てました。

依然として物事をさらに混乱させるように、CSSは、視覚整形モデルのための用語「ブロックレベル要素」と「インラインレベル要素」を使用します。これは、CSSの'display'プロパティに関係するもので、HTMLのコンテンツモデルのルールとは何の関係もありません。

CSSとの混乱を減らすために、HTMLはコンテンツモデルのルールの一部として用語「ブロックレベル」または「インライン」を使用しません。しかしながら、コンテンツモデルはHTML4より多くのカテゴリーを持ち、要素はそれらのいずれでもないか、いずれか、またはそれらの複数であってもよいです。

あるHTMLの要素にどの要素を入れることができるのかという、HTMLのコンテンツモデルと、CSSの視覚整形モデル^[17]で定義されている用語「ブロックレベル要素」と「インラインレベル要素」とは、無関係です。また、「ブロック」「インライン」という言葉をHTMLのコンテンツモデルで使用することは、無用な混乱を招きます。

このような理由から、HTML仕様では、「ブロック要素」「インライン要素」という概念は廃止されました。

文書の内容と見た目とを混ぜて考えることについて

元記事では、次のような主張がされています。

インライン要素・ブロック要素の概念は、HTMLの文書構造を理解するだけでなく、CSSを用いたレイアウトやスタイリングにも大きく関わっています。

一般的に、インライン要素・ブロック要素に関連する話題が出るときは、HTMLの文書構造以外の視点（レイアウト等）も含まれている可能性があります。
HTMLの仕様にとどまらず、より包括的な理解はWeb製作時の助けになると考えています。

CSS仕様では、次のような記述があります^[18]。

CSS 2.1は、著者およびユーザーが構造化文書（たとえば、HTML文書やXMLアプリケーション）にスタイル（たとえば、フォントや文字間隔）を付加することのできるスタイルシート言語である。文書の内容から表示スタイルを分離することで、CSS 2.1はウェブ制作およびサイトの保守・管理を簡素化する。

CSSは、文書の内容とウェブページの見た目を分離するという考え方に基づいて、今日のウェブ技術の基礎を築いています。廃止されたHTMLの「ブロック要素」「インライン要素」という概念と、CSSの視覚整形モデルの用語「ブロックレベル要素」「インラインレベル要素」は無関係です。これらの考え方を混ぜることは、CSSの文書と見た目を分けるという基本的な考え方と異なるものです。

文書構造と見た目と分けて考えることは、ウェブ技術の基本的な考え方に沿ったものであり、ウェブ制作者がウェブページを構築するときにも、有用な考え方であるということができます。

補足：公式文書はわかりにくいか

公式文書とされる、W3CやWHATWGの技術文書は、十分な予備知識を持たない読者には必ずしも適切ではありません。実際にHTML仕様では、次のような説明があります^[19]。

1.4 読者
この節は非規範的である。

この仕様は、この仕様で定義される機能を使用する文書およびスクリプトの著者、この仕様で定義される機能を使用するページ上で動作するツールの実装者、およびこの仕様の要件に対して文書または実装の正しさを確立することを望む個人を対象とする。

正確さのためのわかりやすさや、完全性のための簡潔さを犠牲にする場所において、おそらくこの文書は、少なくともウェブ技術について十分な知識を持たない読者には適さない。よりわかりやすいチュートリアルやオーサリングガイドが、より易しいHTML5入門を提供するだろう。

特に、DOMの基礎に精通することが、この仕様のより技術的な一部の要素を完全に理解するために必要である。Web IDL、HTTP、XML、Unicode、文字エンコーディング、JavaScript、およびCSSの理解も随所で役立つだろうが、必須ではない。

このように、HTMLの知識を多く持たない読者が、1人でHTML仕様を通読することは、苦痛をもたらす可能性があります。しかし、HTMLに限らず、ウェブ制作の知識を持つ人とともに公式文書の必要な部分のみを確かめることで、読者の苦痛を和らげ、より深いウェブ技術の理解への手助けとなる可能性があります。また、MDNのようなチュートリアルが、そのような読者に適切かもしれません。

補足：MDNは出典として有用か

一般に、MDN^[20]はウェブ技術に関する有用な情報源として、広く知られています^[21]。MDNは、さまざまなユーザーからの協力を受け付けているプロジェクトです^[22]。

元記事では、いくつかのMDNの記事を引用して自説を補強していますが、十分にメンテナンスされていない情報をもとに自説を補強していると推測されます。

• URL https://developer.mozilla.org/ja/docs/orphaned/Web/Guide/HTML/HTML5は、URLに「orphaned」を含んでいます。「orphaned」という単語は、「孤立」などを意味する単語で、MDNでは、英語版と結びつかないものであることを意味しています。MDNで英語版と結びつかないURLは、メンテナンスされていません。詳細については、Mozilla Hacksの記事^[23]を参照してください。
• URL https://developer.mozilla.org/ja/docs/Web/HTML/Block-level_elementsは、MDNコミュニティへの問い合わせが行われています^[24]。コミュニティからのリアクションによっては、このURLの内容が修正される可能性があります。

MDNは、2005年に開始した歴史のあるプロジェクトであり、膨大な情報が記載されています。そのため、MDNで説明されている内容の中には、メンテナンスされていなかったり、内容に疑問が発生している場合があります。また、コミュニティによる査読プロセス^[25]を通して、MDNの説明の内容が変更される可能性があることに注意してください。

おわりに

廃止されたHTMLの概念「インライン要素」「ブロック要素」について、そのような概念が既に廃止されていることと、その理由の説明をしました。また、a要素にどのような要素が入れられるのか、HTML仕様で定義されているコンテンツモデルを使って説明しました。さらに、文書の内容と見た目を分ける考え方について説明しました。最後に、補足として、MDNは有用な資料である一方で、そのすべてを無条件に信用してはならないことを示しました。

HTML仕様が、HTMLを理解するのにもっとも信頼できる資料です。しかし、HTML仕様は、厳密さのためにわかりやすさに欠けているところがあります。

『HTML解体新書』という書籍が存在します^[26]。これは、HTML仕様で規定されているHTMLを理解するのを手助けするだろうと、現場のウェブ制作者によって評価されています^{[27] [28]}。この書籍を「はじめて知った」「気になる」という人は、手に取ってもらえると、このブログ記事を書いた中の人が喜びます。

脚注

1. https://html.spec.whatwg.org/multipage/

2. https://www.w3.org/TR/2018/SPSD-html401-20180327/

3. http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/struct/global.html#h-7.5.3

4. https://www.mitsue.co.jp/knowledge/blog/frontend/202102/08_0910.html

5. https://github.com/momdo/momdo.github.io/wiki/html

6. https://www.w3.org/standards/types#SPSD

7. https://dictionary.sanseido-publ.co.jp/dict/ssd13078

8. https://momdo.github.io/html/dom.html#element-definitions

9. https://momdo.github.io/html/dom.html#content-models

10. https://momdo.github.io/html/text-level-semantics.html#the-a-element

11. https://momdo.github.io/html/dom.html#transparent

12. https://momdo.github.io/html/grouping-content.html#the-div-element

13. https://momdo.github.io/html/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements

14. https://momdo.github.io/html/grouping-content.html#the-p-element

15. https://momdo.github.io/html/text-level-semantics.html#the-span-element

16. https://momdo.github.io/html5-diff/#content-model

17. https://ss1.xrea.com/momdo.s35.xrea.com/web-html-test/spec/CSS21/visuren.html

18. https://ss1.xrea.com/momdo.s35.xrea.com/web-html-test/spec/CSS21/cover.html

19. https://momdo.github.io/html/introduction.html#audience

20. https://developer.mozilla.org/ja/

21. https://developer.mozilla.org/ja/docs/MDN

22. https://ja.wikipedia.org/wiki/MDN_Web_Docs

23. https://hacks.mozilla.org/2021/02/mdn-localization-update-february-2021/

24. https://github.com/orgs/mdn/discussions/353

25. https://developer.mozilla.org/en-US/about

26. https://www.amazon.co.jp/dp/4862465277

27. https://blog.uhy.ooo/entry/2022-05-05/html-kaitai-shinsho/

28. https://engineer.crowdworks.jp/entry/html-anatomische-tabell