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

HTML5より前のHTMLでは、<body>要素内で使うほとんどの要素は、ブロックレベル要素インライン要素のどちらかに分類されています。なお、どちらにも分類されていない要素もあります(htmlの全体構造の要素など)。この分類は、主に配置ルールに使用します。

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

見出し・段落・表など、文書を構成する基本となる要素で、一つのかたまり(ブロック)に意味や役割を与える要素が分類される。一般的なブラウザでは要素の前後が改行される。

ブロックレベル要素の一覧

<address><blockquote><div><dl><fieldset><form><h1><h2><h3><h4><h5><h6><hr><noscript><ol><p><pre>、  <table>、  <ul>

インライン要素 ( Inline Elements)

主にブロックレベル要素の内容の一部となる要素で、特定の単語や、文章に意味や役割を与える要素や、画像などが分類される。なお、文章自体もインライン要素に分類される。

ブロックレベル要素の一覧

<a><abbr><b><big><br><cite><code><dfn><em><i><img><input><kbd><label><q><s>(*)<samp><select><small><span><strike><strong><sub><sup><textarea><u>(*)
(*):HTML5より前は非推奨の要素

配置ルール

HTML5より前のHTMLでは、基本的に下記のルールで配置していました。

  • ブロックレベル要素の中には、ブロックレベル要素もインライン要素も配置できる
  • インライン要素の中には、インライン要素は配置できるが、ブロックレベル要素を配置することは出来ない

例えば、段落を表す<p>要素と、強調を表す<em>要素を使う場合で見てみましょう。<p>要素はブロックレベル要素 <で、 <em>要素はインライン要素になります。 従って <p> ~ </p>の中にem要素を入れることはできますが、<em> ~ </em>の中にp要素を入れることはできません。

正:ブロックレベル要素の中にインラインレベル要素を配置
<p>伝説のWEBクリエーターに、<em>おれ</em>はなる</p>
誤:インラインレベル要素の中にブロックレベル要素を配置
<em><p>伝説のWEBクリエーターに、おれはなる</p></em>

このようなルールがHTML5より前の配置ルールになります。ただし、すべての要素が上記のルール通りというわけではありません。例えば、<p>要素はブロックレベル要素に分類されていますが、インライン要素しか配置できないルールになっています。従って、要素を配置する際は、各要素の内容モデルをしっかりと確認しましょう。

関連するリファレンス

ブロックレベル要素とインライン要素はHTML5からはなくなり、新たなカテゴリが登場しました。

関連するレッスン