HTML5ではインラインボックスがない？

質問

表題の件について、質問させて頂きます。

この前、Webサイト等で、HTML5を勉強していたら

「HTML5からはインラインボックスやブロックボックスという概念がない」

という記事を見つけました。

「なにー！」と思って調べてみたら、

現在は、コンテンツモデルというものが出来上がっており、

そちらに置き換わったのだという解釈をしました。

いろんなサイトでコンテンツモデルの意味や、カテゴリなどは

紹介されているので、何を意味するものかは理解したつもりですが、

ここで疑問が残りました。

その疑問は、

「結局、HTML4でいうところのインラインボックスやブロックボックスは
　どのカテゴリになったの？」

ということです。

例として、

div要素は、HTML4の時はブロックボックスで、
HTML5ではフローコンテンツに該当しているから、
フローコンテンツを今までのブロックボックスと
同じように扱っていいのかな？

と考えていたのですが

input要素は、HTML4の時はインラインブロックボックスで、
HTML5では、フローコンテンツであり、フレージングコンテンツであり、
インタラクティブコンテンツである・・・・・・と、

もうさっきの考えは崩れ去りました。

お手上げだったので、ここに質問させて頂いています。

私が何に困っているのかといいますと、

HTML4の知識になりますが、

「ブロックボックスではwidthやheightを指定できるけど、
　インラインボックスではできない。」

等の概念を、どうやって初心者の方に教えたら良いかを困っています。

ちなみに、個人的な見解ですが、CSSのdisplay属性に

inlineとかblockがそのまま残っていることに違和感があります。

これも初心者の方に教える時に、

「ブロックボックスやインラインボックスはHTML4までの概念です」

と説明しておきながら、矛盾が生じるような気がしてなりません。

回答No.1

ORUKA1951 · ベストアンサー

大きな誤解をされています。
「結局、HTML4でいうところのインラインボックスやブロックボックスは、どのカテゴリになったの？」

HTML4.01では、ブロック要素とインライン要素しかありませんでした。
『7.5.3 ブロックレベル要素と行内要素 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.3 )』

　「ブロックボックスやインラインボックス」は、スタイルシートの視覚メディアに対する整形と言うHTMLとは別の用語です。これは、HTML5の仕様に含められることもあるCSS3ではそのまま引き継がれています。その意味ではなくなってはいません。

　もっと端的にわかり易く言うと、HTML4までは、文書構造を示す要素の分類は特にされていませんでしたが、HTML5では、プレゼンテーションと文書構造の分離をより徹底するために、HTML上の要素は、文書構造上の意味から分類されています。

整理してみました。
メタデータ・コンテンツ (Metadata content)
　base,command,link,meta,noscript,script,style,title
フロー・コンテンツ (Flow content)
　a,abbr,address,area (map 要素の子孫のとき),article,aside,audio,
　b,bdi,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,s,samp,script,section,select,small,
　span,strong,style (scoped 属性があるとき),sub,sup,svg,
　table,textarea,time,u,ul,var,video,wbr,およびテキスト
セクショニング・コンテンツ (Sectioning content)
　article,aside,nav,section
ヘッディング・コンテンツ (Heading content)
　h1,h2,h3,h4,h5,h6,hgroup
フレージング・コンテンツ (Phrasing content)
　abbr,audio,b,bdi,bdo,br,button,canvas,cite,code,command,datalist,
　dfn,em,embed,i,iframe,img,input,kbd,keygen,label,mark,math,meter,
　noscript,object,output,progress,q,ruby,s,samp,script,select,small,
　span,strong,sub,sup,svg,textarea,time,u,var,video,wbr,およびテキスト
　そして、内容にフレージングコンテンツのみが入っているときの
　a,del,ins,map
　(map要素の子孫のとき)のarea
エンベッディッド・コンテンツ (Embedded content)
　audio,canvas,embed,iframe,img,math,object,svg,video
　および、MathMLやSVG
インタラクティブ・コンテンツ (Interactive content)
　a,button,details,embed,iframe,,keygen,label,select,textarea,
　controls 属性が存在しているaudio,video,
　usemap 属性が存在しているimg,object
　type 属性が Hidden 状態でないinput
　type 属性が toolbarのmenu
・・・一目でわかるように、これらはもっぱら「文書構造」で分類したものです。
★どのカテゴリーにも分類されないもの
　dd,dt,liなど・・

　あなたが言われる「ブロックボックスやインラインボックスはHTML4までの概念です」は、より細かく分類され、ブロック要素はセクショニングコンテンツと、ヘッディングコンテンツに分類され、インライン要素はフレージングコンテンツとエンベッディッドコンテンツ、インタラクティブコンテンツに再分類されたと考えるべきでしょう。
　その場合、それらの登場形態によって、その分類に含まれなかったり他の分類がされる場合があること。そしてこれらすべてをひとまとめにしてフロー・コンテンツ--流し込めるデータ--とする。

　と考えれば良いです。

・・・・・・・・以上はHTMLのマークアップの問題です。
「個人的な見解ですが、CSSのdisplay属性にinlineとかblockがそのまま残っていることに違和感があります。」
　これはスタイルシート側の問題です。文書構造を担うHTMLとプレゼンテーションを担うスタイルシート--特に視覚メディアに対する整形モデル--を混同して考えるから、違和感を感じるのでしょう。スタイルシートでは、displayプロパティによって、整形上の他の整形モデルに変更できます。
　なお、CSS3のdsplayの値は、
inline | block | inline-block | list-item | run-in | compact | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | ruby | ruby-base | ruby-text | ruby-base-group | ruby-text-group | <template>| none

お礼

長文での回答ありがとうございます

なるほど、確かにＨＴＭＬとＣＳＳを混同して考えていました。

私が参考にしたサイトは下記のサイトなのですが
http://www.htmq.com/html5/007.shtml

このサイトの最初の部分を読んで、
「なくなってしまったのか」と思っていました

ブロックボックスとブロック要素を同じものとして認識して
いたことがそもそも間違っていたのですね