3. some more HTML

本章の目次

3章では,もう少しだけHTMLに関する取り決めを説明します。しかし,スタイルシート記述にとっては本章の内容は「余談」です。すでにHTMLに詳しい人や早くCSSについて知りたい人は,本章を読み飛ばしても構いません。

3.1. some more rules as SGML

3.1.1. タグ記述ルール

1) 開始タグ・終了タグの省略できる要素

基本的には,すべての要素において「開始タグ」と「終了タグ」を明確に記述しなければいけません。しかし,その開始や終了が明確である場合で,かつ文書型定義が許可している要素に限り,開始タグや終了タグの記述を省略できます。なお,文書型定義における要素名の直後の二つの記号が「省略の可不可」を示しています(図3-1)。

2章で紹介した要素では,BODY要素とHEAD要素が「開始タグ」も「終了タグ」も省略可能です。また,P要素は「終了タグ」のみ省略可能です。逆に,それ以外の要素のタグはすべて明示する必要があります。

図3-1 文書型定義におけるタグ省略の可不可の提示
【図3-1】――例:「<!ELEMENT P - o (%インライン系要素;)+>」Pのあとの二つの記号はそれぞれ開始タグ,終了タグが省略不可(-)であるか省略可(o)であるかを示します。
コラム:要素の開始や終了が明確である場合とは

文書型定義で「省略可」となっていても,無条件にタグを省略できるわけではありません。

開始タグが省略できるケース

順序的にその要素の開始が明確なとき。

  • その親要素の開始が明確で,かつ順序的にその要素しかありえないとき(HTML要素の次にはHEAD要素しか書けないため,HTML要素の開始タグの直後にはHEAD要素の開始タグがくることは明確。)
  • その直前の要素の終了が明確で,かつ順序的にその要素しかありえないとき(HEAD要素の終了タグがあれば,そこでBODY要素が始まることは明確。)
終了タグが省略できるケース

順序的にその要素の終了が明確なとき。

  • 自分の下位要素でない要素の開始タグが現われるとき(HEAD要素にはPやH1は書けないので,これらが現われればHEADの終了は明確。もちろん,BODYが開始すればHEADの終了は明確。)
  • 自分の親要素の終了タグが現われるとき(BODY中の最後のPは,BODYの終了タグがあればPの終了は明確。)
コラム:お勧めできる「タグ」の省略

筆者は,あまりタグを省略しないことをお勧めします。たとえば,HTML・HEAD・BODY要素の開始タグ・終了タグを省略すると,文書構成がわかりにくくなるので望ましくないと思います。あえてお勧めできる「この場合だったら間違いなく省略してよい」ケースを挙げると,以下の二つだけになります。

<P>さいきん忙しいので,書きたいことが溜まっている。
溜まりすぎて,忘れちゃいそう。
<P>忘れると困るので,タイトルだけでも書きとめておこう</P>
<UL>
    <LI>
        <P>Java関連</P>
        <UL>
            <LI>Java思想とJava言語,JavaVMの関係
            <LI>理想はどこまで実装されているか
            <LI>Sunは絶対正義なのか
        </UL>
    </LI>
    <LI>PRINCE音楽の構成学的な見地からの評価
    <LI>Netscape社だって必ずしも正義ではない
    <LI>IEを人に奨める際の注意事項
</UL>

もちろん,本当はもっと多くのケースで省略が可能です。しかし,筆者は「省略しない」ことをお勧めします。(UL,LI要素に関しては3.2.1.を参照)

2) 空要素

先ほどはタグを省略できる場合を紹介しましたが,実は「終了タグを省略しなければならない(書いてはいけない)」よう指定されている要素も存在します。それらは,後に紹介するIMG要素(画像)など,文字以外のものを表現する要素であり,「空要素(Empty Element)」と呼ばれます。空要素は開始タグのみを記述します。文書型定義では,空要素の子要素は「EMPTY」と書かれています(図3-2)。

図3-2 文書型定義における空要素の提示
<!ELEMENT IMG - o EMPTY >
<!ELEMENT BR - o EMPTY >

