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

HTMLの<body>内には主に二つの要素を使って組み立てていきます。

その要素は ブロックレベル要素インライン要素 です。

一つずつ説明していきます。

ブロックレベル要素とは

ブロックレベル要素は、見出し・段落・表など、文書を構成する基本となる要素で、一つのブロック(かたまり)として認識されます。 ブラウザでの表示も一つのかたまりとして扱われることが多く、一般的なブラウザでは前後に改行が入ります。

http://www.htmq.com/htmlkihon/005.shtml

ブロックレベル要素のタグ
<div>、<h1> 〜 <h6>、<p>、<ul>、<li>、<dl>、<dt>、<dd>、<table>、<pre>、<blockquote>、<hr> など

ブロックレベル要素の特徴

インライン要素とは

インライン要素は、主にブロックレベル要素の内容として用いられる要素で、文章の一部として扱われます。 例えば、<p>要素の中の<strong>要素のように、段落のなかの一部を強調するような使われ方をする要素です。 一般的なブラウザでは前後に改行が入らず、文章の一部として表示されます。

http://www.htmq.com/htmlkihon/005.shtml

インライン要素のタグ
<a>、<span>、<strong>、<br> など

インライン要素の特徴

配置ルール

それぞれには特徴があり、配置のルールがあります。

ブロック要素の中にはブロックレベル要素もインライン要素も入れることができます。

インライン要素は文字データやインライン要素は入れられるが、ブロックレベル要素は入れられません。


CSSで要素を変えることができる

CSSのプロパティの display を使うとブロックレベル要素をインライン要素にできます。

逆にインライン要素をブロックレベル要素のにすることができます。