そもそもブロックレベル要素とインライン要素ってなんだったんだ? ~コンテンツ・モデルに繋がる道~

  • 28
    Like
  • 2
    Comment

2017/5/19 画像を微修正しました。コメントありがとうございます!

HTML要素は大きく2種類に分けられていた

HTMLの要素は、大きくブロックレベル要素インライン要素の2種類に分けられていました。
文書構造を記録するための言語なので、こういった分類があったのですね。
ブロックレベル要素とインライン要素は入れ子にする必要があります。

逆に、ブロックレベル要素をインライン要素で囲むことはできません。
ブロックレベルは文書を囲うまとまりそのものインラインは中に書かれる文章の一部だからです。

例構文
<h1>フエキ糊</h1>
  <p>
  環境にやさしい天然でんぷん使用。<br>
  すぐれた塗布性、長期にわたり安定した品質。<br>
  <a href="sample.html">※補充製品あり</a>
  </p>

インライン要素とブロックレベル要素.png

ブロックレベル要素 (Block-Level Elements)

見出し、段落、表など、文書を構成するひとつのブロック(文のかたまり・まとまり)のことです。
<div>、<h1>、<p>、<table>などが挙げられます。

デフォルトでは前後に改行が入ります。
body要素のどこでも配置することが可能でした。

インライン要素 (Inline Elements)

インラインとは行内という意味を表す、文章内の一部を表す要素です。
<a>、<img>、<strong>などが挙げられます。

デフォルトでは改行が入らず、文章の一部として表示されます。
ブロックレベル要素内に記述する必要がありました。
入れ子要素の関係が必須だったわけです。

HTML5で関係なくなったブロックレベルとインライン

しかしHTML5では、そもそもブロックレベル要素、インライン要素の分類が無くなりました。
代わりに、7種類のカテゴリーに細分化されたのです。

HTML5で7種類に細分化された

しかし、インラインとブロックレベル要素の分類が完全に不要化されたわけではなく、現在もCSSの一部で使用されています。
例えばdisplay:block;とかありますね。

HTMLでは、今までブロックレベル要素・インライン要素の入れ子関係があったように、内容として入れられるコンテンツが要素ごとに決められています。
7種類に細分化された、この関係性の定義をコンテンツ・モデルと呼びます。

カテゴリーは、その要素がどこのカテゴリーに属しているか示したものです。
コンテンツ・モデルは、その要素がどのカテゴリーの要素を含むことができるかの関係性を表したものです。

コンテンツ・モデル Kind of content

W3C HTML5.1 勧告 3.2.4 Content models

  1. 文書情報コンテンツ Metadata content
  2. 一般コンテンツ Flow content
  3. セクションコンテンツ Sectioning content
  4. 見出しコンテンツ Heading content
  5. 文章内コンテンツ Phrasing content
  6. 組み込みコンテンツ Embedded content
  7. 対話型コンテンツ Interactive content

大よそではありますが、以下のように変更されました。
ブロックレベル要素セクションコンテンツ、見出しコンテンツ
インライン要素文章内コンテンツ

コンテンツ・モデルを図に起こす

図に起こしてみましたが、これも日々変わり続けているものなので参考程度に。
コンテンツモデル102.png

ブロックレベルとインラインが無くなったことの恩恵

div要素や複数のタグをまとめてリンク設定できる

divで囲まれた、ブロックそのものをリンクに出来るようになりました。
こういうことが可能になるのですね

例構文
<h1>不易糊工業株式会社</h1>
<a href="sample.html">
  <div>
    <h2>フエキ糊</h2>
    <p>
    環境にやさしい天然でんぷん使用。<br>
    すぐれた塗布性、長期にわたり安定した品質。<br>
    </p>
  </div>
</a>

参考記事

W3C HTML5.1 勧告 3.2.4 Content models
Mozzila - ブロックレベル要素
HTML5コンテンツモデルガイド