すべてのHTML要素は、それがある要素の種類に応じて、デフォルトの表示値を持っています。 ほとんどの要素のデフォルトの表示値は、ブロックまたはインラインです。
ブロックレベル要素
ブロックレベル要素は常に新しい行で開始し、利用可能な全幅を占め(stretches out to the left and right as far as it can) 。
<div>要素は、ブロックレベル要素です。
ブロックレベル要素の例：
- <div>
- <h1> - <h6>
- <p>
- <form>
インライン要素
インライン要素は新しい行で開始し、のみ必要なだけの幅を占めていません。
これは、インラインで<span>段落内の要素 。
インライン要素の例：
- <span>
- <a>
- <img>
<div>要素
<div>要素は、しばしば、他のHTML要素のコンテナとして使用されるブロックレベル要素です。
<div>要素には、必要な属性を持っていませんが、 styleとclass一般的です。
CSSと一緒に使用する場合、 <div>要素には、コンテンツのスタイルブロックに使用することができます。
例
<div style="background-color:black; color:white; padding:20px;">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div> »それを自分で試してみてください <span>要素
<span>要素は、多くの場合、いくつかのテキストのコンテナとして使用されるインライン要素です。
<span>要素には、必要な属性を持っていませんが、 styleとclass一般的です。
CSSと一緒に使用する場合、 <span>要素は、テキストのスタイルの一部に使用することができます。
HTMLタグのグループ化
| タグ | 説明 |
|---|---|
| <div> | 文書内のセクションを定義する(block-level) |
| <span> | 文書内のセクションを定義します(inline) |