3) 属性の記述

属性(Attribute)とは,要素に与えあられる付加的な情報のことで,開始タグの中にのみ記述します。終了タグには属性に関する情報は記述しません。属性値はクォーテーション・マークで囲みます。普通はダブル・クォーテーション(" ")をもちいますが,シングル・クォーテーション(' ')でも構いません。

<要素名 属性1="属性値" 属性2="属性値">文字列</要素名>

各要素がもっている属性は文書型定義で定義されています。

なお,HTML文書の場合,属性指定はあくまでも付加的な位置づけになっており,ほとんどの属性指定が省略可能です。また,いくつかの属性は見栄え調整のためのものであり,SGML的には望ましくありません。したがって,闇雲にすべての属性を覚えることは得策ではありません。本書では,省略不可の属性とCLASS属性など必要最低限のものに限って紹介します。

コラム:アクセス性確保に関する考慮

本書は,WAIが推奨する「アクセス性の確保」を実現するために必要な幾つかの属性(TITLE属性など)に関して言及していません。

本書で説明する範囲のHTML文書であれば,本書の指針だけで十分なアクセス性が確保されています。しかし,TABLEやクライアントサイド・マップなどを用いた複雑な文書を書く場合には,一度WAIの指針に目を通されることをお勧めします(http://www.w3.org/WAI/)。

コラム:属性値の簡略記述法

たくさんのHTML文書を書いていると,属性値を囲む" "付けが面倒になることがあります。HTMLでは,以下の場合には省略して良いことになっています。

ダブルクォーテーションの省略:
値が「a-z, A-Z, 0-9, -(ハイフン), .(ピリオド)」のみからなる場合
省略した例,できない例:
<P ALIGN=LEFT>〜</P>
<HR SIZE=5 WITDH="100%">

また,属性値が一つしか規定されていない属性(HRのNOSHADE属性など)に関しては属性名が省略できます。ちなみに,4.0までのHTMLに限って言えば,このような場合は属性名と属性値が同一にされており,見た目には属性名を省略したのか属性値を省略したのか区別できません。

<HR NOSHADE>

このコラムで紹介したSIZE,WIDTH,ALIGN,NOSHADE属性はすべて見栄え調整のための属性です。HTML3.2で採用されたものの,HTML4.0-Strictでは破棄されました。

4) 大文字・小文字および全角半角

タグ内部の要素名・属性名を記述するアルファベットの大文字・小文字は区別されません。ただし,必ず半角英数字を用いなければいけません。記号「<」「</」「>」「=」「" "」「' '」および空白に関しても半角英数字を用いてください。

3.1.2. 実体参照に関して

