HTMLの仕様と正しい書き方

HTMLの歴史

HTMLの原型は URL,HTTPを含め ティム・バーナーズ　リー(Tim Berners-Lee)氏によって発案されました。 HTML自体は SGML（Standard Generalized Markup Language）を元にして考案されたと言われています。 一般に公開されたのは、1993年のHTML（HyperText Markup Language）1.0です。 その後に 同氏は、 World Wide Web Consortium（W3C） を設立(1994年)しています。 W3Cは、WWWの仕様や指針、標準技術の策定を行っており、現在でも中心的役割を果たしています。 その後のHTMLの変遷を簡単に示します。
HTML 2.0　（1995年）これより日本語が使える仕様になりました。
HTML 3.2　（1997年）装飾用のタグや、タグ内で色などの属性が書けるようになります。 平行してCascading Style Sheets leve 1(1996年勧告)がなされました。 　(なおHTML3.0は 草案のみで勧告されていません)
HTML 4.0　（1997年1月）論理的な構造を示すべきHTMLで、HTML3.2の飾の属性を使うのは好ましくないとして発表されます。 つまり、飾りはCSSに任せるべきとされました。
（なお、Cascading Style Sheets level 2 「以降はCSS2と呼ぶ」は1998年5月に勧告）
HTML 4.01　（1999年12月） より アクセシビリティ を 高めるためのマイナーアップ。このバージョンが現在に至るまで使われています。 また ISO/IEC JTC 1や、 JIS X 4156:2005なども、これに準じて規格化されています。 当サイトのこれまでのHTML解説も、HTML 4.01として使える範囲を中心に説明しています。
HTML 5　2008年 W3C より草案の発表！ 2014年頃に勧告予定

必ず書くべき HTML 4.01のdoctype宣言

HTML4.01より、タグ属性のbgcolor,alignを使わずに、スタイルシートで記述するよう求められます。 つまり、文書構造と ビジュアルデザインは分離する設計にすべきということです。
またアクセシビリティの考えで さまざまなマシンのブラウザに対応できるような配慮や、 さまざまな人々への配慮をして作るべき とされます。
その思想より、古いバージョンのHTMLでもある程度同じように見えるようにするための仕組みが 組み込まれているのです。それが文書型宣言（doctype宣言）と呼ばれるものです。

HTMLは上記に示すようにバージョンが変化しています。 そして、バージョンによっては見え方も変化します。 よってより正確にHTMLを表現する場合、 どのバージョンに合わせて作ったものかを明確にする訳です。
これは、HTMLの先頭行で DTD（Document Type Definition：文書型定義）を 指定することで行います。 （DTDを使うマークアップ言語は、HTML以外にも SGMLやXMLなどがあります。DTDは 文書構造を定義しており、このようなものはスキーマ言語と呼ばれています。）
HTML4.01の文書型宣言は 次の３種類が存在し、HTMLの先頭(<html>の前)で、 何れかを書いてから、 その文法に従って書くことになっています。

（１） 4.01 Strict DTD

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

最も厳格で正確な仕様です。つまり奨励されないタグや属性が使えません。実はこの指定をすると フレームやインラインフレームが使えません。

（２） 4.01 Transitional DTD

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

従来の仕様が可能ですが、奨励されない要素や属性や、廃止予定のタグ要素でも使用可能になる指定です。 ですが、インラインフレーム以外の フレームは使えません。 このサイトのwebページは、ほとんどがこの指定になっています。

（３） 4.01 Frameset DTD

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

Transitional DTDに対して、フレームも可能にした仕様です。つまり、最も奨励されないタグも使えてしまう仕様です。 逆にいうと、そのような所はブラウザによってどう判断されるか分からないということです。

このDTD記述は次の規則になっています。
<!DOCTYPE HTML PUBLIC "公開識別子" "システム識別子">

公開識別子が、このDTD文法がW3Cで作成されたことを意味する部分で、 ブラウザはここから使うDTDを判断します。
また、"システム識別子"で、WWWサーバーから「ソースコードの解釈」に使う情報がダウンロード できるようになっています。（"システム識別子"の箇所は省略することも可能です。しかし、 これによりブラウザの表現が変るでしょう）

なお、仮にHTML3.2 仕様で作る場合のdoctype宣言は次の1行を先頭に書きます。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

また、仮にiモード用のHTMLであれば doctype宣言として次の1行を先頭に書きます。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD Compact HTML 1.0 Draft//EN">

