Zenn
🧑‍🎓

MDNの記述が変更されたことの意味（inline-level element, block-level element）

2023/05/14に公開
CSS
HTML
初心者
Web
tech

前回記事を書いてから、約2ヶ月弱が経ちました。
このたび、MDNの記述（英語版）に対する変更提案の PR がマージされたことから、新しい記事を書くことにしました。

前回の記事では、「HTML Standardからインライン要素・ブロック要素の記述が削除されたことを受けても、それらの概念が消えたわけではない」という主張を展開しました。
しかし、それにもかかわらず「記述がなくなったから概念もなくなったと言える」という主張を目にしました。

今回の変更を受けて「MDNからも記述が削除されたから、やはりそんな概念はないんだ」と主張する人が出てくることを予想しています。
そういった意見を目にしたとしても、この記事を読んだ方々が、それに惑わされることなく自己の判断と思考を続けるためのガイドとなることを願っています。

一応補足しておきますが、前回の記事に対するアンサー記事が存在します。
その冒頭部分には大幅な追記があり、僕の主張を踏まえたうえでの記述となっています。あらかじめご参照いただけると幸いです。

この記事の対象者

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

はじめに： 結論

  1. MDNの英語版における "inline element", "block element" という表記がなくなり別の表記に変更された
  2. 今回の表記の修正は、既存の知識や考え方（概念）が無効だからという趣旨ではない

これらの結論を理解した上で、以下の詳細な説明を読んでいただければと思います。

MDN の記述が変更された経緯

MDN Web DocsはMozillaが運営するウェブ技術に関する広範なリファレンスとチュートリアルのリソースで、開発者コミュニティ全体からの貢献が集まり、その内容は日々更新されています。

最近、このMDNの記述に注目すべき変更がありました。
具体的には、"Block-level elements"と"Inline elements"という表記がそれぞれ"Block-level content"と"Inline-level content"に修正され、記述がHTMLからGlossary（Web関連用語集）側へ移行しました。（なお、前回の私の記事が変更の端緒となり提案されたものです）

この変更提案は編集者のOnkar Ruikar氏によって行われ、レビュアーのEstelle Weyl氏らによってレビューされ、最終的にマージされました。
ただし、記事執筆時点では日本語の記事はまだ未翻訳のままです。

変更のPullRequestの内容

今回の PullRequest(以下"PR") CSS: move block-level and inline-level pages from HTML to CSS #25891 における主な変更内容は以下の通りです。

  • MDN Web Docs Glossary: Definitions of Web-related terms > Block-level content

    • 変更前: Block elementsという名前でHTMLのページで説明
    • 変更後: Block-level contentという名前で書き直され、用語集のページに移動

  • MDN Web Docs Glossary: Definitions of Web-related terms > Inline-level content

    • 変更前: Inline elementsという名前でHTMLのページで説明
    • 変更後: Inline-level contentという名前で書き直され、用語集のページに移動

  • Guides > CSS > CSS layout > Normal Flow ほか

    • 変更前: HTMLの要素は "Block level element" と "Inline elements" というカテゴリーに分けられていました。
    • 変更後: これらの表記が "Block-level content" と "Inline-level content" に修正されました。

  • Guides > HTML > Introduction to HTML > Getting started with HTML

    • 変更前: "Block versus inline elements" というセクションが存在し、ブロックレベル要素とインライン要素の違いについて説明していました。
    • 変更後: このセクション全体が削除されました（後述します）

  • References > CSS > CSS Flow Layout > Block and inline layout in normal flow

    • 変更前: 要素がブロックまたはインラインのフォーマットコンテキストの一部として表示されることについて説明していました。
    • 変更後: この説明が少し修正され、要素がブロックまたはインラインのフォーマットコンテキストに基づいて表示されることについて説明するようになりました。

  • References > HTML

    • 変更前: HTMLの要素は通常 "Inline elements" または "Block-level elements" とされていました。
    • 変更後: これらの表記が "Inline-level elements" と "Block-level elements" に修正されました。

以上の変更は、HTMLの要素に対する理解を深めるためのものであり、これらの要素がどのように振る舞い、どのように使用されるべきかについての"説明"が少し変わったということを意味します。

変更内容の理解と認識

PRの説明文には次のように記載されています。

As HTML5 uses a new classification now(content categories), the PR removes Inline_elements and Block-level_elements pages from HTML tree. And adds block-level and inline-level glossary pages as CSS concepts.

HTML5では新しい分類（コンテンツカテゴリ）が採用されたため、HTMLツリーからInline_elementsとBlock-level_elementsのページを削除しました。また、CSSの概念として、ブロックレベルとインラインレベルの用語集ページを追加しました。(DeepLによる翻訳)

これにより、HTML5が新しい分類法（content categories）を使用する現在、旧来の Inline_elements と Block-level_elements のページがHTMLのカテゴリから削除され、その代わりに block-level と inline-level の用語ページがCSSの概念として新たに追加されました。

