HTML では，改行は空白と同じものとして扱われます．また，空白も単語を区切る意味しか持ちません．ブラウザが表示するときには，元のファイルの改行とは無関係に，そのときのウィンドウの幅に合わせて適当な箇所で改行をします．

HTML では，段落は p 要素で示します．

<p>最初の段落です．</p>

<p>2番目の段落です．

ここは，まだ2番目の段落です．</p>
<p>3番目の段落です．</p>
      

段落の中で強制的に改行したい場合には，br 要素を使用します．br 要素は開始タグだけで，内容も終了タグもありません．また，hr 要素で，区切りの横線を入れることができます． hr 要素も開始タグだけです．

例えば，以下のような HTML ファイルは，

<p>これは，HTMLの改行のテストです．<br>
この行のように br がないと，
HTMLファイルで改行をしていても無視されます．<br>
また，このように区切り線を指定すると，
<hr>
横方向の線ができます．</p>

次のように表示されます．

適切な見出しをつけると，情報を効率よく相手に伝えることができます．見出しには6段階あり，h1 から h6 の要素を使用します．最大の見出しが，h1 で，数が増えるに従って小さくなります．

例えば，以下のようなHTMLファイルは，

<h1>これは一番大きな見出しです． </h1>
<h2>これは次に大きな見出しです． </h2>
<h3>これはその次に大きな見出しです． </h3>
<h4>これは小さな見出しです． </h4>
<h5>これはもっと小さな見出しです． </h5>
<h6>これは一番小さな見出しです． </h6>

と表示されます．

注意
フォントの設定によっては，違うレベルの見出しが同じ大きさで表示されることがあります．あまりいろいろな見出しを多用すると，そのような設定で見ている人には文書の構成が分かりにくくなります．

HTMLでは，番号無し，番号付き，説明付きの3つのスタイルで箇条書きを指定することができます．

番号無し

ul 要素の中に各項目を li 要素で書いていきます．

<ul>
<li>環境情報学部</li>
<li>総合政策学部</li>
<li>看護医療学部</li>
</ul>

と指定すると，以下のようになります．

番号付き

ul 要素の代わりに ol 要素を使うと，各項目の前に番号が付きます．

<ol>
<li>履修申告をする．</li>
<li>講義に出席し課題をこなす．</li>
<li>期末試験を受験する．</li>
<li>成績が付き単位取得．</li>
</ol>
	

と指定すると，以下のようになります．

説明付き

説明付きの箇条書きとは， 辞書のように， 各項目が用語とその説明からなるようなリストのことです． dl 要素の中に dt 要素と dd 要素を交互 に書いていきます．例えば，

<dl>
<dt>WWW</dt>
<dd>World Wide Web の略</dd>
<dt>URI</dt>
<dd>Uniform Resource Identifier の略</dd>
</dl>

と指定すると，以下のようになります．

また，箇条書きは入れ子にして階層構造を持たせることもできます．次のように書くと，どのような表示になるでしょうか．ブラウザで確認してみると同時に，どのタグがどこで始まってどこで終わっているのかも確認しましょう．

<ul>
<li>オーケストラ
  <dl>
  <dt>弦セクション</dt>
  <dd>弦楽器により構成</dd>
  <dt>パート</dt>
  <dd>
    <ol>
    <li>第一ヴァイオリン</li>
    <li>第二ヴァイオリン</li>
    <li>ヴィオラ</li>
    <li>チェロ</li>
    <li>コントラバス</li>
    </ol>
  </dd>
  </dl>
</li>
</ul>

	

表を作るときは，table 要素を使います．その中の各行は tr 要素で，行の中の各項目は td 要素で表します．上端や左端に見出しを書きたい場合は，td 要 素の代わりに th 要素を使います．

	<table>
	<tr><th>コマンド</th>
	<th>機能</th>
	</tr>
	<tr>
	<th> pwd </th>
	<td> カレントディレクトリの表示 </td>
	</tr>
	<tr>
	<th> cd </th>
	<td> ディレクトリの移動 </td>
	</tr>
	<tr>
	<th> ls </th>
	<td> ディレクトリの内容表示 </td>
	</tr>

• 枠線を付けるためには，table 要素の開始タグに border 属性を書きます．値は枠線の太さです．
• 縦に数段抜きのマスを作りたいときは th 又は td 要素の開始タグに rowspan 属性を書きます．値は何段抜きにするかを指定します．
• 横に数段抜きのマスを作るときも同様に， th 又は td 要素の開始タグに colspan 属性を書きます．

  
	<table border="1">
	  <tr><th>旧省庁名</th><th>新省庁名</th></tr>
	  <tr><td>大蔵省</td><td>財務省</td></tr>
	  <tr><td>厚生省</td><td rowspan="2">厚生労働省</tr>
	  <tr><td>労働省</td></tr>
	  <tr><td colspan=2>外務省</td></tr>
	</table>
      	  <tr><td>通産省</td><td>経済産業省</td></tr>

HTMLはハイパーテキストの一種なので，文書中に他の情報へのリンクを持たせることができます．他の情報へのリンクは a 要素で表し，href属性の値として，リンク先の情報の位置を示す URI を指定します．例えば，SFCのホームページへのリンクを自分のページの中に作る場合は，以下のようにします．

<a href="http://www.sfc.keio.ac.jp/">SFCのホームページ</a>

a 要素の内容をソースアンカー (source anchor)と言い，そこをクリックすると指定された情報に飛ぶ ようになります．

現在のページと同じウェブサーバ上にあるページの URI は，ホスト名などを省略することができます．

• ウェブサーバが起点とするディレクトリ（CNS では，SFC のホームページのあるディレクトリ）からの相対パス名を指定する方法：パス名の最初に「/」をつけます．
• 現在のページのあるディレクトリからの相対パス名を指定する方法：そのまま相対パス名を書きます．

<ul>
  <li><a href="next.html">同じディレクトリの別のファイル</a>
  <li><a href="/index.html">このサーバのトップへ</a>
  <li><a href="http://www.keio.ac.jp/index.html">慶應義塾のホームページ</a>
</ul>

HTMLでは「<」や「 >」は特別な意味を持っているのでそのまま書くことはできません．これらの文字を表示したい時は以下のように書きます．

空白や改行を入力した通りに表示してほしいことがあります． 例えば，以下のような HTML ファイルは，

明日，７時から飲み会やります．

　　　　│　　↑
　　　　│　　北
　　　　駅
　　　　│◎ここ
　　　　│
      

以下のように表示されます．

これではどこに行けばいいのか分かりません．

このような時は pre を使います．pre 要素の内容は，文字幅が一定のフォントを使い，空白・改行もその通りに表示されます．

<pre>
明日，７時から飲み会やります．

　　　　│　　↑
　　　　│　　北
　　　　駅
　　　　│◎ここ
　　　　│
</pre>

ウェブブラウザには，表示しているページのソース(HTML ファイルの中身)を見る機能があります．HTML ファイルを書くときの参考にすると良いでしょう．

1. ソースを見たいページを表示します．
2. [表示]→[ページのソース]を実行します．
3. 新しいウィンドウが開き，ソースが表示されます．
4. このウィンドウを閉じるには，ウィンドウの左上隅をクリックしてメニューを出し，[Delete] を実行してください．

さまざまなHTMLタグ P.248参照