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

HTMLのbodyタグの中で使用されるタグは、ブロックレベル要素とインラインレベル要素の２つに部類されます。この章では、このブロックレベル要素とインラインレベル要素の違いと、そのタグについて解説していきます。

ブロックレベル要素とは

ブロックレベル要素とは、見出しや段落など、文章を一つの塊とみなす要素のことです。ブロックレベル要素をもちいると、特別な記述をしない限り文章が改行されます。ブロックレベル要素に分類されるタグを見ていきましょう

ブロックレベル要素に含まれるタグ

<address>　<article>　<aside>　<blockquote>　<details>　<dialog>　<dd><div>　<dl>　<dt>　<fieldset>　<figcaption>　<figure>　<footer>　<form>　<h1>~<h6>　<header>　<hgroup>　<hr>　<li>　<main>　<nav>　<ol>　<p>　<pre>　<section>　<table>　<ul>

ブロックレベル要素を使用した例

以下のソースコードを記述してみます。文章を表すpタグと凡庸タグのdivを使用しています。

<p>これはブロックレベル要素です</P>
<div>ブロックレベル要素を使用すると改行されます</div>

これをブラウザで表示すると、以下のように表示されます。※範囲がわかりやすいよう背景に白を引いています。

インラインレベル要素とは

ブロック要素内で使用されることが多く、文章の一部として扱われます。ブロック要素とは違い、特別なことをしない限りインラインレベル要素を用いても改行はされず、文章の一部として表示されます。

インラインレベル要素に含まれるタグ

<a> <abbr> <acronym> <audio> <b> <bdi> <bdo> <big> <br> <button> <canvas> <cite> <code> <data> <datalist> <del> <dfn> <em> <embed> <i> <iframe> <img> <input> <ins> <kbd> <label> <map> <mark> <meter> <noscript> <object> <output> <picture> <progress> <q> <ruby> <s> <samp> <script> <select> <slot> <small> <span> <strong> <sub> <sup> <svg> <template> <textarea> <time> <u> <tt> <var> <video> <wbr>

インラインレベル要素を使用した例

以下のソースコードを記述してみます。リンクを表すaタグと凡庸タグのspanを使用しています。

<a href="#">インラインレベル要素です。</a>
<span>インラインレベル要素なので改行されません。</span>

これをブラウザで表示すると、以下のように表示されます。

ブロックかインラインか見極める

ブロックレベル要素とインラインレベル要素で悩んでくるのはCSSと一緒に使用したときです。どちらのレベルかによってCSSの記述が変わってくるのでよく使用するタグはブロックレベル要素なのかインラインレベル要素なのかをしっかりと覚えておきましょう。