作成者：高玉
複数人での更新を可能にするために正しい HTML 文書を書きましょう．
正しい文法にのっとた HTML 文書は古典的な HTML 文書よりも簡潔で作成も容易です．また，本文とデザインが分離しているので，サイトのイメージチェンジといった大掛かりな更新も簡単に行うことができます．
ここでの説明は分かりやすさ・実用性を重視しており，細かい部分は省略(注)しています．そのため「こうしなければ間違い」というわけであはりませんが，「こうしておけば大丈夫」という内容になっています．
（注）文法上省略可能なタグとか．
HTML 文書の冒頭には，HTML文書がどのHTMLの規約に準拠しているのかを示すDOCTYPE宣言（文書型宣言）を記述します．
次に来るのが html 要素です．ここにはタイトルや使用している文字コードなど，本文以外の情報が入ったhead 要素と本文が書かれたbody 要素が含まれています．
POCで公開しているHTML文書のDOCTYPE宣言は以下のとおりです．（一部例外あり）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
ブラウザは優秀なのでDOCTYPE宣言が書かれていなくても適当に表示してくれますが，文法上必須であり，この有無でブラウザの表示方法も変わってしまう(注)ので，必ず書きましょう．
(注)IE6 のDOCTYPEスイッチ
html 要素 は<html>と</html>の間に記述します．
このように，一般的に○○要素とは，開始タグ<○○>と終了タグ</○○>の間に記述されたものを指します．
html 要素の開始タグには，使用している言語名を書くこともできます．例えば日本語なら
<html lang="ja">
とします．
この lang のように，開始タグ中にある付加的な情報のことを属性といいます．
head要素にはHTML文書のタイトルや使用している文字コード，スタイルシート（後述するデザインを定義したもの）のパスなど，本文以外の情報を記述します．
文書のタイトルである title要素は必須です．
<title> タイトル！ </title>
ブラウザが使用している文字コードを誤認識して文字化けするのを防ぐため，文字コードの指定も行った方がよいでしょう．
<meta http-equiv="Content-Type" content="text/html; charset=文字コードの名前">
使用できる文字コード名は数多くありますが，代表的なものを挙げます．
なお，文字コードの指定は日本語を使用する前に行われているべきなので， title 要素よりも先に書くのが無難です．
HTML文書のデザインにはスタイルシートを使うので，その旨を記述します．実際には CSS 以外のスタイルシートを用いることはほとんどないので，CSS 向けの記述のみを紹介します．
<meta http-equiv="Content-Style-Type" content="text/css">
あとは標準的に用いるスタイルシートが記述されているファイルのパスを書けば，そのデザインを適用できます．
<link rel="stylesheet" type="text/css" href="CSSファイルのパス">
ここに本文を書きます．
ここまでをまとめると，HTML 文書のテンプレートは次のようになります．
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=文字コードの名前">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>タイトル</title>
<link rel="stylesheet" type="text/css" href="CSSファイルのパス">
</head>
<body>
本文
</body>
</html>
そもそも HTML とは，タグを用いて文書の論理構造（見出しとか，段落とか，引用とか）を表すための言語です．HTML で書かれた文書がどのように表示されるのか，ということについてはタッチしていません．
そこでHTML文書のデザインを指定するために用いるのがスタイルシートです．
HTML 文書にはその論理構造のみを記述して，デザインに関する指定は全てスタイルシートに分離してしまいましょう．
たとえば，HTMLでは強調部分を strong 要素とします．
IE の標準的な設定では strong 要素の表示は
と太字で表示されるだけですが，CSS を使えば，strong 要素の見栄えを自由に設定することができます．
適当なCSSファイル hoge.css
strong{
color:red; /*文字色を赤に*/
font-weight:bold; /*文字を太字に*/
font-size:200%; /*文字サイズを2倍に*/
}
適当なHTMLファイル
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>タイトル</title> <link rel="stylesheet" type="text/css" href="hoge.css"> </head> <body> <p>普通の文1<strong>ここは強調部分</strong>普通の文2</p> </body> </html>
この適当なHTMLファイルをブラウザで表示させると，
上記の hoge.css にエッセンスは大体詰まっています．
要素名{
プロパティ: 値; /*必要があればコメント*/
プロパティ: 値;
･･･
}
/*
もちろん
複数行のコメントもOK
*/
要素名{
プロパティ: 値;
プロパティ: 値;
･･･
}
･･･
古典的なHTML文書では強調したい部分があるとき，太字にする b 要素 を用いて
<b>強調したい部分？</b>
としていました．しかし，b 要素は太字にするだけであり，強調するという意味は持っていません．
将来「強調部分は文字色を赤くしたい」と思っても，強調するために b 要素を使っていたのか，それとも単に太字にしたいので b 要素を使っていたのかを自動的に判断することはできません．
古典的なHTMLには見た目を指定するための要素/タグが用意されていましたが，現在では非推奨とされています．
HTML文書には論理構造のみをしめし，デザインにはスタイルシートを用いれば，もっと多彩なデザインも可能ですし，将来のデザイン変更も容易です．
以下に，現在では利用が推奨されていない見た目を指定するための要素/タグの代表例を示します．
これらの要素/タグはいずれもCSSのfontプロパティやtext-decorationプロパティによって同等の表示を行うことができます．
以下に使用頻度の高い要素/タグを紹介しています．
昔は引用を表す blockquote 要素を字下げのためだけに使っていた人も多かったのですが，そんなことをしてはいけません．表を意味する table 要素を駆使してデザインしてもいけません．
h1, h2, h3, h4, h5, h6
左から順に見出しレベルが小さくなっていきます．タイトル，チャプター，セクション，サブセクション･･････という感じです．
書物のセクション分けと同じく，h1 要素のすぐ後に， h2 要素を飛び越して h3 要素などが来るのは不自然なので止めましょう．
ul li, ol li
ul は通常の箇条書きに，ol は順序付きの箇条書きに用います．
<ul>
<li>エルニーニョ</li>
<li>ラニーニャ</li>
</ul>
<ol>
<li>朝起きる</li>
<li>トイレに行く</li>
<li>コーヒーを飲む</li>
</ol>
p
p 要素は段落を意味します．通常の文章構造の最小単位です．
地の文は全て p 要素としておくと安心です．
上下の余白をとるために空っぽの p 要素を並べる人もいますが，「デザインはスタイルシートにまかせる」という理念に反しているのでおすすめできません．
strong, em
strong 要素は強い強調， em 要素は弱い強調です．
img
画像を表示させるためには img 要素を用います．
img 要素は空要素の一種で，終了タグが存在しません．
<img src="画像ファイル名" alt="画像を表示できな人への代替メッセージ">
忘れがちですが，alt 属性は必須です． ボタンのように意味をもたない画像については 「alt=""」と空文字列を指定します．（でもデザインはスタイルシートにまかせるべきなので，意味のない画像はHTML文書中にないはず．）
a
リンクを利用するには，a 要素を用います．
<a href="リンク先のURL"> 適当なテキスト</a>
blockquote, q
blockquote 要素は長い引用，q 要素は数フレーズ程度の短い引用に用います．
pre
ソースコードなど，空白・改行がそのまま反映されてほしい部分には pre 要素を用います．
ただし， pre 要素中であっても < や >のタグを表す記号にはそれぞれ，「<」「>」という実体参照を用いる必要があります．
HTML で特殊な意味を持つ記号は実体参照という特別な書き方をしなければ，ブラウザに表示されません．
以下に代表的な実体参照をあげます．