この変更の主な目的は、HTMLとCSSの概念の間での混乱を避け、より正確な表現を提供することです。HTMLの block と inline の要素についての説明は、元々、それらがブラウザ上でどのようにレンダリングされるか（CSSのコンテキスト）と、それらがHTMLのドキュメント構造内でどのように機能するか（HTMLのコンテキスト）の両方を含んでいました。
しかし、これらは必ずしも一致するわけではなく、 それぞれ異なるコンテキストで考慮するべき概念 であることが明確になっています。

この変更によって、HTMLとCSSの役割が明確になります。HTMLはウェブページの構造を決め、CSSはその見た目を決めます。
しかし、これまでのブロック要素やインライン要素の概念は依然としてウェブページの構造を決めるために使用されています。（その見た目はCSSの概念を使ってより適切に説明されます）

CSS layout > Normal Flow

例えば、CSSのレイアウトについて説明しているページでは、"block level element"と"inline element"というフレーズがそれぞれ"block-level content"と"inline-level content"に変更されています。

これは、ブロックとインラインという考え方が、要素がどう見えるか（見た目）に関連していることを強調しています（その見た目はCSSの領域だと明確にしています）

つまり"インライン要素"と"ブロック要素"という概念はHTMLの文書構造としての意味を保持しているが、それらの表示方法についてはCSSの領域に移動しているということです。

Introduction to HTML > Getting started with HTML

この初級者向けのHTMLチュートリアルのページでは、「ブロック要素 vs インライン要素」というセクションが完全に削除されました。その理由は、PR内の編集者とレビュアーの間のやりとりから明らかになります。

初めに編集者は、ブロックとインラインの概念について注意喚起を行い、その後、HTML要素の「コンテンツカテゴリー」について説明する新しい段落を追加しました。この変更は、HTML5がブロックとインラインという用語を排除した理由と、HTML要素が共通の特性を共有する「コンテンツカテゴリー」に属することを明示することを目的としていました。

しかし、レビュアーは「この新しい内容は初心者向けの内容の範囲を超えている」と指摘し、そして「ここで軽くカテゴリーについて説明するか、このセクション全体を削除するかのどちらかが良い」と提案しました。

結果的に、このセクション全体が削除されました。
これは、初心者向けのチュートリアルでは、HTMLの要素がどのように見えるか（見た目）よりも、HTMLの要素がどのようにウェブページの骨組みを作るか（構造）に焦点を当てるべきだという考え方を反映しています。

ブロックとインラインという概念が見た目に関連しているため、それらはCSSの領域に属するとされ、HTMLの初級者向けチュートリアルからは除外されたにすぎません。この点は、文書構造としての要素（たとえば「文」の中に「段落」を入れられないなど）についての明らかな制約は依然として存在し、それらについての説明は不要だということを意味します。

レビュアーからのコメントから分かること

PR において、レビュアーから次のようなコメントがありました。

I checked the HTML4. spec. It reads as "Block-level" and "inline", without the "block", so I changed only the two historical references to inline without the "-level".

編集者より次のようなメッセージがあり

So when an element like span is inline by default, should it be referred to as inline or inline-level?
Has the term inline been changed to the broader version inline-level now?

それに対し、レビュアーから次のような説明がありました

Elements, according to the HTML 4 specification, used to be either block-level or inline. That was it. No other categories i don't think. The new specification uses neither inline not inline-level. Rather, it uses content models, https://html.spec.whatwg.org/#kinds-of-content.
Using inline-level is not an official term. inline is not correct, whereas inline-level makes it match block-level.

HTML要素（HTMLElement）は以前（10年以上前のHTML4において）、ブロックレベルまたはインラインのどちらかでした。
しかしながら、現在のHTMLの仕様では、これらの用語は使われておらず、代わりに Content models という概念が導入されています。これは、Webページの各HTML要素がどのような内容を持ち、どのように扱われるべきかを示すためのものです。

この変更の結果"inline"という用語はもはや適切ではなく"inline-level"という用語が使われるようになりました。
"inline-level"という用語は公式なものではないかもしれませんが、"block-level"という用語と対応しているため、このように使用されています。
（inlineは"行内"という意味であり、特段inline-levelと表記するまでもないが、block-levelという語句と対応させるためにそのように表記する）

これらの変更は、HTMLとCSSの間で要素の表示方法と構造をどのように説明するかについての統一性を保つことを目指しています。したがって、これらの変更はHTML要素の理解を深め、その使用をより明確にするためのものであるといえます。

MDNやその他のリソースから深い学びを得るために

MDNは、その信頼性の高さから多くの開発者が頼りとしています。しかし、それが間違いなく全ての答えを持つ絶対的な情報源であると信じることは、私たちの学びを制限する可能性があります。情報は常に進化し、ドキュメントもその変化に追随して更新され続ける必要があります。