記号「<」「>」「</」はタグを書くために予約されているため,HTML文書のソースには(タグ以外の用途では)記述できません。他にも幾つか記述できない記号があるのですが,これらの記号は「実体参照(entity reference)」と呼ばれる一種の別名を用いて記述しなければいけません(C言語の#defineマクロ展開に似ています)。

実体参照は「&(アンド)」に始まり,「実体名」を書き,「;(セミコロン)」に終わります。なお,実体名は大文字小文字が区別されるので注意が必要です。

実体参照も文書型定義で定義されています(表3-1)。

表3-1 良く使われる実体参照
記述 表示 備考
&amp; & ampersandの略
&lt; < less thanの略
&gt; > greater thanの略
&quot; " quotationマークの略

3.1.3. 区切り文字(スペース,タブ,改行)に関して

HTML文書内部では,単語の区切り文字としてスペース・タブ及び改行を利用します。(ただし,日本語文字の空白は区切り文字ではありません)

区切り文字をソース中に何個連続して記述しても,読解時にはひとつの区切りとしてのみ処理されます。すなわち,次の二つのソースは同一の内容を表現しており,表示結果は同じになります。

<H1>1.ももたろうを考える</H1>
<H2>1.1.出発まで</H2>
<H3>1.1.1.はじまりはじまり</H3>
<P>桃太郎のお話は,おとぎ話に良くあるように,
「むかしむかし,あるところに」で始まります。
おじいさんは山へ柴刈りに,おばあさんは川へ洗濯に行きます。</P>
<H1>1.ももたろうを考える</H1>
    <H2>1.1.出発まで</H2>
        <H3>1.1.1.はじまりはじまり</H3>
        
        <P>桃太郎のお話は,おとぎ話に良くあるように,
        「むかしむかし,あるところに」で始まります。
        おじいさんは山へ柴刈りに,おばあさんは川へ洗濯に行きます。</P>

HTML文書のソースでは,ソースとして見やすいように(表示に気兼ねせず)空白や改行を挿入して構いません。

3.1.4. コメントアウト

HTML文書のソースを読む人(時には自分自身)のために,コメントを“WWWブラウザが表示できない形で”記述したいことが珠にあります。しかし,HTMLの仕組み自身にはコメント様式が用意されておらず,SGMLで文書型宣言を書く際のコメントアウトの書式を流用しています。

文書型定義は「<!」と「>」の間にかかれますが,この中の「--」(ハイフン2つ)と「--」で囲まれた部分は,コメントアウトされたものとして通常の処理から除外されます。

<!-- 次のリンクは,作成者に連絡して許可をもらった-->
<P><A HREF="http://www.foo.bar.jp/people/ks/">すみけんリソース!</A></P>

一つの「<!」と「>」の間に複数のコメントを記述することもできますが,コメントはあくまでも「--」が対になっていなければいけません。コメント中にはハイフンを記述しないのが最も安全でしょう。

正しいコメントアウトの様式:
<!-- リンク --  -- 作成者に連絡して許可をもらった-->
不正なコメントアウトの様式:
<!-- リンク  -- 作成者に連絡して許可をもらった-->
コラム:コメント中の開始タグ・終了タグ

一部のWWWブラウザは,コメント中に終了タグがあるとそこでコメントが終了したと勘違いする,といわれています。なお,Netscape Navigator4.0とInternet Explorer4.0は正しくコメントアウトを解釈しました。

一部のWWWブラウザは,このコメントの解釈を失敗する:
<!--
    次のリンクは,まだ未許可のためコメントアウトしておく。
    <P><A HREF="http://www.foo.bar.jp/people/ks/">
    すみけんリソース!</A></P>
-->

3.2. some more ブロック系要素

この節では,もう少しだけブロック系要素を紹介します。

<!ENTITY % ブロック系要素 
    " UL | OL | BLOCKQUOTE | DIV | HR |
      H1 | H2 | H3 | H4 | H5 | H6 | P | ADDRESS | PRE  ">

3.2.1. ブロックを含みうるブロック系要素

ここでは,子要素としてブロック系要素を含む要素を紹介します。これらの要素によって,より複雑な文書構造を表現できます。

1) リスト(UL,OL)

<!ELEMENT UL - - (LI)+ >
<!ELEMENT OL - - (LI)+ >
<!ELEMENT LI - o (%インライン系要素;+ | %ブロック系要素;+ ) >
<!--
    ULやOLは内部にLIしか記述できない。
    LIはULやOLの直下のみに記述できる。
    LIの終了タグは場合によっては省略できる。

    LIの子要素は,インライン系要素一つかブロック系要素1つ以上。
-->

UL(Unordered List)要素は箇条書きリスト,OL(Ordered List)要素は数え上げリストに相当します(図3-3)。

図3-3 リスト
箇条書きリスト(UL)
 ・りんご
 ・ごりら
 ・らっぱ
数え上げリスト(OL)
    1.りんご
    2.ごりら
    3.らっぱ

UL, OLの中には,項目に相当するLI(List Item)要素だけが記述できます。LI要素の中には任意のブロック系要素もインライン系要素も記述できます。したがって,LIの中にさらにリストを作成することも可能です(図3-4)。

