めざせ、ＨＴＭＬの鉄人！

「ＨＴＭＬ教室」(ＸＨＴＭＬ篇)

XHTML は XML の規格にそって HTML を見直したもので、これからの HTML は XHTML のルールに従って書くようにしましょう。XHTML では、HTML を文書にフォーマットをつけるものとしてでなく、文書を構造化するものとして扱います。ですから、本体での font タグなどの使用を禁じ、フォーマットに関する部分はスタイルシートで定義するようにしています。このため、XHTML を書くには、スタイルシートを理解していることが不可欠になります。


1 XHTML のテンプレート

新規に XHTML 文書をつくる時、私は、次のテンプレートを利用しています。

 1: <?xml version="1.0" encoding="EUC-JP"?>
 2: <!DOCTYPE html
 3:    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 4:    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 5: <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
 6: <head>
 7: <meta http-equiv="Content-Type" content="text/html; charset=EUC-JP" />
 8: <title></title>
 9: <link href="general.css" rel="stylesheet" type="text/css" />
10: <script src="general.js" type="text/JavaScript" />
11: </head>
12: <body>
13: 
14: </body>
15: </html>

1行目は XMLの宣言で、日本語の場合、文字コードの指定が必要です。

2-4行目は Document Type の宣言で、これによって、この文書が XHTML の Transitional （ある程度の例外を認めたもの）タイプであることを言い表しています。もっとも厳密に規格にそったもの にする場合は Strict タイプを宣言します。

5行目で、言語を日本語に指定し、7行目で文字コードを改めて指定しています。これによってブラウザが正しい文字コードを選んで表示します。meta タグが スペース一個とスラッシュで閉じられているのは、「終了タグは省略できない」という XHTML のルールに従ったものです。

9、10行目は、スタイルシートと JavaScript の設定ファイルを読みこむためのものです。両方とも head 内に定義することもできますが、外部ファイルにしたほうが無難です。


2 XHTML のルール

いままでの HTML と違って、XHTML を書くときには次のルールを心にとめておく必要があります。


3 XHTML の検査と変換

XHTML のルールに従って書いたファイルを .xhtml という拡張子をつけて保存し、それを XHTML に対応したブラウザで開くと、間違っている個所を示してくれます。ただし、.xhtml のままファイルをアップロードした場合、XHTML に対応していないブラウザでは XHTML のソースコードを表示するだけですので、実際の運用では .html の拡張子で保存し、アップロードしたほうが良いでしょう。これと同じファイルの XHTML を試してみたい方は、こちらをクリックしてください。

XHTML の検査には、tidy というプログラムがあり、www.w3c.org からダウンロードできます。Linux 用のほか、Mac や DOS 用もあります。(Windows では WZ Editor に XHTML マクロがあります。www.villagecenter.co.jp をチェックしてください。) tidy の使い方は簡単で、ファイル名を指定すれば、そのファイルに宣言されている Document Type にしたがって検査をし、その結果を表示してくれますから、XHTML ばかりでなく HTML の検査にも使うことができます。ただし、日本語の場合は、次のようにオプションをつけて使わないと、日本語がすべてアスキーコードに置き換えられてしまいます。

tidy -raw japanese.html

tidy を利用すれば、HTML を XHTML に変換できます。HTML の Document Type を XHTML に書き換えて、それを tidy を使って検査し、その結果を別名のファイルに保存すれば、XHTML ファイルをつくってくれます。コマンドラインでは次のようになります。

tidy -raw japanese.html > japanese.xhtml

これを自動化するために次の perl プログラムを作ってみました。ご参考まで。

#!/usr/bin/perl
#

($dir) = @ARGV;
if ($dir eq "") {
        $dir = ".";
        }
@list = glob "$dir/*.html";
foreach $file (@list) {
        &doctype_convert ($file);
        &xhtml_convert ($file);
        }
exit 0;

sub doctype_convert {
        local ($file) = @_;
        open ORIGINAL, "$file";
        open BACKUP, "&gt;$file.bak";
        print BACKUP "<?xml version=\"1.0\" encoding=\"EUC-JP\"?&gt;\n";
        print BACKUP "<!DOCTYPE html\n";
        print BACKUP "   PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\"\n";
        print BACKUP "   \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\"&gt;\n";
        print BACKUP "<html xmlns=\"http://www.w3.org/1999/xhtml\" lang=\"ja\" xml:lang=\"ja\"&gt;\n";
        print BACKUP "<head&gt;\n";
        print BACKUP "<meta http-equiv=\"Content-Type\" content=\"text/html; charset=EUC-JP\" /&gt;\n";
        foreach $line (<ORIGINAL>) {
                chomp $line;
                if ($line =~ /<!DOCTYPE/i) {
                        ;
                        }
                elsif ($line =~ /<html/i) {
                        ;
                        }
                elsif ($line =~ /<head&gt;/i) {
                        ;
                        }
                elsif ($line =~ /<meta/i) {
                        ;
                        }
                else {
                        print BACKUP "$line\n";
                        }
                }
        close BACKUP;
        close ORIGINAL;
        }

sub xhtml_convert {
        local ($file) = @_;
        system "tidy -raw $file.bak &gt; $file";
        }


[INDEX]