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

ブロックレベル要素は、(X)HTMLを構成するメイン要素で、前後の要素とは別の行に分かれて表示され、インライン要素は内容の詳細を指定する要素

(X)HTMLの要素は、ブロックレベル要素インライン要素、大きく2つに分けられる。ブロックレベル要素で(X)HTMLドキュメントの大枠が構成され、ブロックレベル要素内の内容を詳細に指定するのにインライン要素が利用されます。

おもなブロックレベル要素には、見出し(h1〜h6)、文章(p)、リスト(ul、ol、li)、表(table)などがある。ブロックレベル要素の幅はこの要素を直接囲んでいる要素、つまり親要素の幅いっぱいに広がるが、CSSを利用して幅や高さ、上下左右の余白やマージンを指定できる。

おもなインライン要素には、リンク(a)、画像(img)、強調(em、strong)などがある。インライン要素はブロックレベル要素の中で指定し、親要素と同じ行内に含まれる。要素の幅は、基本的にタグで囲まれた範囲となり、画像(img)以外のインライン要素では幅や高さが指定できません。

ワンポイント

なお、HTML5ではブロックレベル要素とインライン要素という分類を廃止し、7種類のコンテンツモデルに変わります。

カテゴリー: HTML5, HTMLの基礎知識, ナレッジノート, 要素   パーマリンク