7 HTML文書の全体構造

目次

  1. HTML文書の構造の概説
  2. HTMLバージョン情報
  3. HTML要素
  4. 文書のヘッダ
    1. HEAD要素
    2. TITLE要素
    3. title属性
    4. メタデータ
  5. 文書本体
    1. BODY要素
    2. 要素識別子: id属性とclass属性
    3. ブロックレベル要素と行内要素
    4. 要素のグループ化: DIV要素とSPAN要素
    5. 見出し: H1H2H3H4H5H6要素
    6. ADDRESS要素

7.1 HTML文書の構造の概説

1つのHTML 4文書は、次の3つの部分から構成される。

  1. HTMLバージョン情報を含む行。
  2. 宣言的ヘッダの部分 (HEAD要素として区切られる)。
  3. 文書の実際のコンテンツを含む、本体。 本体は、BODY要素か FRAMESET要素のどちらで実装されてもよい。

空白類(space、new line、tab、及びコメント)は、上記3部分の前後どちらに出現してもよい。 2番目と3番目の部分は、 HTML要素として区切られる。

簡単なHTML文書の例を示す。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
   <HEAD>
      <TITLE>はじめてのHTML文書</TITLE>
   </HEAD>
   <BODY>
      <P>Hello world!
   </BODY>
</HTML>

7.2 HTMLバージョン情報

適正HTML文書には、どのバージョンのHTMLであるかの宣言がある。 文書型宣言が、当該文書の文書型定義(DTD)の名前を示す ( [ISO8879]参照)。

HTML 4.01仕様は、3つのDTDを規定しており、著者は自分の文書に、次の3つの何れかの文書型宣言を含めねばならない。 各DTDは、サポートする要素が異なってる。

各文書型宣言に含まれるURIは、ユーザエージェントに対して、DTDと、必要な実体集合すべてをダウンロード可能にする。 次の相対URIは、HTML 4の、DTDと実体集合を指し示している。

公開識別子とファイルの結びつきは、Oasis Open Consortium ( [OASISOPEN]参照)の推奨に従ったカタログファイルを用いて指定できる。 HTML 4.01のサンプルカタログファイルは、HTMLのためのSGML参照情報を記した節の冒頭に含まれている。 宣言の末尾の2文字は、DTDが書かれた言語を示す。HTMLでは、これは常に英語("EN")である。

注意。 1999年12月24日版のHTML 4.01において、HTML作業グループは次の方針を確約する。

これはつまり、文書型宣言において、著者は最新版のHTML 4を指し示すシステム識別子を安全に用い得るということを意味する。 著者はまた、特定DTDで検証することが求められる際には特定日付版のHTML 4 DTDを示すシステム識別子を用いてもよい。 W3Cは、特定日付版について、原形式のまま原アドレスで無期限に得られるよう、あらゆる努力を払う。

7.3 HTML要素

<!ENTITY % html.content "HEAD, BODY">

<!ELEMENT HTML O O (%html.content;)    -- document root element -->
<!ATTLIST HTML
  %i18n;                               -- lang, dir --
  >

開始タグ: 省略可能、終了タグ: 省略可能

属性定義

version = cdata [CN]
推奨しない。 この属性の値は、当該文書を支配するHTML DTDのバージョンを指定する。 文書型宣言が提供するバージョン情報と重複し冗長となるため、この属性は推奨しない。

別途定義がある属性

文書型宣言の後、HTML文書の残りの部分はHTML要素の内容である。 従って、典型的なHTML文書は、次の構造を持つ。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
…ヘッダ、本体、等がここに含まれる…
</HTML>

7.4 文書のヘッダ

7.4.1 HEAD要素

<!-- %head.misc; defined earlier on as "SCRIPT|STYLE|META|LINK|OBJECT" -->
<!ENTITY % head.content "TITLE & BASE?">

<!ELEMENT HEAD O O (%head.content;) +(%head.misc;) -- document head -->
<!ATTLIST HEAD
  %i18n;                               -- lang, dir --
  profile     %URI;          #IMPLIED  -- named dictionary of meta info --
  >

