2. tutorial of HTML as SGML

本章の目次

2章では,HTML文書の本来の役割――文書の構成を明示すること――に関して,いったんSGMLに立ち返って解説します。既にHTMLに関して知識のある方は読み飛ばしても構いませんが,知識を整理し,場合によっては誤解を解くために,ぜひ2章をお読みください。

2.1. SGML in brief

HTMLの概念を正しく把握するためには,SGMLに関する基礎知識が有用です。この節では,SGMLに関する基礎知識を「名刺」を題材に説明します。

2.1.1. 文書型定義と文書インスタンス

1) 「名刺」と「名刺の定義」

名刺とは,個人の名前や連絡先を印刷した簡単な文書です。それぞれに印刷されている文面はその作成者によって違いますが,(使用目的が同じであるために)そのフォーマットは大体同じです。細かい違いを思い切って無視してしまえば,「名刺」とは「肩書きの紹介,名前の紹介,連絡先の紹介などで構成されているもの」だ,と定義できるでしょう(図2-1)。

SGML的には,「名刺」を説明するには二つ段階を踏みます。すなわち,「名刺の定義」と「その定義に従って書かれた個々の名刺」をもって「名刺」を説明します。「名刺の定義」は「肩書き,名前,連絡先からなるもの」であり,「その定義に従った個々の文書」を「名刺」と呼ぶのです。あえて専門用語を用いれば,前者を「文書型定義(Document Type Definition : DTD)」といい,後者を「文書インスタンス(Instance:実例)」もしくは単に「文書」と呼びます。

図2-1 「名刺」と「名刺の定義」
【図2-1】――「○○商事営業部 円山幸雄 tel 052-123-4567」という名刺の文書インスタンスは,「所属 姓名 連絡先」という名刺の文書型定義に従っています。

文書型定義は,そのまま「文書の書き方の規則」になっています。おかしなたとえですが,銀行や役所で初めて必要書類を書く場合でも備え付けの「記入例」を見れば正しく記入できるのと同様に,まだ「名刺」を書いたことの無い人でも,「名刺の文書型定義」を見れば,必ず正しい様式で記述できるのです。

SGMLの考え方では,まず誰かが「文書型定義」を作成し,皆がそのルールに従って文書インスタンスを記述します。こうすることによって,「誰が書いても」おなじルールに従って整えられた文書を記述できます。

ということは,すべての人が(少なくとも)文書型定義の読み方を理解している必要があります。事実,文書型定義を読むのは難しい作業ではありません。以降では,実際に「名刺」の文書型定義を定義しながらその読み方の説明をし,文書型定義にしたがって文書インスタンスを書くさまを例示します。

2) 「文書型定義」が定める用件

文書型定義は,つぎの用件を定義するものです。

文書は単一の文ではなく,いくつかの意味のある文のまとまりによって構成されています。文書型定義では,まずその文書を構成する要素(Element)にどんなものがあるのかを明示しなければいけません。ただいまの「名刺」の場合は,「肩書き」「姓名」「連絡先」が構成要素です。

加えて,その各要素がどのような順番で何回出現するのかを定義すれば,文書型定義はほぼ完成です。ここでは,出現順序は「肩書き」「姓名」「連絡先」の順だと定義し,その出現回数は「肩書き」は0以上(一つも肩書きのない人もいるし,複数の肩書きをもつ人もいる),「姓名」は1(姓名のない名刺は困る),「連絡先」は1以上(最低でも一つは連絡先が必要)である,と定義します。

この場合は,文書型定義は次のように書かれます。

<!ELEMENT 名刺 - - (肩書き*,姓名,連絡先+) >
<!-- [解説]
    順序:肩書き,姓名,連絡先の順
    回数:0以上(*),1,1以上(+)
-->

ところで,SGMLでは,ある要素は別の要素の集合として定義されています。ある要素を「親要素」と見た場合,それを構成している下位の要素を「子要素」と呼びます。さて,さきほどの文書型定義は最上位の要素「名刺」を定義したに過ぎません。続いてその子要素である「肩書き」「姓名」「連絡先」の文書型定義を記述しましょう。

