ホームページ制作において覚えておくタグのブロック要素とインライン要素を今回ご紹介します。

ホームページを制作する上で用いられるのがブロックレベル要素（Block-Level Elements）、インライン要素（Inline Elements）です。

要素をWebデベロッパーツールなどで確認してみると違いが分かりやすいかと思うのでぜひチェックしてみてください。

制作する上でルールがあり、ブロック要素の中には、他のブロック要素やインライン要素を配置することができますが、インライン要素の中に他のインライン要素を配置することができますが、インライン要素の中にブロック要素を配置することはできません。

ブロックレベル要素（Block-Level Elements）

例えば以下のようなHTMLがブロック要素です。

<div>

<h1>ここに見出しが入ります</h1>

</div>

DIVと言うブロック要素の中に見出しタグのH1タグのブロック要素が入っているソースコードになります。

他にもブロック要素には以下のようなタグがあります。

• <address>
• <blockquote>
• <center>
• <div>
• <dl>
• <fieldset>
• <form>
• <h1> 〜 <h6>
• <hr>
• <noframes>
• <noscript>
• <ol>
• <p>
• <pre>
• <table>
• <ul>

ブロック要素は見出し・段落・表など、文書を構成する基本となる要素で、一つのブロック（かたまり）として認識されます。

インライン要素（Inline Elements）

次にインライン要素のサンプルをご紹介します。

<div>

<h1>ここに見出しが入り<span>インライン要素も</span>入れることが可能です</h1>

<p>
インライン要素は<span>行の一部</span>として扱われます。
</p>

</div>

全体的には先程のブロック要素のサンプルと同じではありますが、H1タグの中にSPANタグが入っています。このようにブロック要素の一部としてインライン要素を当て込むことが出来ます。ただしSPANタグの中にH1タグを入れることは出来ません。

インライン要素にはいかのタグがあります。

• <a>
• <abbr>
• <acronym>
• <b>
• <basefont>
• <bdo>
• <big>
• <br>
• <cite>
• <code>
• <dfn>
• <em>
• <font>
• <i>
• <img>
• <input>
• <kbd>
• <label>
• <q>
• <s>
• <samp>
• <select>
• <small>
• <span>
• <strike>
• <strong>
• <sub>
• <sup>
• <textarea>
• <tt>
• <u>
• <var>

ブロック要素とインライン要素の違いがなんとなくわかりましたでしょうか？

先程のH1タグにSPANタグを入れる場合、そのSPANタグのみ違う色に装飾したりと表現の幅を広げることが出来ます。

ホームページを作っているうちにこのようなブロック要素、インライン要素を組み合わせて様々な表現ができるようになるかと思うのでぜひ要素の違いを理解できるように繰り返しコードを書いていってみてはいかがでしょうか。