では、文書型宣言（doctype宣言）を書かないとどうなるのでしょうか？ 以前（RFC1866）は、省略すると HTML2.0 とみなすルールがありましたが、HTML4以降は「推奨しない」に変わっています。 結論として、どうなるかはブラウザ任せということでしょう。
現在確認しているブラウザで、希望通りの表示がされていても、他のブラウザでどうなるか分かりませんし、 将来の表示も、どうなるか分からないということになります。
なお、このサイトのこれまでの練習では、この文書型宣言の記述がありませんが、 本来は書くべきものです。初心者の練習用ということで省略してきました。
ここで、これまでローカルで作ってきた作品(htmlファイル)に この文書型宣言を追加して、変化を確認しましょう。 この時、一文字一句間違わないように注意して記述しなければなりません。 その意味では、上記部分をコピーして使うとか、テンプレートを作っておいて、 そこからコピーして使うのがよいでしょう。
以下に4.01 Transitional DTD骨組み例を示します。（作り始めにコピーして使うとよいでしょう） 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<title>   </title>
</head>
<body>


</body>
</html>

また、このページよりダウンロードして使える「HTML作成練習用テキストエディタ」の起動ツール では、入力支援機能で、これらを出すことができるようになっています。

なお今後も、確認ボタン、目標の確認、編集後の確認 の練習用サンプルソースなどには、その時の学習対象に着目してもらいたいという理由で、 この文書型宣言記述を省略しています。

なお、現在主流で使われるブラウザには「標準モード」と「互換モード」と呼ばれるモードがあります。 そして、正しく文書型宣言（doctype宣言）を書いたHTMLは「標準モード」で表示され、 そうでない場合は、過去のブラウザでも表示できるようなレイアウトで表示する「互換モード」 で表示されるようです。これはボタンによる手動操作でも簡単に切り替えできるようになっています。

HTML 5の規格化？

W3Cでは、HTML以外に XMLやXHTMLに対しても規格化を行っています。
これらは、プログラムで内容を管理しやすく する構造の仕様です。
W3CはHTML4発表後、特にXHTMLの策定や 推進を進めてきました。 XHTML 1.0を2000年に勧告し、 XHTML 2.0を2004年に発表しています。
XHTML1は、比較的受け入れられましたが、XHTML2の仕様がこれまでの書き方と異なる部分が多く、 ブラウザのベンダーである Mozilla Opera Apple社 から 大変な反発を受けます。
そしてこの3社はWHATWG(Web Hypertext Application Technology Working Group)を発足して 別途で XHTML2に変わる次世代HTMLの策定を始めます。これがHTML 5になる訳です。
これは、慣れ親しまれたHTML4の安易な書き方を継承し、Webデザイナーがデザインしやすく、 Webプログラマーが作りやすい仕様というコンセプトです。
結局、W3Cはその後に XHTML 2.0の規格化を断念して、HTML 5を推進することになります。

さて、コンセプトから分かるように、HTML 5は 慣れ親しまれたHTML4を継承する構造です。 よって、ほとんどはこれまでのHTML4の考え方でも作れるということになります。
そして、デザイナーやプログラマ向けに配慮された明確な目的のタグなどが増え、 使う意味のないタグは廃止 ( 使えなくなる訳ではない ) しようとする仕様です。
また、HTML 4で必要だった長いDTDを含む文書型宣言（doctype宣言）が次のように シンプルなものに変わっています。それは次のように書くだけです。 

<!DOCTYPE html>

具体的には、一般的に次のような書き方で済むようになっています。 

<!DOCTYPE html>
<html lang="ja">
 <head>
  <meta charset="UTF-8">
  <style>
    body { background-color: yellow; }
  </style>
  <title >タイトル</title>
 </head>
 <body>
  <h1 >見出し</h1>
   <div>
    <p>文章</p>
   </div>
 </body>
</html>

JSPについて

JSP(Java Server Pages)とは、HTML 内に Java のコードを埋め込んでおき、 Web サーバ側で java プログラムを動作させて、それで生成したHTMLをWebブラウザに送り返す仕組みで、基本的な骨組みを示します。
（このように、サーバ側のプログラムでHTMLを生成する仕組みはJSP以外にもたくさんの種類があります） 
<%@page contentType="text/html; charset=UTF-8" language="java"
import="java.util.*"
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<% 
String tt = request.getParameter("TT");
%>
<style>
  body { background-color: yellow; }
</style>
<title >タイトル</title>
</head>
<body>
<h1>受け取ったデータは<%= tt %>です</h1>
<p>
<% 
String ip=request.getRemoteAddr();
out.println( "あなたの情報=" + ip + ":" + request.getRemotePort() );
%>
</p>
</body>
</html>

XHTML について

上記で示したように、XHTMLはW3Cが推進を進めてきたブラウザで扱えるデータ表現方法の一つです。
XHTML 1.0 TransitionalはXMLに準拠しているという点で、HTML 4.01 Transitionalと決定的に違います。
XMLは、プログラム（たとえばVB.netやPHP）で扱いやい表現で、データベースのように再利用しやすい構造とも言えます。
HTML 4.01 Transitionalより以下の点に注意すれば、XHTML 1.0 Transitionalと ほぼ同等の記述にできます。