図3-4 リストの入れ子
<P>「果物リスト」</P>
<UL>
  <LI>
      <P>みかん</P>
      <OL>
          <LI>三ヶ日みかん</LI>
          <LI>四日市みかん</LI>
      </OL>
  </LI>
  <LI>
      <P>なし</P>
      <OL>
          <LI>二十世紀なし</LI>
          <LI>幸水</LI>
      </OL>
  </LI>
</UL>

「果物リスト」
・みかん
    1.三ヶ日みかん
    2.四日市みかん
・なし
    1.二十世紀なし
    2.幸水

2) 引用ブロック(BLOCKQUOTE)

<!ELEMENT BLOCKQUOTE - - (%ブロック系要素;)+ >

HTML文書内に他の書籍などからの引用を記述する場合,BLOCKQUOTE要素として記述します。BLOCKQUOTE要素内には任意のブロック系要素が記述できます。なお,2章で紹介したQ要素は,ブロック系要素(P要素など)内部に引用語句を入れ込む場合に用います。BLOCKQUOTE要素はブロックごと引用する場合に用います。

<P><CITE>日本ユニテックSGMLサロン(1995)はじめてのSGML:
285pp,技術評論社,東京都</CITE>の11ページ
<Q>1章:SGMLへの誘い</Q>からの引用です。

<BLOCKQUOTE>
    <H1>1章:SGMLへの誘い</H1>
    <P>この章では,読者のみなさんにSGMLのイメージを
    つかんでいただくことを目的とし,
    SGMLが登場した背景,その利用目的を説明します。</P>
</BLOCKQUOTE>
コラム:ありがちな誤解

BLOCKQUOTE要素に関する誤解として,「本文よりも余分にマージンを取るためのもの」というものがあります。実際には,各要素を表示する際のマージンはスタイルシートで自在に指定できます。なお,BLOCKQUOTE要素はあくまでも「引用した部分をしめすブロック」であり,マージンとは何の関係もありません。

3) 任意ブロック(DIV)

<!ELEMENT DIV - - (%ブロック系要素; )+ >

DIV(Division)要素は,「特定の意味を持たない」ブロックです。2章で紹介したSPAN要素のブロック版です。望みの内容を意味するブロック系要素が用意されていない場合は,DIV要素に適切なCLASS属性を設定して,疑似的に表現してください。

<DIV CLASS="CHAPTER1">
<H1>私のPC</H1>
    <P>私のPCの宣伝文句は,かの長島茂雄さんがにこやかに語っていました。</P>
    <BLOCKQUOTE>
        <P>「サポート体制で選べば,フローラ。」</P>
    </BLOCKQUOTE>
    <P>そう,日立のフローラです。</P>
    <P>1994年に購入したため,いまやローエンドなスペックです。</P>
</DIV>
<DIV CLASS="CHAPTER2">
<H1>私のシーケンサ</H1>
    <P>私のシーケンサの宣伝文句は,たしかこんな感じです。</P>
    <BLOCKQUOTE>
        <P>「ビデオテープサイズの音源一体型シーケンサ。」</P>
    </BLOCKQUOTE>
    <P>そう,ヤマハのQY-10です。</P>
    <P>おもちゃみたいな見た目のわりには,しっかりした音が鳴ります。
    僕は1997年現在でも活用しています。</P>
</DIV>

3.2.2. 特殊なブロック系要素

1) 水平線(HR)

<!ELEMENT HR - o EMPTY>

トピックの区切りを表現するための要素として,HR要素(Horizontal Rule:水平線)が挙げられます(図3-5)。

図3-5 HR要素
……
<P>以上をもって,説明を終わります。</P>
<HR>
<H1>おわりに</H1>
……
【図3-5】――<HR>と記述されたところに水平線が引かれます。

3.2.3. 単純ブロック系要素

ここでは,その子要素としてインライン系要素のみを許すブロック系要素を紹介します。2章で紹介したH1〜H6要素,P要素もここに区分されます。

1) アドレス(ADDRESS)

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

連絡先に相当する要素です。通常は,文書の作者への連絡先を記述します。e-mailアドレスを添えるのが一般的でしょう。

