なぜインライン要素・ブロック要素概念は依然として有用なのか：現代的なWeb制作への適用
Web制作に関するディスカッションの中で、HTML Standard の内容が変更されたことにより 「インライン要素」と「ブロック要素」という"概念"がなくなったという主張 がしばしば見られます。
しかし、僕はこの主張に疑問を感じており、この記事を通して、インライン要素・ブロック要素概念が依然として有用である理由を説明したいと思います。
この記事を書くきっかけは、あるWeb制作者が「aタグの中にブロック要素を入れてよいか」困っていると話題にした際、別の有識者が「HTMLからブロック要素とインライン要素という概念は消えた」と主張したことです。
僕はこの主張に対して、MDN などの記事で依然としてブロック要素・インライン要素という用語が使われていることからも、概念が消えたわけではないという意見を伝えていきたいと思っています。
たとえば dev.to で inline element で検索すると複数の記事がヒットしますが、その記事内および記事のコメント内で、ブロック要素・インライン要素という概念がなくなったととれる主張を見つけることができませんでした。
この記事では、インライン要素・ブロック要素概念がなぜ依然として重要であり、今日のWeb制作を学ぶ方々に対してどのように伝えていくとよいかを説明していきます。
この記事の対象者
この記事は、Web制作を学んでいる人や、インライン要素・ブロック要素という用語の扱いに困っている人を想定しています。
はじめに： 結論
この記事の結論はつぎのふたつです。
- HTML Standard からインライン要素・ブロックレベル要素という表記はなくなった。
- しかし、依然としてインライン要素・ブロック要素について理解することは有用である。
詳しく説明したいと思います。
HTML、CSS、JavaScriptの関係
Webページにおいて、HTML、CSS、JavaScript等はそれぞれ異なる役割を果たし、連携して動作します。
- HTML：Web ページの基本構造を定義するマークアップ言語（文書の構造を表現する役割）
- CSS：Web ページのデザインやレイアウトを制御するスタイルシート言語（見た目を調整する役割）
- JavaScript：Web ページにインタラクティブな機能を追加するプログラミング言語（動的な要素やユーザーとの対話を実現する役割）
これらの技術は、それぞれ独立して機能するだけでなく、相互に連携してWebページを構築するために使用されます。
そのため HTML といった場合に、それが（CSSを含まない）文書構造を表すマークアップ言語を指しているのか、それとも（CSSを含む）Web ページ全体を指しているのかは、文脈によって異なります。
HTML5 は HTML で定義されている最新の標準仕様の名称です。この用語は、 2 つの異なる概念を表しています。これは HTML 言語の新しいバージョンであり、新しい要素、属性、動作、およびより多彩でパワフルなウェブサイトやアプリケーションを構築することができるより大きな一連の技術でもあります。このセットは HTML5 & friends と呼ばれることがあり、よく HTML5 と短縮されます。
https://developer.mozilla.org/ja/docs/orphaned/Web/Guide/HTML/HTML5
HTML要素とカテゴリーの分類
HTML要素（element）とは、Webページの構造や内容を表現するために使用される基本的な構成単位です。
HTML要素（element）は、テキストや画像、リンク、リスト、フォームなど、Webページに表示されるさまざまな情報を構造化し、意味を付与します。HTML Living Standardでは、各要素はその用途や役割に応じていくつかのカテゴリーに分類されます。これらのカテゴリーは、各要素の使い方や、他の要素との相互作用を理解するためのガイドラインを提供します。
例えば、<p>要素は段落を表現するために使用され、<a>要素はハイパーリンクを作成するために使用されます。それぞれ特定のカテゴリー（<p>はFlow content、<a>はInteractive contentなど）に属しており、そのカテゴリーに従って使用されることが期待されます。
HyperText Markup Language
1993年に最初の仕様が公開され、2022年現在も機能の拡張や改良が続けられている。最初期においてはIETFが、1996年以降はW3Cが、2019年以降はWHATWGが規格の策定、仕様公開を行なっている。
https://ja.wikipedia.org/wiki/HyperText_Markup_Language
HTML Living Standard
HTML Living Standardは、WHATWGが策定しているHTMLの規格である。W3Cの勧告するHTML5およびそれ以降（HTML 5.1など）は、HTML Living Standardを基にしている。
（略）
2019年5月28日、W3CとWHATWGは、「HTML Living StandardをHTMLとDOMの唯一の標準とし、W3Cは今後HTMLとDOMに関する標準の策定を行わない」旨合意したことを発表した。以降はHTML Living Standardが唯一の標準規格となり、ある時点におけるHTML Living StandardのレビュードラフトがそのままW3Cの勧告候補や勧告となる。2021年1月29日、WHATWGにあるHTML Review DraftがW3Cによって勧告されたことによって2021年5月現在、有効なHTMLの標準規格はHTML Living Standardのみとなっている。
https://ja.wikipedia.org/wiki/HTML5#HTML_Living_Standard
フローコンテンツとインライン要素・ブロック要素
HTML Living Standard では、要素はいくつかのカテゴリーに分類されます。特に、フローコンテンツ（Flow content）というカテゴリーは、ページ上でテキストや画像、リンクなどの情報がどのように流れるかを表現するための要素を含んでいます。
フローコンテンツは主に、インライン要素（Inline elements）とブロック要素（Block-level elements）に分けられます。
MDN には次の記述があります。
ブロックレベル要素とインライン要素という区分は、 HTML 4.01 までの仕様書で使用されていました。
HTML5 ではこの二つの区分が、より複雑なコンテンツカテゴリの組み合わせに置き換えられました。
「インライン」はおよそ記述コンテンツのカテゴリに対応しているのに対し、「ブロックレベル」カテゴリは HTML5 のコンテンツカテゴリには直接対応しませんが、「ブロックレベル」要素と「インライン」要素の組み合わせは HTML5 のフローコンテンツに対応します。他にも、対話型コンテンツなどの他のカテゴリも存在します。
https://developer.mozilla.org/ja/docs/Web/HTML/Block-level_elements
インライン要素は、テキストの流れに沿って配置される要素で、他のテキストやインライン要素と一緒に表示されます。
一方、ブロック要素は、通常（の横書き文書において）、新しい行から始まり、他のブロック要素と縦に積み重なって表示されます（ページのレイアウトや構造を構築するために使用されることが多い）
インライン要素・ブロック要素概念の現代的な適用
インライン要素・ブロック要素概念は、今日のWeb制作においても依然として有用です。
これらの概念がHTML要素（element）のデフォルトの振る舞いや相互作用の基本を理解するための基盤を提供しているためです。ブラウザは依然として、これらの概念に基づいてレンダリングし、デフォルトのスタイリングを適用します。
CSSの display プロパティを使用して表示方法を変更することができますが、デフォルトの状態では、HTML要素（element）は依然としてインライン要素・ブロック要素の振る舞いを示します。
要素のデフォルトの振る舞いを理解し、適切なスタイリングを適用するために、これらの概念を把握することは重要です。
例えば、<a> タグはデフォルトでインライン要素ですが、display: block; スタイルを適用することで、ブロック要素のように表示されます（あくまで表示方法が変わっただけであり、<a> タグ自体の性質はインライン要素のままです）
HTML Living Standard ではHTML要素（element）がいくつかのカテゴリーに分類されています。
これらのカテゴリーは、各要素の構造や機能を分類するために使用され、インライン要素・ブロック要素概念と同様に、各要素の性質を理解するための基盤となります。
現代的なWeb制作においても、インライン要素・ブロック要素の概念を理解することは重要であり、適切なマークアップやスタイリングを適用し、より伝わりやすいWebページにするために役立ちます。
インライン要素内のブロック要素の内包について
HTMLの要素構造において、インライン要素内にブロック要素を内包することは、一般的には推奨されません。インライン要素は基本的にテキストや画像などのインラインコンテンツを扱うために設計されており、ブロック要素はレイアウトやセクション分けなどの目的で使用されるためです。
適切なマークアップを行うことで、ページ構造が明確になり、SEOやアクセシビリティの向上につながります。しかし、特殊なケースや柔軟なレイアウトを実現するために、インライン要素内にブロック要素を内包することもあります。その際には、HTML5の要素カテゴリーやCSSの display プロパティを適切に使用し、HTMLの構造とスタイルを調整することが重要です。
なお HTML Living Standard 内ではつぎのように記述があります。
Most elements that are categorized as phrasing content can only contain elements that are themselves categorized as phrasing content, not any flow content.
ほとんどのフレージング・コンテンツとして分類される要素は、フローコンテンツ全般ではなく、それ自体がフレージング・コンテンツとして分類される要素のみを含むことができます（ChatGPT による翻訳）
<a>要素内のブロック要素の内包について
HTML5では、<a>要素内にブロック要素を内包することが許容されています。しかし、これは適切にマークアップされた状況下でのみ推奨されます。ブロック要素を<a>要素内に入れることで、リンクの範囲が広がり、ユーザーにとってわかりやすいインタラクションが提供できる場合があります。
例えば、以下のように、<a>要素内に<div>要素等を内包することができます。
<a href="example.html">
<div>
<h2>記事タイトル</h2>
<p>記事の概要</p>
</div>
</a>
ただし、注意点として、<a>要素内にはインタラクティブコンテンツを含めることができません。
これは、ユーザーがどのインタラクションを選択すべきか混乱を招く可能性があるためです。
インタラクティブコンテンツのHTML要素の例
<a>,<button>,<input>,<select>,<textarea>
結論として、<a>要素内にブロック要素を内包する場合は、適切なマークアップが行われていることを確認し、ユーザビリティを向上させる目的で使用することが推奨されます。
HTML Standard でインライン要素・ブロック要素表記がなくなった理由
HTML Standard でインライン要素・ブロック要素表記がなくなった理由は、いくつか考えられます。
-
セグメントが変わった: HTML Standard がアップデートされる過程で、インライン要素・ブロック要素というカテゴリーがより細分化され、フローコンテンツやインタラクティブコンテンツなど、新しいカテゴリーが導入されました。
-
HTMLは文書の構造化に注力: HTMLの役割が、文書の構造化により注力していることも理由のひとつでしょう。HTMLは、文書の構造や意味を明確に表現するためのマークアップ言語であり、要素のカテゴリーが細分化され、要素の性質や機能がより正確に表現されるようになりました。
-
CSS側で表示方法を制御: インライン要素・ブロック要素という概念は、要素のデフォルトの表示方法に関連していますが、CSSを用いることで、これらの表示方法を変更することが可能です。このため、HTMLでは文書の構造化に焦点を当てたカテゴリー分類が行われ、CSS側で表示方法に関する制御が行われるようになりました。
このような理由から、HTML Standardではインライン要素・ブロック要素という表記がなくなり、新たな要素カテゴリーが導入されていると考えられます。
インライン要素・ブロック要素についても学習者に伝えていこう
HTML Standard から記述が消えたことで、混乱している学習者も多いと思います。
この記事に書かれた内容を理解している人が、学習者に伝えていくことが重要です。
-
HTML Standardとの関連性を説明する: インライン要素・ブロック要素がHTML Standardからは消えていることを説明し、それでもなお有用な概念である理由を明確にします。
-
具体的な例を提示する: インライン要素とブロック要素の具体的な例を提示し、それぞれの特徴や振る舞いを視覚的に理解できるように説明します。
-
実践的な練習を行う: 実際にHTMLとCSSを使って、インライン要素・ブロック要素の振る舞いを確認する練習を行い、理解を深めます。
-
新しいカテゴリーとの関連性を説明する: インライン要素・ブロック要素概念が、フローコンテンツやインタラクティブコンテンツなどの新しいカテゴリーにどのように関連しているかを説明し、全体の理解を促進します。
-
CSSでの表示方法の制御を紹介する: CSSの
displayプロパティを使って、インライン要素・ブロック要素の表示方法を変更する方法を紹介し、実践的なスキルを身につけさせます。
これらの方法を用いて、学習者にインライン要素・ブロック要素の概念を効果的に伝えることができます。理解が深まれば、より適切なマークアップやスタイリングを適用し、伝わりやすいWebページを作成することが可能となります。
補足： MDNは出典として有用か
この記事では、MDN Web Docsからいくつかの情報を引用しています。MDNは、開発者向けのリソースとして非常に信頼性が高く、広く利用されています。しかし、厳密に言えば、MDNはHTMLやCSSなどの技術に関する仕様が直接書かれているわけではありません。
MDNは、技術仕様を分かりやすく解説し、開発者が実践的に活用できる形で提供しているドキュメントです。そのため、正確で最新の情報が掲載されていることがほとんどですが、最終的な権威ある情報源ではありません。MDNの信頼性の根拠として、Mozilla Foundationが運営していることや、コミュニティによる査読プロセスがあることが挙げられます。これにより、情報の質が維持されています。
技術仕様に関する最も正確な情報は、W3C（World Wide Web Consortium）やWHATWG（Web Hypertext Application Technology Working Group）などの標準化団体の公式文書に記載されています。ただし、これらの文書は専門的であり、初心者には理解しにくい場合があります。
開発者にとって、MDNは総じて信頼性の高い情報源として利用できますが、最終的な判断や疑問がある場合には、技術仕様の公式文書を参照することが重要です。
Q&A
「概念がなくなったわけではない」という意見を Twitter で表明した際、いくつか別の意見をもらっています。
「かつてあったが、今はない」 は 「概念がなくなった」と言っていいはずです
「かつてあったが今はない」ケースは、つぎのような可能性が考えられます。
- その概念は有用ではなくなったので、仕様から文言が削除された
- その概念は有用であるが、仕様の構造が変わったため、文言が削除された
1 の場合についてはそのとおりですが、2 の場合については、概念までなくなったわけではないので、概念がなくなったとはいえないと考えています。
HTML Standard からインライン要素・ブロック要素の明確な記述がなくなったことは事実ですが、それはHTMLの文書構造自体から概念が完全になくなったわけではありません。フローコンテンツやフレージング・コンテンツといった新しい分類が導入されましたが、インライン要素・ブロック要素の概念は、これらの新しい分類にも関連しており、依然としてWeb開発者にとって理解する価値がある概念です。
記述が変化したことで、インライン要素・ブロック要素の扱いが少し異なる形で表現されていると捉えることができます。CSSやレイアウトの観点からもインライン要素・ブロック要素の概念を活用することは、非常に有用であり、開発者にとって重要な知識となっています。
HTMLの文書構造から概念が完全に消えたわけではなく、形を変えて存在し続けていると捉えることができます。
この点は、記事内で触れてさせていただきました。視点を提供していただきありがとうございます。
（なお、この記事を書くために調べた内容も記事内では触れているため Twitter で回答した内容とは同一ではありません）
HTMLについての話題なので、HTMLの仕様の話に絞るべきではないですか
記事内でも伝えましたが、HTMLといった場合に、文書構造のみを表しているのかどうかは、文脈によります。
HTMLについての話題であっても、実際のWeb開発ではHTMLと密接に関連する技術であるCSS（やJavaScript等）も重要な要素です。それらの技術と連携して、より効果的なWebページを制作するためには、HTMLの仕様だけでなく、それらとの関係性も理解することが重要です。
インライン要素・ブロック要素の概念は、HTMLの文書構造を理解するだけでなく、CSSを用いたレイアウトやスタイリングにも大きく関わっています。
一般的に、インライン要素・ブロック要素に関連する話題が出るときは、HTMLの文書構造以外の視点（レイアウト等）も含まれている可能性があります。
HTMLの仕様にとどまらず、より包括的な理解はWeb製作時の助けになると考えています。
"概念がなくなったわけではない" という主張は、そのほうが教える際に都合がよいからですか？
いいえ、そういう意図ではありません。
学習者が理解しやすいように伝えることは大切ですが、正しい理解をもってもらう必要があります。
この記事では、HTMLの仕様の歴史的経緯を伝えることで、学習者が混乱している理由を推察した上で解説を行うことで、正しい理解をもってもらうことを目指しています。
まず HTML Standard においてHTML要素（element）の分類方法が変更されたことのみをもって、"インライン要素・ブロック要素の概念がなくなった" ことにはなりません（ほかの根拠があれば別ですが）
記事内で伝えているように、文書構造の観点からも、レイアウト・スタイリングの観点からも、インライン要素・ブロック要素の概念が依然として存在しています。
HTML要素（element）のデフォルトの振る舞いや相互作用の基本を理解するための基盤を提供しているため
インライン要素・ブロック要素についての理解は重要です。
まずは、このことを理解するとともに、そのうえで、HTML Standard における記述の変化についても理解してもらうことが重要だと考えています。
インライン要素・ブロック要素については MDN 等のドキュメントで学習することができます。伝える際に活用すると、理解を深めてもらいやすいと思います。
学習者に対して HTML Living Standard に沿って伝えるだけで充分ではありませんか？
はい、その意見はもっともだと思います。
この記事の主張も、メインはあくまで "概念までなくなったわけではないこと" です。
しかし、次の理由で、インライン要素・ブロック要素について理解してもらうことにも意味があると思っています。
- HTML要素（element）のデフォルトの振る舞いや相互作用の基本を理解するための基盤となっているため
- MDN 等で学習することができるため
- inline element と block element は一般用語として使われているため
- 学習者にとってのマイナス点がほとんどないため
必要に応じて、伝えていくことで、より深い理解をもってもらえるかもしれません。
まとめと問題意識
この記事では、HTMLにおけるインライン要素・ブロック要素の概念が、現在のWeb制作においてどのような位置づけになっているのかを伝えてきました。
もともと、初学者を中心にして、仕様変更があった事柄において、歴史的経緯がわからないために混乱しているひとを複数見てきました。
このような混乱を避けるためには、正しい理解をもってもらうために、学習者が混乱している理由を推察した上で解説を行う必要があります。
僕自身は、この記事に書いたことを根拠として、「概念まではなくなっていない」という主張であり、学習者に対して、インライン要素・ブロック要素がどのように（文書構造やスタイルにおいて）利用されているのかを伝える必要があると考えています。
Webページにおいて、HTML、CSS、JavaScriptはそれぞれ異なる役割を果たし、連携して動作します。
学習者が HTML の話をしていたとしても、文書構造のみならず、レイアウトやスタイルの話も含まれている可能性があります。
その視点でいえば、インライン要素・ブロック要素の話を「概念がなくなった」と説明するより、Web制作全般の理解こそ、学習者の助けになる可能性があります。
そんなわけで、この記事を書きました。
ひとつでも多くの、（仕様の理解を大切にした）伝わりやすいWebページが作られることを願っています。
事実と異なる内容をみつけたときは
可能な限り正確な記述を心がけていますが、僕自身の知識不足や認識により、事実と異なる内容を記述している可能性があります。
修正し正確な情報を広めたいと思っていますので、ぜひコメント等でお知らせくださいませ。
Discussion
HTML自体の仕様だけではなく、CSSによるレンダリングも含めたウェブページ全体の関心範囲において、ブロックとインラインという概念の理解が有用だというのは異論ありません。
要素やテキストの表示が改行されるのか1行に続けてされるのか、CSSレイアウトには絶対に欠かせない前提知識ですよね。
なのですが、その概念を「ブロック要素」「インライン要素」というキーワードで説明するのは混乱の元だと思います。「ブロック要素（ブロックレベル要素？）」「インライン要素」というのは今ではもう廃止されたHTML4.01の語彙だからです。
廃止されたHTML仕様の語彙は使わず、現代のCSS仕様に照らし合わせた別のキーワードで説明できないでしょうか？ display プロパティによるレンダリングに着目するならば、
block値の仕様でと書かれているように「ブロックレベルのボックス」というキーワードが拾えると思います。
inline値 なら「インラインレベルのボックス」ですね。↑リンクの #Glossary と併せて見て、短くするなら「ブロックレベル」「ブロックボックス」「インラインレベル」「インラインボックス」といったところでしょうか。
CSSの話を含むかもしれないのに、廃止されたHTML仕様の語彙を使って説明すると、初学者が正しい情報を検索できず、ブロックとインラインの概念を理解するまで逆に時間がかかってしまう原因になると思いました。
コメントありがとうございます。概念のあるなしの先の話ができそうで、とても嬉しいです。
より伝わりやすい用語が必要という意見も同意です。
そのうえで、同じ意見のところと違う意見のところとあるので、明確にしながら、いったん立場を表明しておきますね（記事の趣旨は「概念までなくなったわけではない」ですが、ここではその先の論点で進めます）
今回記事を書くにあたり HTML Standard や MDN の記事を確認したところ、僕自身が勘違いしていた点として「（レイアウトやスタイリングのみならず）HTML の文書構造の観点からも inline element や block element の概念はなくなっていないかも」ということです。
根拠はふたつで、MDNに「フローコンテンツ」とともに両要素の記述があり、HTML Standard に「Most elements that are categorized as phrasing content can only contain elements that are themselves categorized as phrasing content」と記載があることからです。
で、僕自身が「概念がなくなることはないだろう」と推察している理由は、また別にあります。
それはこれらの語句が Inline element , Block Element という語句と同義だからです。英語で inline element と表記された場合、element は html element を指し、それが（スタイリングの観点であれば）inline-level に配置されたものを指すというのは、省略された表現として自然なのではないかと想像しています。（僕は英語話者ではないので完全に想像であり、間違っているかもしれません）
語句が自然に使われるのであれば、概念自体がなくなってしまうことはありませんし、（形を変えてでも）生き残っていくのではないかと想像しています。（仮に日本語の文書から消しても、英語圏では使われ続ける表現であり、翻訳されて使われる）
とすると、これは「いやいや"インライン要素"という語句を（HTML 5 以前における意味合いとは別で）使うと、余計に混乱する＝誤解を与えやすい」ということでもあります。
その面は否定できませんし、するつもりもありません。
では（越智さんのおっしゃるとおり）どう言い換えるか、という話になりますね。
この意見はとても納得感はあるものの、一方で、文書構造の意味合いを失ってもよいのだろうかという別の懸念がまったくないわけではありません（スタイリングの観点に絞った場合は問題ないですが、しばしばHTMLの文脈ではそれに限らないことは記事内で述べたとおりです）
以上を総合的に考えた結果として、現時点で、「インライン要素」「ブロック要素」というワードによる説明が、"それほどマイナスに作用するとは思っていない"というのが率直な意見です。
繰り返しますが、このワードでなければいけないわけではないので、よりしっくりくる表現があればそれが一番です。
HTML仕様の content model とCSS仕様の display プロパティの値は関係ないので、いっそ「ブロック要素」を「display block」と言いかえるくらいでもいいかもしれませんね。「インライン要素」も「display inline」で。言いたいことは同じだと思います。
どうしてMDNは、仕様書に block-level , inline-level と書かれているものを block element, inline element と書き換えているのでしょうね。
わかりにくさを生んでいる原因はここなのかなと思いました。
じつは MDN 内で inline-level element と記載している箇所すらあるのですよね…
たしかにわかりにくいです…
「インライン要素・ブロック要素」についての視点、とても興味深いです！標準仕様の変化を踏まえつつも、実務での実用性に触れている点が共感を呼びます。新しい学習者への具体的な指導法は、教育現場でも役立ちそうです。
コメントありがとうございますー。趣旨を理解していただけとても嬉しいです。相手あることですので、いろいろ試行錯誤しつつ、理解深めていってほしいですよね。伝えていく過程でわかったことありましたら、ぜひ共有してくださいませ。