<!ELEMENT 肩書き - - (#PCDATA) >
<!ELEMENT 姓名 - - (#PCDATA) >
<!ELEMENT 連絡先 - - (#PCDATA) >

ここで子要素として現れた「#PCDATA」は,SGML用語で「普通の文字」をさします。端的には,#PCDATAは目に見える(表示される)文字そのものです。すなわち,#PCDATAが現れてようやく本当に文書が記述できるわけです。逆に言えば,#PCDATAを子要素に持たない要素の内容として直接文字を記述するのは不正です。

以上で「名刺」の文書型定義は完成しました(図2-2)。

図2-2 「名刺」の文書型定義(normal)
<!--文書型定義「名刺」(http://www.meisi.com/dtd/normal.dtd)-->
<!ELEMENT 名刺 - - (肩書き*,姓名,連絡先+) >
<!-- [解説]
    順序:肩書き,姓名,連絡先の順
    回数:0以上(*),1,1以上(+)
-->
<!ELEMENT 肩書き - - (#PCDATA) >
<!ELEMENT 姓名 - - (#PCDATA) >
<!ELEMENT 連絡先 - - (#PCDATA) >

3) 文書インスタンスの書き方

それでは,実際に文書型定義に従って「名刺」インスタンスを記述してみましょう。

文書インスタンスでは,タグ(tag)とよばれる記号を用いて要素を表現します。すなわち,「開始タグ<要素名>」と「終了タグ</要素名>」で挟み込むことで,その要素が記述されている範囲を特定するのです。

<要素名> 要素の内容 </要素名>

図2-2の文書型定義によれば,もっとも最上位の要素は「名刺」です。したがって,文書インスタンスのもっとも外側は次のようになります。

<名刺>
</名刺>

つづいて,文書型定義で「名刺」の子要素について調べると,「肩書き」(0以上),「姓名」(1),「連絡先」(1以上)を書くことになっています。そこで,文書インスタンスにおける「名刺」の内側は次のようになります。(ここでは,すべての子要素を1回ずつ書いてみました。)

<名刺>
    <肩書き></肩書き>
    <姓名></姓名>
    <連絡先></連絡先>
</名刺>

「肩書き」「姓名」「連絡先」の子要素は,#PCDATAすなわち普通の文字です。そこに実際の肩書きなどを書き入れれば,最終的な「名刺」インスタンスの出来上がりです(図2-3)。

図2-3 SGML文書インスタンスとしての「名刺」
【図2-3】――左上に肩書き、中央に姓名、右下に連絡先の書かれた名刺です。
<名刺>
    <肩書き>○○商事営業部</肩書き>
    <姓名>円山幸雄</姓名>
    <連絡先>tel 052-123-4567</連絡先>
</名刺>
【図2-3】――こちらの名刺には連絡先が二つあります。
<名刺>
    <肩書き>△△美術館館長</肩書き>
    <姓名>平山稔</姓名>
    <連絡先>tel 03-9876-5432</連絡先>
    <連絡先>fax 03-9876-5431</連絡先>
</名刺>
コラム:「タグ」≠「要素」

「タグ」は「要素の開始や終了を明示する記号」に過ぎません。しかし,「タグ」という用語を「要素そのもの」と混濁して用いているケースをよく見かけます。たとえば,「スタイルシートでH1タグの見栄えを調整する」といった表現です。しかし,スタイルシートで表示を調整するのは「要素」すなわちタグで囲まれた中身の文字列であって,「タグ」すなわち「<要素名>」などの記号ではありません。

4) HTMLの場合

以上のように,SGMLでは,文書を書くためにまず文書型定義を書き,その定義に従って文書インスタンスを書く必要がありました。一方,HTMLでははじめから文書型定義が定義されています。したがって,利用者は文書型定義に関して悩む必要はありません。

ただし,与えられた文書型定義を理解し,それに従って文書インスタンスを記述しなければいけません。本書のHTML解説では,W3Cの定める正規の文書型定義を整理・単純化したものを用います。これを用いれば,すぐにHTML文書インスタンスを記述できるようになるでしょう。

2.1.2. スタイルシートの位置づけ

1) スタイルシートの仕事

ところで,文書型定義だけでは,文書の性格は分かっても最終的な印刷結果(見栄え)はわかりません。見栄え指定はスタイルシートという別の仕組みで行います。SGMLとスタイルシートはまったく独立した仕組みです。原理的にはスタイルシート以外のスタイル指定方法を採用しても構いませんが,ここでは簡単のためにスタイルシートだけを紹介します。

スタイルシートは,文書型定義で取り上げた要素ひとつひとつに関して,フォントサイズや色などを指定していくものです。スタイルシートは文書インスタンスごとに切り替えられるので,文書型定義が同じでも,異なった見栄えの文書を作成することが可能です(図2-4)。

図2-4 スタイルシートの例
【図2-4】――この名刺の見栄えは,以下のスタイルシートによって決定されています。
肩書き {
    font: italic 10pt "明朝"
    text-align: left;
}
姓名 {
    font: bold 20pt "ゴシック";
    text-align: center;
}
連絡先 {
    font: normal 10pt "Century";
    text-align: right;
}
【図2-4】――この名刺では,姓名の下に枠線が引かれています。
肩書き {
    font: normal 10pt "明朝"
    text-align: left;
}
姓名 {
    font: normal 20pt "楷書";
    border-bottom: solid 1pt black;
    text-align: center;
    text-indent: 1em;
}
連絡先 {
    font: italic 9pt "Century";
    text-align: right;
}

2) HTMLの場合

以上のように,SGMLでは文書作成者が別途スタイルシートを記述しない限り,表示に関しては完全に不明のままです。一方,W3CがHTML用に推奨するCascading Style Sheet(CSS)というスタイルシートの仕組みでは,「WWWブラウザ」「文書作成者」「読者」の3者がスタイルシートを持ちよることを前提にしています。すなわち,文書作成者がスタイルシートを省略してもWWWブラウザが適切に文書を整形して表示してくれます。もちろん,スタイルシートを用いれば,自在に見栄えを調整できます。

2.1.3. バージョン違いの表現

1) バージョン違いとは

図2-2で「名刺」の文書型定義を提示しましたが,それは名刺の定義の一例に過ぎません。現実的にはさまざまな種類の名刺の定義が考えられます。たとえば,「肩書きは必ず1つ以上記述しなければならない」「連絡先はtelかfaxのどちらかでなければならない」などのバリエーションが考えられます。そのような違いを「バージョン違い」といいます。

異なるバージョンを表現するには,異なる文書型定義が必要です。図2-2の文書型定義をnormal.dtdとし,ここでは新たにvariation.dtdを記述してみましょう(図2-5)。

図2-5 「名刺」の文書型定義のバージョン違い
<!--文書型定義「名刺」(http://www.meisi.com/dtd/variation.dtd)-->
<!ELEMENT 名刺 - - (肩書き+,姓名,連絡先) >
<!-- [解説]
    順序:肩書き,姓名,連絡先の順
    回数:1以上(+),1,1
-->
<!ELEMENT 肩書き - - (#PCDATA) >
<!ELEMENT 姓名 - - (#PCDATA) >
<!ELEMENT 連絡先 - - (TEL | FAX)+ >
<!-- [解説]
    順序:TELあるいはFAXどちらか一方,の1回以上の繰り返し
    回数:1,の1回以上の繰り返し
-->
<!ELEMENT TEL - - (#PCDATA) >
<!ELEMENT FAX - - (#PCDATA) >

文書型定義variation.dtdにしたがってインスタンスを書いてみましょう(図2-6)。

図2-6 variation.dtdによる文書インスタンス
【図2-6】――見た目は同じ名刺ですが,文書型定義は異なっています。
<名刺>
    <肩書き>△△美術館館長</肩書き>
    <姓名>平山稔</姓名>
    <連絡先>
        <TEL>tel 03-9876-5432</TEL>
        <FAX>fax 03-9876-5431</FAX>
    </連絡先>
</名刺>

2) DOCTYPE宣言

図2-6の文書インスタンスを解釈するためには,どの文書型定義を読めば良いでしょうか。もちろん,variation.dtdです。誤ってnormal.dtdで解釈してしまうと,要素「TEL」「FAX」が理解できずに困ることになります。

文書を解釈する上で読者を混乱させるのは望ましくありません。その混乱を避けるために,各々の文書インスタンスの最初の1行に,それがどの文書型定義に従って書かれているのかを明示する宣言――DOCTYPE宣言(文書型宣言)――を記述しましょう。

DOCTYPE宣言は,一般に次の形式を取ります。

<!DOCTYPE 定義名 SYSTEMあるいはPUBLIC "DTDファイルの位置">

なお,SYSTEMは非公開(ローカル)DTDを,PUBLICは公開DTDを意味します。これまでの文書インスタンスにDOCTYPE宣言を加えると図2-7のようになります。

図2-7 DOCTYPE宣言付きの文書インスタンス
<!DOCTYPE 名刺 SYSTEM "http://www.meisi.com/dtd/normal.dtd">
<名刺>
    <肩書き>△△美術館館長</肩書き>
    <姓名>平山稔</姓名>
    <連絡先>tel 03-9876-5432</連絡先>
    <連絡先>fax 03-9876-5431</連絡先>
</名刺>

<!DOCTYPE 名刺 SYSTEM "http://www.meisi.com/dtd/variation.dtd">
<名刺>
    <肩書き>△△美術館館長</肩書き>
    <姓名>平山稔</姓名>
    <連絡先>
        <TEL>tel 03-9876-5432</TEL>
        <FAX>fax 03-9876-5431</FAX>
    </連絡先>
</名刺>

3) HTMLの場合

1998年3月現在,公式に認められているHTMLのバージョンには2.0,3.2,4.0があります。

HTML2.0:
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">

1995年12月,RFC1866。文書構造,インライン画像,リンクなど,もっとも基本的なHTML文書を定義しています。なお,HTML1.0に相当する公式の仕様は存在しません。すなわち,HTML2.0成立以前は公式の文書型定義が定められておらず,HTML文書の記述ルールにかなりの混乱がありました。

HTML3.2:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 //EN">

1997年1月,W3C Recommendation。HTML3.2は,Netscape社などの独自仕様の要素(TABLE,FONTなど)や独自属性(BGCOLOR,ALIGNなど)をHTML2.0に追加したものだと大雑把に説明できます。

なお,HTML3.2よりも前に,HTML2.0を大幅に拡張するHTML3.0が検討されたのですが,そのギャップの大きさのために(?)3.0は破棄されました。

HTML4.0-strict:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
HTML4.0-transitional:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
HTML4.0-frameset:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">

1997年12月,W3C Recommendation。HTML3.2ではFONT要素など,直接にスタイルを規定する要素が採用されましたが,SGML的な観点から言えば,文書構成要素は文書における意味(「肩書き」「連絡先」など)に基づいて定義されるべきであり,FONT要素などは望ましくないものです。しかし,すでにデファクト・スタンダードとして広まっている以上,これらを無視するわけにはいきません。

そこで,HTML4.0ではStrict,Transitional,Framesetのサブバージョンが制定されました。StrictはFONT要素などのスタイル規定系要素・属性を破棄した厳密なバージョン,Transitionalはスタイル規定系要素・属性を残したバージョンです。Framesetは毛色が異なり,フレーム表示のHTML文書に使われる特別な文書型定義です。なお,Transitional(過渡的)という名前が示すとおり,今後はStrictに移行することが勘案されています。スタイル指定はスタイルシートで行いましょう。

HTML4.0の新基軸としては,文書の国際化考慮・スタイルシートとの連携・マルチメディアオブジェクト・スクリプト・フレームの採用があげられます。また,テーブル,フォームの表現力がより豊かになりました。さらに,アクセス性に関する考慮(マウスを用いない読者,画像を表示しない読者にも文書内容を伝えるための考慮)のための属性が追加されています。

【編者注】

1999年12月24日,HTML4.0はHTML4.01によって上書きされました。現在では,HTML4.0の代わりにHTML4.01を使うことが求められていると言ってよいでしょう。もっとも,本文でなされている範囲でのHTML4.0についての解説は,おおむねHTML4.01にもそのまま当てはまります。

ただし,HTML4.01のDOCTYPE宣言はHTML4.0のそれとは異なるので注意が必要です。これについては,HTML4.01仕様書の7.2あるいはその邦訳を参照してください。

コラム:国際化考慮について

厳密には,HTML2.0や3.2の仕様は西欧言語のアルファベットの文字コードを対象にしており,その他の言語圏――日本語やヘブライ語など――を考慮したものになっていません。すなわち,属性値などに日本語文字を用いて良い,と言い切れないところがあるのです。

HTML4.0では,仕様としてはじめから国際化を考慮しています。すなわち,HTML4.0にしたがったHTML文書では,気兼ねなくHTML文書で日本語を使えます。

実は,HTML2.0を国際化対応に拡張した仕様も存在しました(1997年1月,RFC2070)。

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML i18n//EN">

しかし,本書では国際化に関する具体的な解説は省略させていただきます。

HTMLのバージョンは上位互換ではありません。したがって,HTML2.0の仕様にしたがって書いていた文書インスタンスのDOCTYPE宣言を4.0に付け替えても,必ずしもHTML4.0の文書として通用するとは限りません。

また,新しいバージョンが絶対ではありません。すなわち,HTML4.0でFONT要素が破棄されたからといって,HTML3.2として書かれた文書でFONT要素を使えなくなったわけではありません(もっとも,あまり望ましくはありませんが)。

HTML文書作成者は,どのバージョンの文書型定義に従ってHTML文書を記述しても構いません。ただし,必ず相当するDOCTYPE宣言をつけてください。

コラム:DOCTYPE宣言に関する誤解

「DOCTYPE宣言をつけるように」と声高に叫ばれ始めたのは,HTML3.2が制定されたころです。しかし,説明が不十分な場合が多く,「HTML文書を書く場合は,かならず

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 //EN">

と頭につけておくように」という説明すら存在しました。

実際には,記述したHTMLのバージョンに応じて正しいDOCTYPE宣言を記述しなければいけません。たとえば,HTML2.0の仕様にしたがって書いたHTML文書であれば,HTML2.0のDOCTYPE宣言を記述してください。

また,BLINK要素やMARQUEE要素はWWWブラウザ開発会社の独自拡張要素です。これらを用いたHTML文書は,公式の仕様にのっとったHTML文書ではありません。したがって,上に挙げたDOCTYPE宣言を記述するのは誤りです。どのようなDOCTYPE宣言を書くべきかは,Microsoft社やNetscape社に問い合わせてださい^^;。

2.2. HTML as SGML in brief

2.2.1. HTMLの文書型定義(簡略版)

本書はHTML4.0-Strictをベースに,文書記述のコア部分だけを取り出した文書型定義をもちいてHTMLを解説します。本書の指示に従って書かれたHTMLインスタンスは必ずHTML4.0-Strictの仕様を満足しますので,4.0-StrictのDOCTYPE宣言を記述して構いません。

さて,その文書型定義は次のように単純なものです(図2-8)。

すなわち,まず前書きがあって,続いて本文がきます。本文は段落の繰り返しです。段落は,普通の語句と強調したい語句などの繰り返しです。

図2-8 HTML4.0の文書型定義(簡略版)
<!--HTML4.0のサブセット。
    インスタンスはHTML4.0-StrictとDOCTYPE宣言して構わない。
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
-->

<!-- 最上位の要素は「HTML」-->
<!ELEMENT HTML o o (HEAD, BODY) >
<!-- [解説]
    順序:HEAD,BODYの順    回数:1,1
-->

<!ELEMENT HEAD o o (TITLE) >
<!ELEMENT BODY o o (%ブロック系要素;)+ >
<!--
    回数:1以上(+)
-->
<!-- この%付きの「名前」は,「要素のグループ」の名前であり,
    HTML文書中にはそのグループ内の要素を記述する。
    C言語の#defineマクロ展開に似ている。
    具体的な要素は,本文中で紹介する。
-->

<!ELEMENT TITLE - - (#PCDATA)>

<!ELEMENT %ブロック系要素; - - (%インライン系要素;)+ >
<!--
    回数:1以上(+)
-->

<!ELEMENT %インライン系要素; - - (#PCDATA | %インライン系要素;)+ >
<!-- [解説]
    順序:#PCDATAあるいは%インライン系要素;のどちらか一方,
       の1回以上の繰り返し
    回数:1,の1回以上の繰り返し
-->

<!--
    本当は「%ブロック系要素;」と「%インライン系要素;」の
    実体を定義する必要があるのだが,ここでは省略する。
-->

2.2.2. ブロック(段落)をくみ上げる

文書型定義によれば,HTML文書インスタンスは前書き(HEAD要素)と本文(BODY要素)に分けられます。そして,本文(BODY要素)はブロック系要素の繰り返しです。したがって,HTML文書を書くには,まずHEAD・BODY・「ブロック」をくみ上げることになります。

<HTML>
    <HEAD>
        <TITLE> title </TITLE>
    </HEAD>
    <BODY>
    </BODY>
</HTML>

ブロックは「段落」に相当するようなもので,表示の約束として,その要素の開始と終了で「改行」されます。

基本のブロック系要素は「見出し(Heading)」と「段落(Paragraph)」の2種類です。「見出し」は見出しレベルに応じて<H1> </H1>,<H2> </H2>,…<H6> </H6>の6種類の要素として記述します(ごくまれにH7要素があると紹介されることがありますが,W3Cの仕様では存在しませんのであしからず)。段落は<P> </P>と記述します。

<!ELEMENT H1 - - (%インライン系要素;)+ >
<!ELEMENT H2 - - (%インライン系要素;)+ >
<!ELEMENT H3 - - (%インライン系要素;)+ >
<!ELEMENT H4 - - (%インライン系要素;)+ >
<!ELEMENT H5 - - (%インライン系要素;)+ >
<!ELEMENT H6 - - (%インライン系要素;)+ >

<!ELEMENT P - o (%インライン系要素;)+ >
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>「おとぎ話を考える」</TITLE>
</HEAD>
<BODY>
<H1>1.ももたろうを考える</H1>
        <H2>1.1.出発まで</H2>
                <H3>1.1.1.はじまりはじまり</H3>
<P>桃太郎のお話は,おとぎ話に良くあるように,
「むかしむかし,あるところに」で始まります。
おじいさんは山へ柴刈りに,おばあさんは川へ洗濯に行きます。</P>
<P>ところで,最近の人は「柴」をご存知でしょうか。
柴とは無関係の生活をしているため,
「芝刈り」だと誤解している人もいるかもしれません。</P>
                <H3>1.1.2.桃太郎の誕生</H3>
<P>桃から生まれたので,桃太郎。なんて簡単なネーミングでしょう。
しかし,この簡明さこそが名前の本質を表わしています。…</P>
</BODY>
</HTML>

基本的な文書作成に必要な知識は,以上ですべてです。本当はまだ別のブロック系要素を紹介したいのですが,それは3章にまわします。

コラム:「見出しレベル」とは

見出しには大見出し,中見出し,小見出しといったレベルの違いがあります。別の表現をすれば,部・章・節・項などの階層になります。本書では,「1,2,3」といった最上位の見出し(第1レベルの見出し)と,その中にある「1.1,1.2,1.3」といった下位の見出し(第2レベルの見出し),「1.1.1,1.1.2,1.1.3」といった更に下位の見出し(第3レベルの見出し)があります。

HTMLでは,第1レベルの見出しはH1要素で表現します。第2レベルはH2,第3はH3であり,順にH6まで用意されています。

<H1>1.ももたろうを考える</H1>
        <H2>1.1.出発まで</H2>
                <H3>1.1.1.はじまりはじまり</H3>
                <H3>1.1.2.桃太郎の誕生</H3>
        <H2>1.2.鬼が島へ</H2>
                <H3>1.2.1.旅の仲間</H3>

HTMLの文法には,見出しの順序や付け方の制限はありません。しかし,通常はレベル1の見出しの次にレベル3の見出しがくるのはおかしなことだと思われます。

コラム:ありがちな誤解

見出し要素に関するもっとも多い誤解として,「Hx要素は文字のサイズを指定する」というものがあります。また,一歩正解に近づいたものの間違っているのは「見出し文字のサイズを指定する」という説明です。正しくは,「見出しレベルを指定する」です。表示のサイズはスタイルシートで自在に変更できます。

P要素に関するもっとも多い誤解は,「Pは2行改行する」です。また,その誤解の源になっている誤解は「Pには終了タグはなく,改行したいところに付ける」というものです。実は,HTML2.0成立以前には,P要素には終了タグがありませんでした。でも,それは昔のことです。現在は,段落の開始と終了を指定するように変更されています。また,改行幅――実際には「下の余白」――はスタイルシートで自在に変更できます。

2.2.3. インライン装飾をする

<!ELEMENT %インライン系要素 - - (#PCDATA | %インライン系要素;)+ >

1) STRONG要素

インライン系要素は,ブロック内部の文章の一部を装飾するための要素です。まずは,その代表格であるSTRONG要素を紹介します。STRONG要素は,強調したい部分を明示するために用います。

例として,次のような段落を考えます。

<P>私の誕生日は2月24日です。ひろのみやさんの翌日です。</P>

もし,この文章で「2月24日」を強調したいのであれば,その部分を(ただのP要素ではなく)STRONG要素として設定します。

<P>私の誕生日は<STRONG>2月24日</STRONG>です。
ひろのみやさんの翌日です。</P>

こうすると,WWWブラウザはこの部分を強調するべき語句(単語)だと理解します。なお,それをどのように強調表示するかは,スタイルシートで指定します。スタイルシートを省略した場合は,WWWブラウザの標準スタイルで整形されます(Netscape NavigatorやInternet Explorerでは太字表示されます)。

ほかにも強調したい語句(単語)があれば,それもSTRONG要素として記述しましょう。

<P>私の誕生日は<STRONG>2月24日</STRONG>です。
<STRONG>ひろのみや</STRONG>さんの翌日です。</P>

なお,すべてのブロック系要素の内部にインライン系要素を記述できます。すなわち,見出しの中にSTRONG要素を配置することも可能です。

<H1><STRONG>誕生日</STRONG>について</H1>

<P>私の誕生日は<STRONG>2月24日</STRONG>です。
<STRONG>ひろのみや</STRONG>さんの翌日です。</P>

文章を書いたときに心の中で「2月24日は強調したい」と思っても,思っただけでは読者もWWWブラウザもそれを理解することはできません。必ず明示してください。

2) CLASS属性の設定

もし,それぞれのSTRONG要素で強調する理由が違うのならば,その理由を明示したほうが文章表現が豊かになります。HTMLの場合,そのような違いの表現をCLASS属性(Attribute)の指定で行います。

<P>私の誕生日は<STRONG CLASS="DATE">2月24日</STRONG>です。
<STRONG CLASS="NAME">ひろのみや</STRONG>さんの翌日です。</P>

CLASS属性は,その名のとおり,個々の要素の所属するクラス(分類)を示すものです。この例では,DATE(日付)クラスとNAME(名前)クラスを用いました。クラスはあらかじめ用意されているわけではなく,文書記述者が任意に規定します。

スタイルシートを用いれば,要素の表示方法をクラス毎に設定できます。例えば,同じSTRONG要素でも,「DATE」は斜体,「NAME」は太字,というように表示結果を指定できます。したがって,適切にクラス属性を設定しておけば,より表現力豊かな文書になります。

<P>私の誕生日は<STRONG CLASS="DATE">2月24日</STRONG>です。
<STRONG CLASS="NAME">ひろのみや</STRONG>さんの翌日です。
弟の誕生日は<STRONG CLASS="DATE">4月28日</STRONG>で,
こちらは<STRONG CLASS="NAME">あきひと天皇</STRONG>の前日。</P>

<P>しかも,“ににんがし”と“しにがはち”です。
嘘っぽいけど,本当の誕生日です。</P>
コラム:クラス名の付け方

クラス名は「文章中での意味」に基づいて付けることが重要です。もし,期待するスタイル効果に基づいたクラス名「RED」「BIG」などを採用すると,文書構成にとっては何の意味も無いばかりか,最終的にはHTML内にスタイルを埋め込んだのと同じようにマークアップが混乱してしまいます。“大きくしたい”などの見栄え指定はスタイルシートに任せましょう。HTML文書には,見栄えを変える根拠(人名だから,など)を記述しましょう。

コラム:クラス名に使える文字

クラス名として使える文字に特に制限はありませんが,基本的には半角英数字のみで書いてください。「!"#%&.」などの記号は他の用途で使われることが決まっているので,避けたほうが無難でしょう。また,日本語も避けましょう。

なお,クラス名はスペースで区切って複数記述することが可能です。すなわち,

<STRONG CLASS="SPECIAL DAY">2月24日</STRONG>

という記述は,この要素が「SPECIAL」クラスかつ「DAY」クラスに所属していることをあらわします。

逆に言えば,スペースは文法的に予約された記号なので,クラス名には使えません。

なお,アンダースコア(_)は使用可能です。次の例は,「SPECIAL_DAY」という一つのクラス名として解釈されます。

<STRONG CLASS="SPECIAL_DAY">2月24日</STRONG>
【編者注】

ただし,アンダースコアを含むクラス名をセレクタとしてCSSで用いる場合には,\という文字で「エスケープ」する必要があります。例えば,上記の例のようなクラス名SPECIAL_DAYを与えられたSTRONG要素にスタイルを指定したい場合,CSSでは STRONG.SPECIAL\_DAY {color:red} のように書く必要があります。

なお,この注は著者自身の補足を参考にしています。

3) その他のインライン系要素

もう少しインライン系要素を紹介します(表2-1)。

表2-1. さらなるインライン系要素
要素名 相当する意味
Q 引用語句(quotation)。 坂本竜馬曰く,<Q>「日本の夜明けは…」</Q>
CITE 引用もとの記事や本のタイトル。 先月の<CITE>「Software Magazine」</CITE>には…
SUB 下付き文字(subscript)。 CO<SUB CLASS="times">2</SUB>
SUP 上付き文字(superscript)。 e = mc<SUP CLASS="power">2</SUP>

この中に望みの要素が用意されていない場合は,SPAN要素を用いて疑似的に表現してください。SPAN要素は意味の決められていないインライン系要素で,CLASS属性によってのみ意味を伝達します。SPAN要素は,スタイルシートで指定しない限り見栄えの変化を起こしません。

<H1><SPAN CLASS="number">1.</SPAN>はじめに</H1>
<H2><SPAN CLASS="number">1.1.</SPAN>背景</H2>

以上で,よく使われるインライン系要素はすべて紹介しました。なお,特殊な効果を生むインライン系要素としてIMG(インライン画像:Image),A(アンカー:Anchor),BR(改行:Line Break)があります。これらに関しては3章で解説します。

コラム:スタイル規定に関する要素に関して

すでにHTMLをご存知のかたは,フォントのサイズや色を指定するFONT要素をご存知だと思います。しかし,HTML4.0-StrictではFONT要素は破棄されました。なぜなら,そのような指定はスタイルシートで行うべきだからです。HTML文書インスタンス内部には文書の論理的な構成のみを記述し,見栄えはスタイルシートに分離しましょう。

なお,HTML4.0-StrictでもB要素(太字),I要素(斜体)などのスタイル規定系要素は採用されています。しかし,本書ではこれらもスタイルシートに押し込むべきだとして,あえて紹介しません。例えば,太字にする理由が「強調」であればSTRONG要素を用いるべきですし,理由が「引用タイトル」であればCITE要素を用いるべきです。これはWAI(http://www.w3.org/WAI/)も示唆している考え方です。

HTML文書を書く際には,次のように考えていただけると幸いです。

また,BLINK要素・MARQUEE要素などの「WWWブラウザ会社による独自拡張要素」の中には強力な見栄え効果を提供するものがありますが,これらの利用もお勧めできません。

コラム:スタイル規定に関する属性に関して

HTML3.2では,幾つかのスタイル規定のための属性が採用されました。これらのうち,よく使われているものの,HTML4.0-Strictで破棄されたものを表2-2に挙げます。

表2-2. HTML4.0-Strictで破棄されたスタイル規定に関する属性
属性名 機能 対象要素
ALIGN 水平位置そろえ H1〜H6,P,HR
ALIGN フロート指定 IMG
ALIGN 垂直位置そろえ IMG
BACKGROUND 背景画像 BODY
BGCOLOR 背景色 BODY
TEXT 一般文字色 BODY
LINK 未リンクのアンカー文字色 BODY
VLINK 既リンクのアンカー文字色 BODY
ALINK 指示最中のアンカー文字色 BODY
SIZE HR要素では,縦の幅 HR
WIDTH HR要素では,横の幅 HR
NOSHADE HR要素では,非立体表示 HR

これらの機能は,スタイルシートを用いればより高度に実現できます。たとえば,この属性では文字色・背景色を・背景画像を「本文全体として」しか指定できませんが,スタイルシートを用いれば任意の要素ごとに指定できます。また,「すべてのH1要素を右寄せ指定したい」ような場合,ALIGN属性の場合は文書中の一つ一つのH1要素に「ALIGN="RIGHT"」と書き加えなければいけませんが,スタイルシートを用いればたった1行のスタイル宣言「H1{text-align: right}」で済みます。

なお,「スタイルシート非対応WWWブラウザのためにこれらの属性を残したい」場合は,HTML3.2か4.0-Transitionalの文書型定義に従ってください。なお,本書の提示する文書型定義にこれらの属性を付け足したものは,4.0-Transitionalの仕様を満足します。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

2.3. Check Your HTML Document

だれが文章を書いても,かならず間違いが潜んでいるものです。単なる打ち間違いもあれば,文法の誤解によるミスもあるかもしれません。WWWで公開する文書は人の目に触れる文章ですから,文書記述者は公開前に間違いを取り除く努力をするべきです。ここでは,HTMLのマークアップ上のミスと,それを探し出す文法チェッカーを紹介します。

2.3.1. どんなミスがありえるか

1) たんなる打ち間違い

2) 親子関係の間違い

不正なインライン系要素
<STRONG>
<P>僕はビートルズが好きです。</P>
<P>しかし,ビートルズならばなんでも良いかといえば,そうでもありません。</P>
</STRONG>
正しいインライン系要素
<P><STRONG>僕はビートルズが好きです。</STRONG></P>
<P><STRONG>しかし,ビートルズならばなんでも良いかといえば,
そうでもありません。</STRONG></P>

3) 要素の入れ子の間違い

これは,インライン系要素を入れ子にしている時にありがちです。

不正な例:
<P>林業白書によれば,
<STRONG><Q>日本の森林率(面積割合)は67パーセント</STRONG>で,
世界でもトップレベルの森林保有国に位置づけられています</Q>。</P>
正しい入れ子構造:
<P>林業白書によれば,
<Q><STRONG>日本の森林率(面積割合)は67パーセント</STRONG>で,
世界でもトップレベルの森林保有国に位置づけられています</Q>。</P>

4) 順序,回数の間違い

HTMLの文書型定義では,順序・回数を制限される要素はごくわずかしかありません。そのせいか,順序・回数には制限があることを知らない人もいるようです。

5) DOCTYPE宣言の付け間違い

2.3.2. 文法チェッカーの紹介

Netscape Navigator,Internet ExplorerなどのWWWブラウザは,HTML文書の文法が間違っていても「エラーだ」などと警告してくれません。それどころか,ミスの存在を黙認して(?)なんとか表示してくれます。すなわち,よほど重大なミスが存在しない限り,HTML文書はなんとか表示されるものなのです。

しかし,「文法が間違ったHTML文書を書いても良い」わけではありません。WWWといえども人の目に触れるものとして文書を公開するのですから,礼儀として文法的なエラーは取り除いておくのが「義務」だと言えるでしょう。

HTML文書の文法をチェックするソフトウェアは複数存在しますので,これらを利用して間違いを見つけるとよいでしょう。

Weblint/jweblint

Neil Bowers氏が作成したチェッカー。Masayasu Ishikawa 氏が日本語化したものを作成しています(Masayasu Ishikawa 氏はW3Cのメンバーです)。

Weblintは厳密な文法チェッカーではないため,一部の文法的な誤りを見逃してしまいます。その代わり,文法的では無い側面としての「望ましくないマークアップ」,たとえば見出しレベルの不連続性などをチェックしてくれます。

Libra

矢野啓介氏が作成したチェッカー。文書型定義にもとづいた厳密な文法チェックを行います。また,HTML文書の入れ子構造を図として表示してくれるため,視覚的に構造を確認できます。

Another HTML-lint

k16氏が作成した文法チェッカー。文法チェックに加えて,独自のルールにしたがって文書構造の採点をしてくれます。数多くの“文法以外の”チェック項目が設けられていますので,一度目を通してみると勉強になるでしょう。