<HR>
<P>ご意見ご要望及び苦情はE-MAILにて</P>
<ADDRESS>
<A HREF="mailto:ks@foo.bar.or.jp">e-mail to : ks! (ks@foo.bar.or.jp)</A>
</ADDRESS>
<HR>

2) 事前整形ブロック(PRE)

<!ELEMENT PRE - - (%インライン系要素;)+  -(IMG | SUB | SUP )>
<!--
    その子要素としてIMG,SUB,SUPを禁止する。
-->

プログラムのソースや詩などでは,特殊な位置での改行や余白が要求されます。それら特殊なブロックに相当する要素を全て用意するわけにはいかないため,HTMLでは「ソースの空白・タブ・改行をそのまま表示する」ブロックすなわちPRE(Preformatted Text)要素を用意しています。各種の特殊な改行や余白はあらかじめソース中で整形し,PRE要素と指定してください。

<PRE CLASS="JAVACODE">
    public boolean action(Event e, Object o){
        if (e.target == add_b){
            ballManager.add();
            return true;
        } else 
        if (e.target == delete_b) {
            ballManager.delete();
            return true;
        } else
        return super.action(e, o);
    }
</PRE>

PREブロックの中にはインライン系要素が記述可能ですが,ソースの事前整形を崩しうる要素,すなわちIMGやSUPなど幾つかの要素は排除指定されています。

3.3. some more インライン系要素

ここでは,特殊な使われかたをするインライン要素(A,IMG,BR)を紹介します。

<!ENTITY % インライン系要素
    " STRONG | Q | CITE | SUB | SUP | SPAN | A | IMG | BR | #PCDATA">

3.3.1. アンカー(A)

<!ELEMENT A - - (%インライン系要素;)  -(A) >
<!--
    Aの子要素としてAを禁止する。すなわち,AのなかにAは入れられない。
-->
属性名属性値省略時の値備考
HREFURL実装依存リンク先のURL。
NAME文字列実装依存要素に文書内での“名前”を指定する。

A(アンカー:Anchor)要素には大きく二つの使い方があります。ひとつは,ハイパーリンクを実現するためにHREF(ハイパーリファレンス)属性を用いるものです。もうひとつは,文書内に“内部名”を付けるためにNAME属性を用いるものです。

1) ハイパーリンク

WWWの心臓でもあるハイパーリンクは,このA要素で指定します。ハイパーリンク機能をあえて解説すれば,ユーザがA要素を指示(クリックなど)した際にWWWブラウザがそのHREF属性に指定されたURLを自動的に読み込む機能です。

<P>本書は<A HREF="http://www.gihyo.co.jp/">技術評論社</A>から
出版されます。</P>
コラム:望ましくないアンカー文字列

暗黙の了解として,ハイパーリンク先の内容は,表示されているアンカー文字列の内容と関連するものになっています。すなわち,「技術評論社」という文字がアンカー文字列であれば,そのリンク先はhttp://www.gihyo.co.jp/や誰かが技術評論社について書いたHTML文書などであるのが普通です。

逆に言えば,A要素を記述するときは,アンカー文字列の内容を読んだだけでリンク先が想像できるものを選ぶべきです。ということは,

「技術評論社に関しては<A HREF="http://www.gihyo.co.jp/">こちら</A>」

という書き方は望ましくありません。いったい「こちら」って何でしょう? これは「here症候群」と呼ばれる一種の流行り(?)病です。次のように修正するべきでしょう。

「<A HREF="http://www.gihyo.co.jp/">技術評論社に関してはこちら</A>」

「技術評論社に関しては
    <A HREF="http://www.gihyo.co.jp/">http://www.gihyo.co.jp/</A>」

「<A HREF="http://www.gihyo.co.jp/">技術評論社に関して</A>」

また,「こちらをクリック」という表現も望ましくありません。WWWを利用する誰もがマウスを用いているとは限りません。ではどのように表現するべきか? こたえは,「こちら」という不自然な言葉を排除すれば自ずと明らかでしょう。そう,リンク先を意味する単語だけを書けば良いのです。

