ブロックレベルとインラインエレメント

　HTML のタグエレメントには、ブロックレベルエレメントとインラインエレメントという性質が与えられています。現在は分類分けとしては出てきませんが、CSS では気にする必要があります。
　特徴としては、ブロックレベルエレメントには前後で改行が含まれます。ブロックレベルエレメントは強制的に１つの段落、ブロックとして表示されます。インラインエレメントには改行がありません。
　ブロックレベルエレメントは <div> や <p> などです。インラインエレメントは <span> や <q> などです。

ブロックレベルエレメントとインラインエレメント

<div>
	<p><q>ブロックレベル<span>エレメント</span></q>と<q>インライン<span>エレメント</span></q>の違いについて書いています。</p>
	<p>この例では<q>ブロックレベル<span>エレメント</span></q>の中には、ブロックレベルエレメントとインラインエレメントを含むことができます。</p>
	<p>インラインエレメントにはインラインエレメントのみを含むことができます。</p>
</div>

表示例

ブロックレベルエレメントとインラインエレメントの違いについて書いています。

この例ではブロックレベルエレメントの中には、ブロックレベルエレメントとインラインエレメントを含むことができます。

インラインエレメントにはインラインエレメントのみを含むことができます。

　ブロックレベルエレメントにはブロックレベルエレメントとインラインエレメントを含むことができます。一方、インラインエレメントにはインラインエレメントのみを含むことができますがブロックレベルエレメントを含むことができません。
　ブロックレベルエレメントには <body> タグエレメント以下を包括することができます。

　ブロックレベルエレメントとインラインエレメントの違いは、CSS や JavaScript を利用した開発で大きな意味を持ちます。この違いが理解出来ている必要があります。

　<head>、 <base> のようにページ情報に関するといった表示されないタグエレメントにはブロックレベル、インラインエレメントといった性質を必要としてません。必ずしもエレメントが持つ性質ではないということです。

- ad -

HTML5 からの変更

　HTML5 からブロックレベルとインラインは、より複雑なコンテンツカテゴリに置き換えられました。
　ブロックレベルエレメントとインラインエレメントは、コンテンツカテゴリ以下のレイアウトを形成するフローコンテンツのエレメントの性質として残っています。他にも対話型コンテンツのエレメントの性質としても残っています。

ブロックレベルエレメントとインラインエレメントの違い

ブロックレベルエレメント

　ブロックレベルエレメントは、複数のコンテンツを包括する役割があるエレメントです。改行のあるエレメントで、<div> や <p> などです。

ブロックレベルエレメントとインラインエレメント

<div>
ブロックレベルエレメントには改行があり、複数のエレメントを包括することができます。
</div>

表示例

ブロックレベルエレメントには改行があり、複数のエレメントを包括することができます。

　ただし、それぞれのタグエレメントは他の性質を複雑にもっているので、これがブロックレベルエレメントとは言い難い面があります。

インラインエレメント

　インラインエレメントは、改行がありません。そのため、横に並びます。文章中の一部だけの色や装飾にスタイルシートを設定したい場合に便利です。
　<a>、<abbr> など何がしらの意味を示すタグエレメントがインラインエレメントになっています。

ブロックレベルエレメントとインラインエレメント

<div>
<span><mark>インラインエレメント</mark></span>には改行がなく、<span>複数のエレメントを包括できますがブロックレベルエレメントは包括できません</span>。
</div>

表示例

インラインエレメントには改行がなく、複数のエレメントを包括できますがブロックレベルエレメントは包括できません。

　インラインエレメントの中にブロックレベルエレメントを含むことができません。HTMLにおいて含むように編集ができるのですがレイアウトが崩れます。

ブロックレベルエレメントとインラインエレメントの変更

　ブロックレベルエレメントとインラインエレメントといったエレメントの性質は CSS の display プロパティで変更することができます。
　block、inline、 inline-block 値でその性質を変更することができます。

ブロックレベルエレメントとインラインエレメント

<div>
<span><mark>インラインエレメント</mark></span>には改行がなく、<span>複数のエレメントを包括できますがブロックレベルエレメントは包括できません</span>。
</div>

<style>
span {
	display: block;
}
</style>

上記例

インラインエレメントには改行がなく、複数のエレメントを包括できますがブロックレベルエレメントは包括できません。

　上記は <span> をインラインエレメントからブロックレベルエレメントに変更した例です。見事にレイアウトが崩れます。しかし、CSS や JavaScript を使うようになると変更したい場面が出てきます。

　詳しくは、display の display:block;、display:inline;、 display:inline-block;を参照してください。

- ad -