HTML 入門
文書の構造を作ろう
div と span を使う（ブロックボックスとインラインボックス）
<div> は <body> の中に入れることができるフローコンテンツの汎用コンテナです．一方で <span> は記述コンテンツの汎用的なインラインコンテナです．コンテンツカテゴリの詳細はこちらを参照してください．
たとえば2個の <div> を配置してみます．次の通り，2個の要素が縦に配置されました．
index.html（抜粋）
<div>
div 要素です
</div>
<div>
div 要素です
</div>
ブラウザでの表示結果
次は2個の <span> 要素を配置しました．この場合は親の要素幅の範囲内で横方向に配置されます．
index.html（抜粋）
<span>
span 要素の中に少し長めの文字列を配置しました．
</span>
<span>
span 要素の中に少し長めの文字列を配置しました．
</span>
ブラウザでの表示結果
<div> と <span> の違いをより理解するためにそれぞれの要素に 1px 幅の実線 (solid) でライトグレー (lightgray) の枠線（ボーダ）を設定しました．とくに幅や高さなどのスタイルを設定しなければ <div> 要素は下方向に配置され，親要素の幅と同じ幅になることを理解してください．
index.html（抜粋）
<div style="border:1px solid lightgray;">
div 要素です
</div>
<span style="border:1px solid lightgray;">
span 要素の中に少し長めの文字列を配置しました．
</span>
<span style="border:1px solid lightgray;">
span 要素の中に少し長めの文字列を配置しました．
</span>
<div style="border:1px solid lightgray;">
div 要素です
</div>
ブラウザでの表示結果
<div> のように横幅いっぱいを使って次の要素を下に配置するような要素を一般に ブロックボックス と呼びます．ブロックボックスには <div> だけでなく，<h1>，<p>，<header>，<main>，<footer> などがあります．
一方で，<span> のようにその中に含まれるコンテンツの幅だけ領域を確保し，次の要素を右側に続けて配置するような要素を一般に インラインボックス と呼びます．インラインボックスには <span> 以外にも，<a>，<img> などがあります．
ここで，より実践的な例を考えよう．「Aさん」と「私」がチャットを使ってメッセージのやり取りをしている画面を作成します．まずは <p> タグでメッセージや送信日時の情報を囲います．
index.html（抜粋）
<p>
Aさん：Aさんから私に送信されたメッセージです．Aさんから送信されたメッセージです．Aさんから送信されたメッセージです．Aさんから送信されたメッセージです．Aさんから送信されたメッセージです．
</p>
<p>
送信：5分前
</p>
<p>
私：私がAさんに返信したメッセージです．私がAさんに返信したメッセージです．私がAさんに返信したメッセージです．私がAさんに返信したメッセージです．私がAさんに返信したメッセージです．
</p>
<p>
送信：1分前
</p>
ブラウザでの表示結果
Aさん：Aさんから私に送信されたメッセージです．Aさんから送信されたメッセージです．Aさんから送信されたメッセージです．Aさんから送信されたメッセージです．Aさんから送信されたメッセージです．
送信：5分前
私：私がAさんに返信したメッセージです．私がAさんに返信したメッセージです．私がAさんに返信したメッセージです．私がAさんに返信したメッセージです．私がAさんに返信したメッセージです．
送信：1分前
段落中のある範囲だけ色や文字のスタイルを変更したいような場合に <span> タグを使います．たとえば送信者名を太字で僅かに大きくしたうえで青または赤に変更し，送信日時は太字に変更します．次の通り <span> タグで囲った範囲だけにスタイルが適用されていることが確認できます．
index.html（抜粋）
<p>
<span style="color: blue; font-weight: bold; font-size:120%;">Aさん：</span>Aさんから私に送信されたメッセージです．Aさんから送信されたメッセージです．Aさんから送信されたメッセージです．Aさんから送信されたメッセージです．Aさんから送信されたメッセージです．
</p>
<p>
送信：<span style="font-weight: bold;">5分前</span>
</p>
<p>
<span style="color: red; font-weight: bold; font-size:120%;">私：</span>私がAさんに返信したメッセージです．私がAさんに返信したメッセージです．私がAさんに返信したメッセージです．私がAさんに返信したメッセージです．私がAさんに返信したメッセージです．
</p>
<p>
送信：<span style="font-weight: bold;">1分前</span>
</p>
ブラウザでの表示結果
Aさん：Aさんから私に送信されたメッセージです．Aさんから送信されたメッセージです．Aさんから送信されたメッセージです．Aさんから送信されたメッセージです．Aさんから送信されたメッセージです．
送信：5分前
私：私がAさんに返信したメッセージです．私がAさんに返信したメッセージです．私がAさんに返信したメッセージです．私がAさんに返信したメッセージです．私がAさんに返信したメッセージです．
送信：1分前
HTML 文書の <body> の中にいくつかの <div> 要素を配置してページのレイアウトを作成できます．たとえば A さんからのメッセージは左側に配置する（つまり右側に余白を作り），自分のメッセージは右側に配置する（つまり左側に余白を作る）ようにしてみます．このためには，A さんの投稿に関する2つの段落をまとめて <div> の中に移動します．同様に私の投稿に関する段落も2つをまとめて別の <div> の中に移動します．その上でそれぞれの <div> に余白を設定する記述を追加します．なお，この余白の設定方法はあとのページで説明します．
index.html（抜粋）
<div style="margin-right: 25%;">
<p>
<span style="color: blue; font-weight: bold; font-size:120%;">Aさん：</span>Aさんから私に送信されたメッセージです．Aさんから送信されたメッセージです．Aさんから送信されたメッセージです．Aさんから送信されたメッセージです．Aさんから送信されたメッセージです．
</p>
<p>
送信：<span style="font-weight: bold;">5分前</span>
</p>
</div>
<div style="margin-left: 25%;">
<p>
<span style="color: red; font-weight: bold; font-size:120%;">私：</span>私がAさんに返信したメッセージです．私がAさんに返信したメッセージです．私がAさんに返信したメッセージです．私がAさんに返信したメッセージです．私がAさんに返信したメッセージです．
</p>
<p>
送信：<span style="font-weight: bold;">1分前</span>
</p>
</div>
ブラウザでの表示結果
Aさん：Aさんから私に送信されたメッセージです．Aさんから送信されたメッセージです．Aさんから送信されたメッセージです．Aさんから送信されたメッセージです．Aさんから送信されたメッセージです．
送信：5分前
私：私がAさんに返信したメッセージです．私がAさんに返信したメッセージです．私がAさんに返信したメッセージです．私がAさんに返信したメッセージです．私がAさんに返信したメッセージです．
送信：1分前
このように <div> は汎用的で便利な要素です．しかしながら，<div> ではその要素の文書内での位置づけなど，文書構造を定義することはできません．したがって，次のページのように <header>，<main>，<footer> などを用いて文書の構造を作成すると良いでしょう．