2) 内部名

例えば,http://www.foo.com/bar/test.html に次のような記述があるとします。

<H1><A NAME="intro">1.はじめに</A></H1>

この場合,「http://www.foo.com/bar/test.html#intro」はこの部分に相当します。すなわち,HTML文書に内部名NAMEがセットされている場合,その文書を指すURLに#NAMEを追加することによって,相当する部分を直接指示することができます。WWWブラウザはURL#NAMEを指示されると,その部分を表示しようとします。

これを利用すれば,リンク付きの目次などを表現できます。

<H1>目次</H1>
<UL>
    <LI><A HREF="test.html#intro">1.はじめに</A>
    <LI><A HREF="test.html#main">2.スタイルシートの可能性</A>
    <LI><A HREF="test.html#outro">3.さいごに</A>
</UL>
コラム:ID属性による内部名表現

以上のようにA要素には二つの使い方があるのですが,両者は全く異なる性格の仕事を担っています。これは混乱の元です。そこでHTML4.0からは,A要素ではなく,各要素のID属性を用いて文書内部名を指定できるように変更されました。

<H1 ID="intro">1.はじめに</H1>

W3Cは「ID属性のほうがNAME属性よりも好ましい」とは明言していませんが,筆者は「ID属性が望ましい」と考えています。これからは,A要素はハイパーリンクにのみ利用しましょう。

ID属性は,CLASS属性と同じくBODY要素のほぼすべての子要素に指定できます。しかし,Netscape Navigator4.0はこの機能をサポートしていません(見当違いのところを表示してしまいます)。Internet Explorer4.0はサポートしています。なお,互換性確保のために,A要素のNAME属性もこれまでどおり活用できます。

コラム:アンカーの入れ子

アンカー要素のなかにはインライン系要素が記述できますが,A要素は排除されています。すなわち,アンカー同士を入れ子にすることは不正です(図3-6)。

図3-6 不正なA要素
<P>もし<A HREF="music.html">音楽に興味があれば,
<A HREF="zappa.html">特にフランク・ザッパに</A>興味があれば,
</A>私の書いた文章を読んでください。</P>

このルールは,NAMEとして用いる場合でも変わりません。

3.3.2. インライン画像(IMG)

<!ELEMENT IMG - o EMPTY >
属性名属性値省略時の値備考
SRCURL省略不可画像ファイルを指すURL
ALT文字列省略不可代替文字

HTMLのマークアップ自体では絵をかけませんが,既存の画像ファイルを文書に埋め込むことは可能です。画像を指定する要素はIMG(Image)要素です。画像は語句ではありませんので,空要素です。

1) SRC属性

個々のIMG要素は,実際にはSRC(ソース:source)属性で指示される画像に置き換えられて表示されます。「どんな画像形式のファイルでも指定できる」とは言えませんが,W3CはGIF・JPEG・PNGを想定しています。なお,PNGはW3Cが推奨する画像フォーマットです。余談ですが,MOSAICの時代には,インライン画像はGIFのみでした。

コラム:PNGとは

PNG(Portable Network Graphics:発音は「ping」と同じ)は,GIFやJPEGなどと同じく,画像圧縮形式のひとつです。フルカラーRGB情報に加えてα値(色の透明度)も保持でき,γ(輝度)補正も可能になっています。GIFと同様にインタレース表示が可能です。また,JPEGとは異なり,完全可逆圧縮になっています。

一般利用者には関係の無い話かもしれませんが,実はGIFフォーマット(の内部のLZW圧縮アルゴリズム)はユニシスおよびコンピュサーブの特許になっており,GIFを扱うソフトウェアを販売する場合には,彼らにロイヤリティを支払わなければならないことになっています。彼らはGIFが世界に浸透した後で突然ロイヤリティを請求し始めたため,業界では大変な物議になりました。そこで,GIFよりも優れていてしかも無料のものを作ろう! として開発されたのがPNGなのです。PNGの名前には,「PNG's Not GIF」という叫びが込められています。

