ブロックレベル要素

現在のページは約2分で読めます。


ブロックレベル要素とは

ブロックレベル要素とは文書を構成する要素を指します。見出し(h1タグ)や段落タグ(pタグ)などが該当します。1つのブロック(まとまり)として認識されてます。

見出しや段落などの前後には改行(空白)ができます。スペースを無くすにはCSSで調整します。

HTML5ではブロック要素は廃止されています。

ブロックレベル要素の注意点

body要素内にブロックレベル要素を記述した上でその中にテキスト(文書)を入力しています。body要素内に直接テキストやインライン要素を記述するのは文法上誤りです。

基本的にpタグやh2タグ以下等のブロックレベル要素はそのページ内で使用制限数はありません。いくつでも使ってOKです。

しかし、h1タグは大見出しなのでそのページ内で1つが適切ですし、strongタグなどの強調タグもそのページ内で同じキーワードに何度も使うのは適切ではありません。

また、見出しに対してstrongタグやemタグでさらに強調するといった書き方も誤りですので気を付けましょう。なぜ誤りなのかと言いますと、見出し自体が既に強調の意味を示しておりますので、そこでさらに強調してしまうのは不適切ということになります。

他に、インライン要素でブロックレベル要素を囲んだりするのも文法上誤りなので注意。

<em><h1>インライン要素でブロックレベル要素を囲むのはNG</h1></em>

ブロックレベル要素の使い方

  • h1タグ

そのページ内の大見出しです。そのページ内で一番強調したいキーワードを含んだ文章で書きます。

  • h2タグ~

その文に対して個々の見出しです。例えば、大見出しが野球についてだったら、「野球の歴史(見出し)」⇒段落(長文)、「野球の人口(見出し)」⇒段落という文書構造になっていきます。

  • pタグ

段落タグです。基本的に短文や長文は全てpタグで囲んでいけば問題ないです。

  • ulやdlなどのリストタグ

箇条書きで示したい場合に使います。なので、長文などの文章を書くのにリストタグを使用するのは間違いではないですが、適切な使い方とも言えません。

  • テーブルタグ

表で紹介したいときに使います。

  • divタグ

特定の範囲をグループ化します。これを使えば3カラムレイアウトなども可能になるので非常に便利です。ブロックレベル要素では恐らく最も多く使用されているかと思われます。

まとめ

ブロックレベル要素と言われても始めはややこしいとは思いますが、それぞれの意味を理解していれば正しい文法で記述できるようになります。

情報提供、雑談等