HTMLタグの分類。ブロック要素とインライン要素

要素の分類方法

HTML4,XHTMLの要素の多くは、「ブロック要素」、「インライン要素」の2つに分類できます。今回は、ブロック要素とインライン要素とは何か、意味的に、視覚的にチェックしてみたいと思います。

※HTMLのバージョンによって、分類も変わってくる場合があります。自分がどのバージョンのHTMLを利用しているのか、このタグは、そのときどのように分類されているのかをHTMLの仕様を確認しつつ、コーディングしていきましょう。特に、HTML5では、このブロック要素、インライン要素の分類が撤廃されました。しかしながら、ブロック要素、インライン要素を理解することで、取っ掛かりをつかむことができ、大いに役立ちます。

基本的なこと

ブロック要素

ブロック要素は、文書の骨組みとなる要素のことを言います。たとえば、見出しや段落などがこれに当たります。

インライン要素

文章中の一部として扱われる要素です。たとえば、リンクや文字の強調などです。画像や入力欄もインライン要素に当たります。

違いを「見て」感じる

以下に、ブロック要素は赤・紫背景で、インラインレベル要素はオレンジ背景で表示させてみました。

わかること

実際に、書いてみると、このような違いがあることがわかります。

• ブロック要素は、表示域の左右いっぱいまでの範囲を占め、前後に改行を置いて表示される
• インライン要素は行内の一部として扱われ、要素の前後には、改行は入らない
• インライン要素は、インライン要素・ブロック要素のどちらの要素内にも入れることができます。
• ブロック要素には、ブロック要素を含めることができる要素とできない要素がある。たとえば、divタグには、ブロック要素を入れても問題ありませんが、h3タグやpタグ内には、ブロック要素を入れることはできません

※上の例では、インライン要素の間に隙間ができてしまっています。これは、HTMLでソースを書くときに、改行を入れていることが原因です。ソース上では、改行でも、brタグを使っての改行ではないため、見た目には、スペースが少し入ってしまっているように見えます。これを避けるには、改行を入れずに続けて書くようにしましょう。スペースをあけずに、くっついたまま表示してくれます。

※インライン要素は、文章中の一部として扱われる要素のため、一部の要素を除いて、高さの概念がありません。そのため、CSSを用いてmarginやpaddingを上下に取っても、上下にある隣接したコンテンツには影響しません。しかし、代わりに、一行の高さを指定することができます（line-height）。（2014/10/23 追加レポート記事UPしました）

具体的な分類

では、実際、どの要素がブロック要素で、どの要素が、インライン要素なのでしょうか。よく利用する要素を分類してみました。

ブロック要素

blockquote, form, div, center, h1-h6, p, pre, dir, dl, menu, ol, table, ul, ol, hr

インライン要素

br, cite, code, del, em, font, img, input, label, q, span, strong, textarea

※要素は、これだけではありません。また、要素によっては、特殊なものもあります。たとえば、インライン要素は、基本的に高さの概念はありませんが、inputやimgなどの特殊な要素（置換要素）には、高さの概念があります。

まとめ

• HTML4,XHTMLの要素は、「ブロック要素」「インライン要素」2種類に分類できる。
• ブロック要素は、文書の骨組みとなる要素
• インライン要素は、文章中の一部として扱われる要素
• ブロック要素とインライン要素には、意味的な違いのほか、見た目的な違いがある。