PNGの仕様はW3C Recommendationとして公開されており,誰もロイヤリティを要求できません。ちなみに,Internet Explorer4.0もNetscape Navigator4.0もPNGを表示できます。なお,Netscape Navigator2.0〜3.xも,プラグインによってPNGを表示可能です。

PNGの情報は,以下のサイトからで入手できます。各種画像をPNGフォーマットに変換できるソフトウェアも,同サイトで紹介されています。

2) ALT属性

画像を表示できない場合でもなんらかの情報を提供するために,IMG要素にはALT(alternative)属性が用意されています。画像を表示しないWWWブラウザは,画像の代わりにALT属性に指定された文字列を表示します。したがって,ALT属性に画像を説明するような文を指定しておくと,より多くの人に情報を提供できることになります。特に,画像にハイパーリンクを仕掛けてある場合は,この情報が重要です。

ところで,代替文が必要ない場合は,「ALT=""」と記述してください。これは「この画像には特に意味はありません」という積極的なアピールです。先に挙げたような画像を処理できないWWWブラウザは,この指定を元に不必要な情報を除去します(図3-7)。

図3-7 IMG要素の画像off時の表現
<H1><IMG SRC="mark.gif" ALT="">業績発表</H1>
<P>今年の業績を,以下のようなグラフとして示します。</P>
<P><IMG SRC="score.gif" ALT="[業績の表]"></P>
<P><A HREF="score.jpeg">より詳しい画像</A>も別途用意しました。</P>
【図3-7】――画像の代わりにALT属性の値が表示されます。ALT=""のときには何も表示されません。
コラム:余分な画像は要らない

全てのWWW利用者が画像を表示したいとは限りません。たとえば,画像は文章よりもデータサイズが大きく,ネットワークから取り込むには時間がかかるため,WWWブラウザを「普段は画像を表示しない」ように設定している人もいます。また,そもそも文字しか表示できないWWWブラウザや,眼の見えない人のための音声読み上げ式WWWブラウザというものも世の中には存在します。このような人たちを考慮して,画像に頼り過ぎない文書を作成することも大事です。

コラム:WIDTH属性とHEIGHT属性
属性名属性値省略時の値備考
WIDTH数値実装依存画像表示の縦ポイント数。HTML3.2から。
HEIGHT数値実装依存画像表示の横ポイント数。HTML3.2から。

HEIGHT属性・WIDTH属性を指定すると,画像の表示サイズを変更できます。省略した場合は,WWWブラウザは「画像本来のサイズ」が指定されていると判断します。

WWWブラウザは,画像データ読み込み終了よりも前に,この指定の情報をもとにレイアウトを決定し文書を表示します。すなわち,読者の待ち時間を短くできるのです。Netscape Nagivator4.0やInternet Explorer4.0はこの機能をサポートしています。画像サイズを変更するつもりのない場合でも,サイズを明示しておくと良いでしょう(図3-8)。

図3-8 HEIGHT属性,WIDTH属性のあるIMG要素
【図3-8】――画像が読み込まれる前でも,最終的なレイアウトを表示します。
<H1><IMG HEIGHT="15" WIDTH="15" SRC="mark.gif" ALT="">業績発表</H1>
<P>今年の業績を,以下のようなグラフとして示します。</P>
<P><IMG HEIGHT="30" WIDTH="50" SRC="score.gif" ALT="[業績の表]"></P>
<P><A HREF="score.jpeg">より詳しい画像</A>も別途用意しました。</P>

3.3.3. 強制改行(BR)

<!ELEMENT BR - o EMPTY >

通常の文は,表示領域の幅にあわせて自動折り返しされます。しかし,何かの事情で強制改行したい場合は,BR(Line Break)要素を利用します。BR要素は空要素です。