開始タグ: 省略可能、終了タグ: 省略可能

属性定義

profile = uri [CT]
この属性は、1つ以上のメタデータプロファイルの所在を、空白区切りで指定する。 本仕様は列挙されたもののうち最初のURIだけを有効としているが、ユーザエージェントは、将来的な拡張のために、この値をリスト形式であると考える必要がある。 プロファイルについては、後述のメタデータの項で説明する。

別途定義がある属性

HEAD要素は、当該文書についての情報を含む。 当該文書のタイトル、検索エンジンに有用であろうキーワード、その他文書自身のコンテンツではないと考えられるデータ類である。 ユーザエージェントは一般に、 HEAD要素中に現れる要素を、文書のコンテンツとしてはレンダリングしない。 その代わりに、HEAD要素にある情報を、他のメカニズムによってユーザが得られるようにするであろう。

7.4.2 TITLE要素

<!-- The TITLE element is not considered part of the flow of text.
       It should be displayed, for example as the page header or
       window title. Exactly one title is required per document.
    -->
<!ELEMENT TITLE - - (#PCDATA) -(%head.misc;) -- document title -->
<!ATTLIST TITLE %i18n>

開始タグ: 必須、終了タグ:必須

別途定義がある属性

すべてのHTML文書には、HEAD中に、1つのTITLE要素があらねばならない

著者は、当該文書の内容を識別するためにTITLE 要素を用いる必要がある。 ユーザは文脈抜きで文書を参照することがあるため、著者は文脈を踏まえたタイトルを提供する必要がある。 つまり、著者は、「概説」などの文脈不明なタイトルではなく、「中世の養蜂についての概説」のようなタイトルを提供しなければならない。

アクセス性の点から、ユーザエージェントは常に TITLE要素の内容をユーザが得られるようにしなければならない。ここには、フレーム文書のTITLE要素も含む。 ユーザに提供する機構は、キャプションとして示すことや話すことなど、ユーザエージェントに依存する。

タイトルには、アクセントつきの文字や特殊文字等を表す文字実体が含まれてよいが、コメントも含めて他のマーク付けが現れてはならない。 次に文書のタイトルを例示する。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>人口動態に関する研究</TITLE>
…他のヘッダ要素…
</HEAD>
<BODY>
…文書本体…
</BODY>
</HTML>

7.4.3 title属性

属性定義

title = text [CS]
この属性は、当該要素に関する助言的情報を提供する。

文書全体に関する情報を提供し1文書に1度しか出現し得ないTITLE要素とは異なり、 title属性は幾つの要素に現れてもよい。 ある要素がtitle属性をサポートしているかどうかについては、当該要素の定義を参照されたい。

title属性の値は、ユーザエージェントによって様々にレンダリングされるであろう。 例えば、視覚系ブラウザはタイトルを「ツールチップ」(ポインティングデバイスがオブジェクトの上にある際に現れる短いメッセージ)として表示しがちである。音声ユーザエージェントは、同様の文脈で、タイトル情報を話すであろう。 次のようにリンクにtitle属性を設定すると、視覚系か非視覚系かを問わず、ユーザエージェントはユーザに対してリンク先資源の性質を知らせることができる。

…中略…
この写真は、
<A href="http://someplace.com/neatstuff.gif" title="ダイビング中の私">
   私が昨夏スキューバダイビングをしているところ
</A>。
…後略…

title属性には、外部スタイルシートを指し示すLINK要素で使われる際に果たす、追加的な役割がある。 詳しくはリンクと外部スタイルシートの項を参照されたい。

注意。 音声出力において標準手法では貧弱な処理になる状況を改善するため、将来の版のHTMLには、音素情報や韻律情報を符号化するための属性が含まれるであろう。

7.4.4 メタデータ

注意。 W3CのResource Description Framework (資源記述言語) ([RDF10]参照) は、1999年2月にW3C勧告となった。 RDFによって、著者は、HTML文書や他のネットワークでアクセスできる資源についての、機械可読なメタデータを指定できる。

HTMLでは、著者はメタデータ――文書内容ではなく文書についての情報――を、様々な方法で指定できる。

例えば、文書の著者を指定するために、次のようなMETA要素を用いる場合もあろう。

<META name="Author" content="Dave Raggett">

META要素は、プロパティ(ここでは「Author」)と、その値(ここでは「Dave Raggett」)を指定する。

本仕様は、正当なメタデータのプロパティ集合を定義することはしない。 プロパティ及びその正当な値集合は、プロファイルと呼ばれる参照辞書で定義される必要がある。 例えば、検索エンジンによる文書の索引づけを補助する目的で設計されたプロファイルは、「author (著者)」、「copyright (著作権)」、「keywords (キーワード)」などのプロパティを定義するであろう。

メタデータの指定 

一般に、メタデータの指定には次の2つの手法が取られる。

  1. プロパティとその値を宣言する。これには2通りのやり方がある。
    1. 文書中での、META要素による宣言。
    2. 文書外のメタデータへLINK要素でリンクする(リンク形式の項を参照のこと)。
  2. プロパティとその正当な値を定義しているプロファイルを参照する。 プロファイルを指し示すのには、HEAD要素の profile属性を用いる。

プロファイルがHEAD要素について設定されるため、ここに含まれるすべてのMETA要素及びLINK要素において同じプロファイルが適用されるという点に注意されたい。

ユーザエージェントは、メタデータ機構のサポートは要求されない。メタデータをサポートしようとするユーザエージェントに対して、本仕様はメタデータをどう解釈すべきかを定義しない。

META要素 

<!ELEMENT META - O EMPTY               -- generic metainformation -->
<!ATTLIST META
  %i18n;                               -- lang, dir, for use with content --
  http-equiv  NAME           #IMPLIED  -- HTTP response header name  --
  name        NAME           #IMPLIED  -- metainformation name --
  content     CDATA          #REQUIRED -- associated information --
  scheme      CDATA          #IMPLIED  -- select form of content --
  >

開始タグ: 必須、終了タグ: なし

属性定義

以下の属性に関して、許容される値及び解釈は、プロファイルに依存する。

name = name [CS]
この属性は、プロパティの名前を識別させる。本仕様は、当該属性の正当な値集合を列挙しない。
content = cdata [CS]
この属性は、プロパティの値を指定する。本仕様は、当該属性の正当な値集合を列挙しない。
scheme = cdata [CS]
この属性は、プロパティ値の解釈に用いるべきスキームの名前を示す (詳しくはプロファイルの項を参照されたい)。
http-equiv = name [CI]
この属性はnameと置き換えて用いられ得る。HTTPサーバは、この属性を、HTTP応答メッセージヘッダに用いる情報を収集するために用いる。

別途定義がある属性

META要素は、例えば著者、失効日、キーワードリスト等、文書のプロパティを識別し、そのプロパティ値を示す目的にも利用できる。 本仕様は、プロパティの規範集合を定義しない。

どの META要素も、プロパティ/値の組を指定する。 name属性がプロパティを識別し、 content属性がプロパティ値を指定する。

例えば、次の宣言は、Authorプロパティの値を設定している。

<META name="Author" content="Dave Raggett">

META要素で lang属性を使うと、content属性値の言語を指定できる。 これにより音声合成装置に言語依存の発音ルールを適用させられる。

次の例では、著者の名前がフランス語であると宣言されている。

<META name="Author" lang="fr" content="Arnaud Le Hors">

注意META要素は、メタデータを指定するための一般的機構である。 しかし、HTML要素・属性の中には、既に何らかのメタデータを取り扱うためのものがあり、著者によってMETA要素の代わりにメタデータ指定に使われ得る。 TITLE要素、ADDRESS要素、INS及びDEL要素、title属性、cite属性がそれである。

注意META要素で指定されるプロパティの値がURIである場合、そのメタデータをLINK要素の方で指定しがちな著者もいる。 そこで、次のメタデータ宣言は:

<META name="DC.identifier"
      content="http://www.ietf.org/rfc/rfc1866.txt">

以下のようにも書かれ得る。

<LINK rel="DC.identifier"
         type="text/plain"
         href="http://www.ietf.org/rfc/rfc1866.txt">
META要素とHTTPヘッダ

http-equiv属性は、name属性の代わりに用いられ得る。その場合、文書がハイパーテキスト転送プロトコル(HTTP)で取得される際に特別な意味を持つ。HTTPサーバは http-equiv属性で指定されるプロパティ名を、HTTP応答における[RFC822]形式のヘッダ生成に用いるであろう。 適正なHTTPヘッダに関する詳細は、HTTP仕様([RFC2616])を参照されたい。

次のMETA宣言の例からは:

<META http-equiv="Expires" content="Tue, 20 Aug 1996 14:25:27 GMT">

次のようなHTTPヘッダが生成される。

Expires: Tue, 20 Aug 1996 14:25:27 GMT

この情報はキャッシュによって、当該文書の新しいコピーをいつ取ってくればいいかを判断するために使われ得る。

注意。 ユーザエージェントの中には、現在ページを指定秒数後に異なるURIのもので置き換えるというMETA用法をサポートするものもある。 著者はこの技術を、ユーザを異なるページへ移動させるためには用いないようにするべきである。なぜなら移動先ページにアクセスできないユーザを生み出すからである。 自動ページ移動については、この代わりに、サーバ側リダイレクトによって行なうようにすべきである。

META要素と検索エンジン

META要素の一般用法に、キーワードの指定というものがあり、これは検索エンジンが検索結果の質を向上させるのに利用できる。 複数の META要素が同じ文書について言語依存の情報を提供している場合、そのlang属性を用いて、検索エンジンはユーザのユーザエージェント設定に合わせて検索結果を選別し得る。 例を示そう。

<-- アメリカ英語向け -->
<META name="keywords" lang="en-us" 
         content="vacation, Greece, sunshine">
<-- イギリス英語向け -->
<META name="keywords" lang="en" 
         content="holiday, Greece, sunshine">
<-- フランス語向け -->
<META name="keywords" lang="fr" 
         content="vacances, Gr&egrave;ce, soleil">

検索エンジンの効力は、LINK要素を用いて、リンクを指定することによっても補強できる。例えば、翻訳版へのリンクやPDFなど他メディア版へのリンクを指定したり、当該文書が一連の文書集合の一部である場合に最初のページへのリンクを指定するなどである。

検索エンジンを助けるためのより多くの話題は、検索エンジンによるサイト索引づけを支援する場合の注意を参照されたい。

META要素とPICS

インターネット情報選別基準 (Platform for Internet Content Selection: PICS、[PICS]で定義される)は、メタデータであるラベルとインターネットコンテンツを関連づけるための基盤である。 元々は、親と教師が子供のインターネットアクセスを制御することを助けるために設計されたものだが、符号化署名、プライバシー、知的財産権管理など、その他のラベルづけをも可能にする。

次に、PICS 1.1ラベルを含むMETA宣言の用例を示す。

<HEAD>
 <META http-equiv="PICS-Label" content='
 (PICS-1.1 "http://www.gcf.org/v2.5"
    labels on "1994.11.05T08:15-0500"
      until "1995.12.31T23:59-0000"
      for "http://w3.org/PICS/Overview.html"
    ratings (suds 0.5 density 0 color/hue 1))
 '>
  <TITLE>…文書のタイトル…</TITLE>
</HEAD>
META要素とデフォルト情報

META要素は、次に例示するような、文書のデフォルト情報を指定するために用い得る。

次の例は、文書の文字符号化方法がISO-8859-5であると指定している。

<META http-equiv="Content-Type" content="text/html; charset=ISO-8859-5"> 

メタデータのプロファイル 

HEAD要素のprofile属性は、メタデータのプロファイルの所在を指定する。 profile属性の値はURIである。ユーザエージェントはこのURIを、次の2通りに用いてよい。

次の例では、文書の索引づけに有用であるようなプロパティを定義する仮定的プロファイルが参照されている。 このプロファイルが定めているプロパティには、著者、著作権、キーワード、発行日が含まれ、各プロパティの値が一連のMETA宣言によって設定されている。

 <HEAD profile="http://www.acme.com/profiles/core">
  <TITLE>How to complete Memorandum cover sheets</TITLE>
  <META name="author" content="John Doe">
  <META name="copyright" content="&copy; 1997 Acme Corp.">
  <META name="keywords" content="corporate,guidelines,cataloging">
  <META name="date" content="1994-11-06T08:49:37+00:00">
 </HEAD>

本仕様の作成中においては、[RFC2616]の3.3に記されている日付フォーマットを用いるのが一般慣習であった。しかしこのフォーマットは比較的処理が難しいので、本仕様は著者に対し[ISO8601]日付けフォーマットの使用を推奨する。 より詳しい情報は、INS 要素とDEL要素の項を参照されたい。

scheme属性を用いると、著者はユーザエージェントに対し、メタデータの正確な解釈に用いる追加的文脈を提供できる。 メタデータが異なる書式で指定できる場合、追加的情報が決定的に重要となるであろう。例えば、著者が日付けを「10-9-97」という両義的な書式で指定することもあるであろうが、これは1997年10月9日なのか、1997年9月10日なのか。 ここでscheme属性の値「Month-Day-Year (月-日-年)」があると、この日付は明確化される。

また、scheme 属性は、非決定的ではあるが、有用な情報をユーザエージェントに提供することもあろう。

例えば、次の scheme宣言は、identifierプロパティがISBNコードであるとユーザエージェントが判断するのを助けるであろう。

<META scheme="ISBN"  name="identifier" content="0-8230-2355-9">

scheme属性の値は、nameプロパティと、その関連プロファイルとに依存する。

注意。 プロファイルの例に、Dublin Core ( [DCORE]参照)がある。 このプロファイルは、電子的書誌情報に用いる推奨プロパティの集合を定義しており、異なる記述モデル間で相互運用性を促進することを意図している。

7.5 文書本体

7.5.1 BODY要素

<!ELEMENT BODY O O (%block;|SCRIPT)+ +(INS|DEL) -- document body -->
<!ATTLIST BODY
  %attrs;                              -- %coreattrs, %i18n, %events --
  onload          %Script;   #IMPLIED  -- the document has been loaded --
  onunload        %Script;   #IMPLIED  -- the document has been removed --
  >

開始タグ: 省略可能、終了タグ: 省略可能

属性定義

background = uri [CT]
推奨しない。 この属性の値は、画像資源を指し示すURIである。この画像は一般に、視覚系ブラウザで背景に敷き詰められる。
text = color [CI]
推奨しない。 この属性は、視覚系ブラウザでの、テキストの前景色を設定する。
link = color [CI]
推奨しない。 この属性は、視覚系ブラウザでの、未訪問ハイパーテキストリンクを示すテキストの色を設定する。
vlink = color [CI]
推奨しない。 この属性は、視覚系ブラウザでの、既訪問ハイパーテキストリンクを示すテキストの色を設定する。
alink = color [CI]
推奨しない。 この属性は、視覚系ブラウザでの、選択中ハイパーテキストリンクを示すテキストの色を設定する。

別途定義がある属性

文書の本体には、文書の内容が含まれる。この内容のプレゼンテーションには、ユーザエージェントによって様々な方法が取られる。例えば視覚系ブラウザでは、本体のことを、テキスト、画像、色、図、等の内容物が現れるキャンバスであると考えることができる。音声ユーザエージェントでは、同じ内容が話されることになる。 現在では、文書のプレゼンテーションを指定する方法としてスタイルシートの使用が望ましいため、BODY要素のプレゼンテーション関連の属性は推奨しないこととなった。

推奨しない例:
次のHTML断片は、推奨しない属性の使用法を説明するものである。ここでは、キャンバスの背景色が白、テキストの前景色が黒、未訪リンク色が赤、選択中のリンク色が赤紫、既訪リンク色が茶に設定されている。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
 <TITLE>人口動態の研究</TITLE>
</HEAD>
<BODY bgcolor="white" text="black"
  link="red" alink="fuchsia" vlink="maroon">
  …文書本体…
</BODY>
</HTML>

スタイルシートを使うと、同じ効果は次のようにして得られる。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
 <TITLE>人口動態の研究</TITLE>
 <STYLE type="text/css">
  BODY { background: white; color: black}
  A:link { color: red }
  A:visited { color: maroon }
  A:active { color: fuchsia }
 </STYLE>
</HEAD>
<BODY>
  …文書本体…
</BODY>
</HTML>

次のように、リンクした外部スタイルシートを用いることで、ソースHTML文書を変更することなくプレゼンテーションを変更できる柔軟性が得られる。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
 <TITLE>人口動態の研究</TITLE>
 <LINK rel="stylesheet" type="text/css" href="smartstyle.css">
</HEAD>
<BODY>
  …文書本体…
</BODY>
</HTML>

フレーム設定とHTML文書の本体フレーム設定を含む文書では、BODY要素はFRAMESET要素で置き換えられる。 より詳しくはフレームの項目を参照されたい。

7.5.2 要素識別子: id属性とclass属性

属性定義

id = name [CS]
この属性は、要素に名前を割り当てる。この名前は文書中で一意でなければならない。
class = cdata-list [CS]
この属性は、ある要素に1つのクラス名を割り当てるか、または複数のクラス名を設定する。 幾つの要素に対してでも、同じクラス名あるいはクラス名群が割り当てできる。複数のクラス名については、空白文字によって区切らねばならない。

id属性は、ある要素に固有の識別子を割り当てる。 これはSGMLパーサで検証され得る。 例えば、次の各段落は、id属性値で各々区別されている。

<P id="myparagraph">これは、固有名を持つ段落。</P>
<P id="yourparagraph">これもまた、固有名を持つ段落。</P>

HTMLにおいて、id属性は、次の各々の役割を果たす。

一方のclass属性は、ある要素について1つ以上のクラス名を割り当て、この要素が当該クラス/クラス群に属することが示され得る。 1つのクラス名は、複数の要素インスタンスの間で共有され得る。 HTMLにおいて、class属性は、次の各々の役割を果たす。

次に示すでは、SPAN要素がid属性及びclass属性と共に文書のメッセージをマーク付けするのに使われている。メッセージは英語版とフランス語版で現れる。

<!-- 英語版メッセージ -->
<P><SPAN id="msg1" class="info" lang="en">Variable declared twice</SPAN>
<P><SPAN id="msg2" class="warning" lang="en">Undeclared variable</SPAN>
<P><SPAN id="msg3" class="error" lang="en">Bad syntax for variable name</SPAN>
<!-- フランス語版メッセージ -->
<P><SPAN id="msg1" class="info" lang="fr">Variable d&eacute;clar&eacute;e deux fois</SPAN>
<P><SPAN id="msg2" class="warning" lang="fr">Variable ind&eacute;finie</SPAN>
<P><SPAN id="msg3" class="error" lang="fr">Erreur de syntaxe pour variable</SPAN>

次のCSSスタイル規則は、視覚系ユーザエージェントに対し、情報メッセージを緑、警告メッセージを黄、エラーメッセージを赤で表示するようにさせるものである。

SPAN.info    { color: green }
SPAN.warning { color: yellow }
SPAN.error   { color: red }

フランス語の"msg1"と英語の"msg1"は同じid属性値を共有しているので同一文書には出現できないということに注意されたい。 著者は、このid属性を、個々のメッセージのプレゼンテーションを洗練させるのに用いたり、目標アンカーとしたりしてもよい。

ほとんどすべてのHTML要素に、固有の識別子とクラス情報とを割り当てることができる。

次の例では、プログラミング言語についての文書を記していると仮定する。文書には、数多くの整形済テキストが含まれる。 ここではコード例の整形にPRE要素を用いており、更にexampleクラスに属するすべてのPRE要素インスタンスについて背景色を緑に指定している。

<HEAD>
<TITLE>…文書のタイトル…</TITLE>
<STYLE type="text/css">
PRE.example { background : green }
</STYLE>
</HEAD>
<BODY>
<PRE class="example" id="example-1">
…コードの例…
</PRE>
</BODY>

上の例にid属性を設定することで、(1) 当該箇所へのハイパーリンクを生成でき、また (2) 特定インスタンスのスタイル情報でクラス用スタイル情報を上書きできる。

注意 id属性は、アンカー名として使われる際にname属性と同じ名前空間を共有する。 より詳しくはidによるアンカーの項を参照されたい。

7.5.3 ブロックレベル要素と行内要素

HTMLの要素のうち、BODY要素に出現し得る要素のあるものは「ブロックレベル」と呼ばれ、他のものは「行内」 (これは「テキストレベル」としても知られている)と呼ばれる。 この違いは、幾つかの点から明らかにされる。

内容モデル
一般に、ブロックレベル要素は行内要素及び他のブロックレベル要素を内容に取り得る。一般に、行内要素は単なるデータ及び他の行内要素を内容に取り得る。 この構造的な性質の違いから、ブロック要素は行内要素よりも「大きい」構造を生成する、と言える。
整形
デフォルトでは、ブロックレベル要素は行内要素とは異なるように整形される。 一般に、ブロックレベル要素は新しい行を開始し、行内要素は新しい行を開始しない。 空白、line break、ブロック整形について、より詳しくはテキストの項目を参照されたい。
方向性
[UNICODE]の双方向テキストアルゴリズムに起因する技術的な理由により、ブロックレベル要素と行内要素は、方向性情報の継承の仕方が異なる。詳しくは、テキスト方向の継承の項を参照されたい。

スタイルシートを使うと、要素のレンダリングをブロックにするか行内にするかを含め、要素のレンダリングを様々に指定できる。リスト要素を行内スタイルにするなど、ブロック要素を行内スタイルでレンダリングすることが適当であるような場合もある。しかし一般的に言って、著者はHTML要素の慣習的解釈を上書きするようなことはしないよう求められる。

ブロックレベル要素か行内要素かという伝統的プレゼンテーション語彙を転換してしまうことは、双方向テキストアルゴリズムに対する影響も引き起こす。 より詳しくはスタイルシートの双方向性への影響の項を参照されたい。

7.5.4要素のグループ化: DIV要素とSPAN要素

<!ELEMENT DIV - - (%flow;)*            -- generic language/style container -->
<!ATTLIST DIV
  %attrs;                              -- %coreattrs, %i18n, %events --
  >
<!ELEMENT SPAN - - (%inline;)*         -- generic language/style container -->
<!ATTLIST SPAN
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

開始タグ: 必須、終了タグ: 必須

別途定義がある属性

DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 各々、内容が行内であるか(SPAN)ブロックレベルであるか(DIV)は定めるが、他のプレゼンテーション的語彙を示すことはない。 従って著者は、この両要素をスタイルシートlang属性等と併用することで、HTMLを自身の必要や好みに応じられるようにできる。

次の例では、顧客情報データベースに基づくHTMLを生成しようとしていると仮定する。HTMLには「顧客名」「電話番号」「メールアドレス」などを識別する要素は存在しないから、望ましい構造やプレゼンテーション効果を得るために、DIV要素とSPAN要素を用いている。 この例のように、情報の構造化にはTABLE要素を用いてよいだろう。

<!-- 顧客データベースのデータ例 -->
<!-- 氏名: Stephane Boyera, 電話: (212) 555-1212, Email: sb@foo.org -->

<DIV id="client-boyera" class="client">
<P><SPAN class="client-title">顧客情報:</SPAN>
<TABLE class="client-data">
<TR><TH>名:<TD>Boyera</TR>
<TR><TH>姓:<TD>Stephane</TR>
<TR><TH>電話:<TD>(212) 555-1212</TR>
<TR><TH>Email:<TD>sb@foo.org</TR>
</TABLE>
</DIV>

<!-- 氏名: Yves Lafon, 電話: (617) 555-1212, Email: yves@coucou.com -->

<DIV id="client-lafon" class="client">
<P><SPAN class="client-title">顧客情報:</SPAN>
<TABLE class="client-data">
<TR><TH>名:<TD>Lafon</TR>
<TR><TH>姓:<TD>Yves</TR>
<TR><TH>電話:<TD>(617) 555-1212</TR>
<TR><TH>Email:<TD>yves@coucou.com</TR>
</TABLE>
</DIV>

この後、このデータベースエントリのプレゼンテーションを調整するスタイルシート宣言を容易に追加できる。

他の用例については、class属性とid属性の項にある例を参照されたい。

視覚系ユーザエージェントは一般に、DIV要素の前後にline breakを置く。 例えば、次の場合:

<P>aaaaaaaaa<DIV>bbbbbbbbb</DIV><DIV>ccccc<P>ccccc</DIV>

典型的なレンダリングは次のようになる。

aaaaaaaaa
bbbbbbbbb
ccccc

ccccc

7.5.5 見出し: H1H2H3H4H5H6要素

<!ENTITY % heading "H1|H2|H3|H4|H5|H6">
<!--
  There are six levels of headings from H1 (the most important)
  to H6 (the least important).
-->

<!ELEMENT (%heading;)  - - (%inline;)* -- heading -->
<!ATTLIST (%heading;)
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

開始タグ: 必須、終了タグ: 必須

別途定義がある属性

見出しの要素は、その章・節で述べられる話題を短く記すものである。見出し情報は、ユーザエージェントによって、例えば文書の目次を自動生成するために用いられたりもするであろう。

HTMLには、最上位のH1から最低位のH6までの、6レベルの見出しがある。視覚系ブラウザは通常、より上位の見出しを大きいフォントで、より低位の見出しを小さいフォントでレンダリングする。

次の例は、見出しとそれが導くテキストとをDIV要素で連結する方法を示している。こうすることで、スタイルシートによってセクション単位のスタイル定義(背景色やフォント設定等)を行うことができる。

<DIV class="section" id="forest-elephants" >
<H1>Forest elephants</H1>
<P>この章では、
In this section, we discuss the lesser known forest elephants.
…この章の内容…
<DIV class="subsection" id="forest-habitat" >
<H2>生態</H2>
<P>Forest elephants do not live in trees but among them.
…この節の内容…
</DIV>
</DIV>

この構造は、次のようなスタイル情報で装飾され得る。

<HEAD>
<TITLE>…文書のタイトル…</TITLE>
<STYLE type="text/css">
DIV.section { text-align: justify; font-size: 12pt}
DIV.subsection { text-indent: 2em }
H1 { font-style: italic; color: green }
H2 { color: green }
</STYLE>
</HEAD>

章節の番号づけと参照
HTMLは、それ自体では見出しから章節番号を生成することはない。しかしユーザエージェントがその機構を提供する場合もあるであろう。近い将来、CSS等のスタイルシート言語を使って著者が章節番号の制御を行えるようになるであろう。これは印刷した文書で「7.2節を見よ」などと参照できて便利である。

見出しレベルを飛ばすのは悪い慣習だと考える人もいる。 H1 H2 H1なら良いが、H1 H3 H1では見出しレベルH2が飛ばされているから駄目だ、というのである。

7.5.6 ADDRESS要素

<!ELEMENT ADDRESS - - (%inline;)* -- information on author -->
<!ATTLIST ADDRESS
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

開始タグ: 必須、終了タグ: 必須

別途定義がある属性

ADDRESS要素は、文書全体、あるいはフォームなど文書の主要部分に関する問い合せ先を示すのに用いられる。 たいてい、文書の冒頭か末尾に現れる。

例えば、W3CのWebサイトにあるHTML関連のページには、次のような問い合わせ先情報が含まれているであろう。

<ADDRESS>
<A href="../People/Raggett/">Dave Raggett</A>, 
<A href="../People/Arnaud/">Arnaud Le Hors</A>, 
contact persons for the <A href="Activity">W3C HTML Activity</A><BR> 
$Date: 1999/12/24 23:07:14 $
</ADDRESS>

訳者代表: 内田明 (UCHIDA Akira)
email: uchida@happy.email.ne.jp