これはかなり大切！ブロック要素とインライン要素

ブロック要素とインライン要素

以前の記事にも少し書かせていただいたのですが、このブロック要素とインライン要素。
この2つの要素ですが、なかなか理解をしてくれないことがあります。

以前、HTML4の時はインライン要素はブロック要素で囲む必要がありました。HTML5へのアップデートにより、囲む必要はなくなりました。

とはいえ、マークアップを長年やっている者としてはインライン要素はブロック要素でしっかり囲むのが大切だと思います（しっかりしたマークアップすると囲む事になる）

では、ブロック要素とインライン要素の性質とは何でしょうか。

ブロック要素

通常ページのレイアウトや構造を作るために使用されます。例えば、<div>や<h1>などは、一般的にページの区切りやセクションの開始や終了を示すために使用されます。また、ブロック要素は自動的に改行され、一つの要素が占める領域を別の要素が上書きすることがありません

• 縦に積み上がる（水平方向には横幅いっぱいになる）

• 一つのブロック要素が終わると改行される

• 幅、高さ、マージン、パディングなどのスタイルを指定できる

代表的なブロック要素には、<header>、<div>、<p>、<h1>～<h6>、<ul>、<ol>、<li>などがあります。

インライン要素

通常、テキストや画像の一部として使用され、ブロック要素の内部に入れることができます。例えば、<a>や<strong>などは、テキストの一部としてスタイルを変更するために使用されます。インライン要素は、ブロック要素の内部に配置され、必要に応じて改行されます。

• 横並びで表示される

• スペースがあっても改行されない

• 幅、高さ、マージン、パディングの指定ができない場合がある（CSSで制御可能）

• テキストやリンク、イメージのようなインライン要素を含めることができる

代表的なインライン要素には、<a>、<strong>、<em>、<span>、<img>、<input>などがあります。

CSSの使用

上記で説明したように、ブロック要素は改行されるという事になります。
ここでブロック要素もインライン要素のように横並びになるようにしたいと思うと思います。そこで使うのがCSSです。この記事はHTMLの在り方を記載しているので、CSSについては書きませんが、HTMLとCSSはかなり深くに関わってきます。

おわりに

HTMLにおいて、ブロック要素とインライン要素はそれぞれ異なる役割を持っています。
ブロック要素は主にページの構造を作り出す上で使用され、一方インライン要素はテキストや画像などの内部要素のスタイルを変更するのに適しています。
正しいマークアップを行うことで、ページのレイアウトやデザインをコントロールすることができます。

初心者には難しいかもしれませんが、要素を正しく使用することで、ページの意図したレイアウトやデザインを達成することができ、SEOにも良い影響を与えることができます。