基礎12. div要素-グループさせる

2016/03/27 2017/07/11 hatano

この章について

下記のbase-html01.zipをダウンロードして実際に記述してみましょう。
base-html01

初期値はブロックレベル要素です。div要素は分割・区切り（division）という役割があります。主に複数の要素をまとめてグループにしたり、ブロック分けに使用する要素です。意味付けはなくbodyタグ内に使用できるタグは、すべて入れ子にできるのが特徴です。


<h1>見出し1</h1>
<div>
	<h2>見出し2</h2>
	<p>段落テキスト</p>
</div>
<div>
	<h2>見出し2</h2>
	<p>段落テキスト</p>
	<div>
		<h3>見出し3</h3>
		<p>段落テキスト</p>
	</div>
</div>

<div>

<p>段落テキスト</p>

</div>

<div>

<p>段落テキスト</p>

<div>

<p>段落テキスト</p>

</div>

divタグはページのレイアウト構成で必ず使用します。数が増えやすく構造が分かりづらくなるので、インデント処理やコメントを使い、分かりやすい記述になるようにしましょう。

注意点として意味付けが行われないので、テキストやリンクなどは直接囲まず、pタグなど意味付けを行うタグを入れ子にして記述するようにしましょう。

あまり良くない例


<div>
	<a href="company.html">会社概要</a>
</div>

<div>

</div>

適切な例


<div>
	<p><a href="company.html">会社概要</a></p>
</div>

<div>

</div>