主なブロックレベル要素（div、p、pre）の仕様と使い方

カテゴリ：HTML編

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

ブロックレベル要素は終了タグの後が自動で改行される要素です。
逆に終了タグの後が自動で改行されない要素をインライン要素と呼びます。
HTML5の登場で、ブロックレベル要素、インライン要素の分類はあまり重要ではなくなりました。
しかし要素を指定する際、ブロックレベルかインラインかは把握しておく必要がるため、あえてブロックレベル、インライン別に主要な要素を解説します。

div要素

div要素は特別な意味を持たないブロックレベル要素です。
一般的にはcssの適用範囲を囲んだりなど、コンテンツの区切りとして使用し、通常は、div以外に適切な要素がない場合にのみ使用します。
特にHTML5ではheaderやfooter、aside、main、section、articleのようにコンテンツの意味を表す要素が追加されているため、これらの意味のある要素を優先します。

<div>このようにdiv要素はページの表示には影響せず、単にコンテンツの区切りに使用します。</div>

W3Cによるdiv要素の説明

div要素には特別な意味は全くありません。それはその子供たちを表しています。 class、lang、およびtitle属性とともに使用して、連続した要素のグループに共通のセマンティクスをマークアップすることができます。

p要素

p要素はparagraph（パラグラフ）を表し、上下に空白行ができるため、主に文章の段落に使用されます。

<p>p要素で1つの段落を囲み、段落分けします。</p>
<p>HTML5では閉じタグを省略できるため段落を入れたい箇所にp要素の開始タグを指定するだけでも可能です。</p>

しかし、単に段落を表現するためにp要素で文章を囲むのは合理的な表現ではないことに気づきます。br要素のように単独で使用できるべきです。
このためHTML5はp要素の閉じタグを省略できます。
閉じタグを省略した場合は以下のようになります。
この方がずっとスマートです。

<p>p要素で1つの段落を囲み、段落分けします。
<p>HTML5では閉じタグを省略できるため段落を入れたい箇所にp要素の開始タグを指定するだけでも可能です。

W3Cによるp要素の説明

p要素は段落を表します。

pre要素

pre要素は文章中の改行や空白をそのまま表示する要素です。
なお、開始タグ直後の改行は無視されます。
例えば、ユーザーが入力した文章をそのまま表示したり、詩やASCIIアートなどに使用できます。
※HTMLエスケープはされないため、エスケープの処理は必要です。

<pre>
　このように、
　段落や空白は
　そのまま表示されます。
</pre>

　このように、
　段落や空白は
　そのまま表示されます。

W3Cによるpre要素の説明

pre要素は、書式設定されたテキストのブロックを表し、その構造は要素ではなく表記規則によって表されます。

公開日時：2017年12月31日 12:38:06
最終更新日時：2022年03月12日 07:18:37