<P>童謡の<CITE CLASS="SONGNAME">「小さい秋」</CITE>をご存知でしょうか。</P>
<BLOCKQUOTE CLASS="SONG">
    <P>
    誰かさんが,誰かさんが,<BR>
    誰かさんが見つけた。<BR>
    小さい秋,小さい秋,<BR>
    小さい秋見つけた。
    </P>
</BLOCKQUOTE>
コラム:改行と段落の違い

BR要素はあくまでも強制改行であって,段落を作る要素ではありません。

そもそも,段落は「改行」で作られる,というのは単なる思い込みです。たとえば,新聞の小さなコラム欄のように,段落で改行せずに「▼」マークを示すだけの場合もあります。すなわち,段落はP要素で指示し,その表示方法はスタイルシートで指定するものです。BR要素は,単に強制改行を意味するに過ぎません。

3.4. HEAD要素の子要素

HEAD要素の子要素は,2章で紹介したTITLE要素以外はすべて応用的な要素です。その機能はあまりに多岐にわたるために,本書の範疇を超えます。そこで本書では,説明をスタイルシートを用いる上で必要な範囲に限定します。とはいえ,本章では文書型定義的な紹介にとどめ,活用のための解説は4章で行います。

<!ELEMENT HEAD o o ( TITLE )   +( STYLE | LINK ) >
<!--
    STYLE,LINKは順序を問わず何個でも記述できます。
-->

3.4.1. STYLE要素

<!ELEMENT STYLE - - (%スタイルシート;)>
属性名属性値省略時の値備考
TYPE文字列省略不可スタイルシートの種類を明示。4.0より。
MEDIA文字列実装依存再生メディアの指定
TITLE文字列実装依存文書内におけるスタイルシートのタイトル

スタイルシートをHTML文書内部に記述するときに用いる要素です。TYPE属性,MEDIA属性,TITLE属性の意味を含め,詳しくは「4.3. HTML文書との連携」を参照してください。

3.4.2. LINK要素

<!ELEMENT LINK - o EMPTY >
属性名属性値省略時の値備考
HREFURL実装依存リンク先URL。省略しては意味をなさない。
REL文字列実装依存現在の文書から見たリンク先の説明
REV文字列実装依存リンク先から見た現在の文書の説明
TYPE文字列実装依存データの種類を明示。4.0より。
MEDIA文字列実装依存再生メディアの指定。4.0より。
TITLE文字列実装依存リンク先を指す名前

LINK要素は,現在の文書と関連するリソースを列挙するための要素です。どのような意味で関連しているのかは,LINK要素のREL(Forward Relationship)・REV(Reverse Link)属性で指定します(表3-2)。スタイルシートファイルも「関連文書」の一種としてLINK要素で指定できます。詳しくは「4.3. HTML文書との連携」で解説します。

表3-2 HTML4.0仕様書が紹介するREL,REV属性の属性値
キーワード意味
ALTERNATE現在の文書の代替文書――別言語訳など
STYLESHEETスタイルシート
ALTERNATE STYLESHEET代替スタイルシート
START現在の文書が所属する一連の文書の「はじめ」
NEXT次の文書
PREV前の文書
CONTENTS現在の文書が所属する一連の文書の目次
INDEX現在の文書の目次
GLOSSARY現在の文章に対する「用語集」
COPYRIGHT現在の文書の版権を説明する文書
CHAPTER現在の文章の中の「章」になる文書
SECTION現在の文章の中の「節」になる文書
SUBSECTION現在の文章の中の「項」になる文書
APPENDIX現在の文書が所属する一連の文書の「索引」
HELP現在の文書に関するヘルプ文書
BOOKMARKしおり(いわいるリンク集で,文書に対する「索引」のようなもの)

スタイルシートに限らず,NEXTやINDEXを適切に記述しておくと,文書ナビゲートに関して幾つかの利点が得られます。

<HEAD>
<TITLE>TEST</TITLE>
<LINK REL="STYLESHEET" TYPE="text/css" MEDIA="SCREEN" TITLE="STANDARD" HREF="normal.css">
<LINK REL="NEXT" TITLE="SECTION2" HREF="foo2.html">
</HEAD>