この最近のMDNの修正は、私たちがどの程度現行のHTMLとCSSの仕様を正確に理解しているか、そしてそれがどの程度MDNの情報に依存しているかについて、自問自答する機会を提供してくれます。HTML要素のカテゴリーに関するセクションが削除され、それが見た目のスタイリングに関連しているという事実が強調されましたが、それによりHTMLとしての文書構造の重要性が欠落してしまったと感じます。

MDNや他のリソースを利用する際には、複数の情報源から学び、多角的な視野を持つことが重要だと思います。MDNは信頼できる情報源であり、その情報のほとんどは正確ですが、全ての視点をカバーしているわけではないことを理解することが重要です。

例えば、今回のケースであれば、HTMLとCSSの仕様を自身で確認することにより、HTML要素のカテゴリーが見た目にどのように影響を与えるかだけでなく、それらがHTML文書内でどのような役割を果たすかについても理解を深めることができます。

情報を学ぶ際には、情報源に対する批判的な思考を持ち、様々な視点から情報を得ることが重要です。そして、それらの情報源から得られる情報を元に、自身の理解を絶えず更新し、深めていくことが必要です。これは誰にとっても、より良い開発者となるための、また、より良い学習者となるための一歩となります。

学習者を理解し、より効果的な学習経験を提供するために

HTMLを学び始めたばかりの人々にとっては、新しい概念や用語に対応するのは難しいことかもしれません。特に、「インライン要素」と「ブロック要素」のような用語は、現在のHTML標準では使用されていないものの、Web上では日本語でも英語圏でも一般的に使われています。学習者のなかには、これらの用語を用いてHTMLを学んでいる人も少なくありません。

学習は個々人で異なる速度と深度で進むものです。

HTMLの学習においても、一部の人々は「コンテンツモデル」のような抽象的な概念に直面してもすぐに理解できるかもしれません。
しかし、他の多くの初心者にとっては「ブロック要素」と「インライン要素」のような直感的な概念から始めることが理解を深める一歩となるでしょう。

"インライン要素"や"ブロック要素"といった概念が「一般的な会話や質問の中で依然として使用されている現実を無視すること」は、学習者にとって有益ではないと考えています。

「なるべく仕様に沿った言葉で説明すべきだ」という意見に基本的に賛同しているものの、一方で次のようなイメージを抱いています。

解像度の観点から考えるHTMLの学習

「インライン要素」と「ブロック要素」に代わり、「コンテンツモデル」の概念が導入されたことは、解像度が上がったと言えるでしょう。より精確（正確）な表現になったといえます。
言い換えれば、旧来の表現は解像度が低く、現代のWebを適切に表現するには不十分になっているということです。
そのために、より細かい粒度で要素を理解するための「コンテンツモデル」が登場したのです。

学習者の視点で考えると、必ずしも最初から高解像度の情報で学ぶことが最善とは限りません。
初学者にとっては、高解像度な情報は複雑すぎて理解が難しく、混乱を招く可能性もあります。
それぞれの学習者が自身のペースで段階的に解像度を上げていくことが、理解を深め、継続的な学習を続ける上で有益です。

言葉ではなく概念を学ぶ

学習者がこれら「インライン要素」や「ブロック要素」のような旧来の概念を理解し、そのうえで「これらの語句は現在のHTML仕様では使用されていない」という事実を知ることは、より良い学習経験となると考えています。
これは、「インライン要素」と「ブロック要素」のような用語が、学習者が自身の理解を他者と共有し、また他者の質問や解説を理解するための共通の言語として依然として機能しているからです。

今は。

もし将来、これらの語句が使われなくなったとしても、それでも無理に使い続けるべきだとは主張していません。
その時になったら適切な判断をすればよいと思います。

仕様書からなくなった語句でも、それらが現在も使われているならば、学習者がそれらを理解することは彼らの理解を深める一助となります。
学習者は過去の概念が現在どのように使われているか、または使われていないかを理解することができます。
そして、それは彼らがより深い理解を得るための一歩となるでしょう。

さいごに

これに関連する記事は、これが最後になるはずです。
もともとさほど大きな主張のあるものではなく（自分にとってはしごく自然なものでしたが）想像以上の反響がありました。

残念なことに、僕自身の主張が、記事にした内容のままは伝わりにくいものだったようです。
専門外のことではあるので、その点については致し方ないかなと思っていますが、ぜひ今回の一件が、より良い学習体験を提供するための議論につながればと思います。

最後に、この記事を読んでくださった方々、そして反響をいただいた方々に感謝を申し上げます。
記事の正確性には気を配っていますが、もし事実と異なる点があれば、ぜひコメントください。
また、僕の主張を理解していただいたうえで、別の意見を持っている方との議論も歓迎します。

それでは。

Discussion