前へ ・ 総目次 ・ 要素一覧 ・ 属性一覧 ・ 索引

7 HTML文書の大枠構造（The global structure of an HTML document）

このページの目次

  1. HTML文書構造の概略（Introduction to the structure of an HTML document）
  2. HTMLバージョン情報（HTML version information）
  3. HTML要素（The HTML element）
  4. 文書のヘッド部（The document head）
    1. HEAD要素（HEAD element）
    2. TITLE要素（The TITLE element）
    3. title属性（The title attribute）
    4. 当該文書のメタ情報（Meta data）
  5. 文書本体（The document body）
    1. BODY要素（The BODY element）
    2. 個々の要素の識別子: id属性とclass属性（Element identifiers: the id and class attributes）
    3. ブロックレベルの要素とインライン要素の違い（Block-level and inline elements）
    4. 要素をグループ化する要素: DIV要素とSPAN要素（Grouping elements: the DIV and SPAN elements）
    5. 見出し: H1、 H2、 H3、 H4、 H5、 H6要素（Headings: The H1, H2, H3, H4, H5, H6 elements）
    6. ADDRESS要素（The ADDRESS element）

Introduction to the structure of an HTML document）

HTML 4.0 文書は、次の3つの部分から構成されます。

  1. HTMLのバージョン情報を記した行。
  2. その文書「について」の情報を記したヘッド部（HEAD要素となる部分です。）
  3. 本体。その文書の実際の内容。本体はBODY要素かFRAMESET要素として表現されます。

空白文字（スペース、新行<newline>文字、タブ文字、そしてコメント）が、上記の各部の前後に記され得ます。上記の2番目と3番目の部分はHTML 要素として区切られます。

次にごく単純なHTML文書の例をあげます。

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

HTML version information）

正当なHTML文書を作る場合には、どのバージョンのHTML仕様に準拠する文書なのかを明記する必要があります。文書型宣言という表記によって、当該HTML文書がどんな文書型定義（DTD）に従った文書なのかを示します。（[ISO8879]を参照のこと。）

HTML 4.0仕様には3種類のDTDが含まれますので、下記のどれに準拠するのかを記さねばなりません。各DTDで使える要素には差があります。

各々の文書型宣言に付随する URI によって、ユーザエージェントは、当該文書のDTDや実体セットがどうなっているかをダウンロードして確認することが可能です。以下の URI は、W3Cが提供しているHTML 4.0のDTDと実体セットの所在を示しています。

公開識別子とファイルの結びつきは、SGML Open Consortium（[SGMLOPEN]を参照のこと）が推奨する書式のカタログファイルを用いて設定可能です。HTML 4.0のサンプルカタログファイルは、SGML参照情報を記した第19章2節に記してあります。公開識別子の最後の2文字はDTDが何語で記されているかを示すものです。HTMLの場合、これは常に英語（"EN"）です。

The HTML element）

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

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

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

属性の定義

version = cdata [CN]
非推奨。 この「version」の属性値は当該文書がHTMLのどのバージョンで記されているかを示します。ただし本来は文書型宣言によってこれを記すのが正当なので、「version」属性は非推奨とします。

他に使用可能な属性

文書型宣言の後に続けて、HTML文書の残りの部分がHTML要素の内容として記されます。そこで、典型的なHTML文書は次のような構造を持つこととなります。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">
<HTML>
...ヘッド、ボディーなどがここに含まれます...
</HTML>

The document head）

HEAD element）

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

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

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

属性の定義

profile = uri [CT]
この属性は、メタ情報を定義しているプロファイルの所在をしめすものです。複数の場合は空白文字で区切って列記します。この仕様書では列記されている場合に関して1つ目のみを有効としていますが、ユーザエージェントは、将来を見越して、列記されたリストをきちんと解釈できるようにしておくべきでしょう。プロファイルについては、この章の4節、メタ情報の解説の部分で詳述します。

他に使用可能な属性

HEAD要素には、当該文書「について」の情報が記されます。例えば、文書の表題、キーワード（サーチエンジンでの文書活用を助けます）、その他文書の中身そのものではないような情報です。ユーザエージェントは一般にHEAD要素内の情報を画面には表示しません。何か他の形で覗き見る仕組みが利用されるでしょう。

The TITLE element）

<!-- 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 %head.misc;) -- document title -->
<!ATTLIST TITLE %i18n>

開始タグ: 必要、終了タグ: 必要。

他に使用可能な属性

各HTML文書の、 HEAD要素内には、 TITLE要素を必ず記して下さい。

その文書が何であるかを判別可能にするため、HTML文書にはTITLE要素を記入する必要があります。ただし表題だけを見ても文書の内容がより具体的に理解できるように、思慮深く表題をつける必要があります。つまり、『概要』といった表題では何についての概要なのかが分かりませんから、『中世の養蜂についての概要』といったような表題をつけるようにしましょう。

文書を利用しやすくするため、ユーザエージェントは、利用者に対して、常にTITLE要素の 内容が分かるようにしておく必要があります。（フレーム文書の場合も含みます。）その再生方法は各々の環境によって異なります。（例えば、キャプションとして表されたり、音声出力されたり。）

「TITLE」要素の表記には（アクセント記号つきのアルファベットであるとか、特殊文字などを表すために）文字参照を使っても構いませんが、マークアップを組み込むことはできません。以下に例を示します。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<HTML>
<HEAD>
<TITLE>人口動態に関する研究</TITLE>
... その他のHEAD要素...
</HEAD>
<BODY>
... 文書の本文...
</BODY>
</HTML>

The title attribute）

属性の定義

title = text [CS]
個々の要素に追加的な情報を設定するものです。

文書全体に関する表題を表し、文書中にただ1つきりしか存在しないTITLE要素と違って、 title属性は文書中の複数の要素に設定して構いません。どの要素に「title」属性を設定可能かは各々の要素の定義部分をご覧下さい。

title属性の値をどう表すかはユーザエージェントにより様々です。例えば、視覚系ユーザエージェントの場合は『バルーンヘルプ』的な表示（ポインティングデバイスを近づけるとフキダシ状に短い解説文が現れるような表示）を行う場合が多いようです。音声出力の場合も似たような状況下で「title」属性の内容を読み上げるでしょう。例えば、リンク部分に「title」属性による解説が設定されていれば、（視覚表示であれ非視覚表示であれ）リンク先に関する情報を知ることができるでしょう。

...中略...
この写真は
<A href="http://someplace.com/neatstuff.gif" title="スキューバダイビングをしている私">
昨夏スキューバダイビングにいったときのものです。
</A>
...後略...

外部スタイルシートへのリンクを示すLINK要素に設定されるtitle 属性には、これ以上の役割が与えられています。詳しくは12章3節のリンクと外部スタイルシートの項をご覧下さい。

注。 音声出力における標準的手法の貧弱さを補うために、HTMLの将来のバージョンでは、音素情報や韻律素情報を記すための属性が加えられるでしょう。

Meta data）

この仕様書の作成中に、HTML文書や他のネットワーク資源に関して、より計算機的利用に関する有効性を高めるような方法が構築され続けていました。W3CによるResource Description Language（[RDF]を参照のこと）です。これはメタ情報の記述に関する共通作法を定めようとするものです。

HTMLでは、メタ情報 -- 当該文書「について」の情報 -- を、様々な方法で記すことが可能です。

例えば、その文書の著者名を記すために、 META要素によって次のように記すことができます。

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

META要素はあるプロパティ（ここでは「Author」）とその値（ここでは「Dave Raggett」）とを設定する形で表記します。

この仕様書ではメタ情報の正当なプロパティ・値の組合せは何かということについては定義しません。プロパティとその値との有効な組合せについては、プロファイルと呼ばれる参照体系によって定義されます。例えば、サーチエンジンでのインデックス付けを助けるためのプロファイルは、「author」、「copyright」、「keywords」などのプロパティを定義するでしょう。

Specifying meta data）

一般に、メタ情報を設定する場合には2つのステップがあります。

  1. プロパティとその値とを宣言する。これには2通りのやり方があります。
    1. 当該文書中に、META要素によって記す。
    2. 当該文書外にメタ情報へのLINK要素によって記す。（リンク形式の項を参照のこと。）
  2. プロパティとその有効な値を定義したプロファイルを参照する。プロファイルを指定するには、HEAD要素のprofile属性を活用する。

HEAD要素に「profile」属性が設定されていた場合、その「HEAD」要素内にある他の全ての META要素とLINK要素について同じプロファイルが有効となることにご注意下さい。

ユーザエージェントは、メタ情報をサポートする必要はありません。またメタ情報をサポートするユーザエージェントに対して、この仕様書は、メタ情報をどのように扱うべきかについては定めません。

The META element）

<!ELEMENT META - O EMPTY               -- generic metainformation -->
<!ATTLIST META
  %i18n;                               -- lang, dir, for use with content --
  NAME           #IMPLIED  -- HTTP response header name  --
  NAME           #IMPLIED  -- metainformation name --
  CDATA          #REQUIRED -- associated information --
  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">

lang属性を使うと、content属性の内容を記述する言語を指定できます。これにより例えば音声出力環境で言語依存型の発音ルールを特定したいという要求が満たせます。

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

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

注。 META要素は、様々なメタ情報を記述するための機能を持っています。けれども、HTMLの要素・属性にはそうしたメタ情報を扱うためのものが他にも存在し、場合によってはそちらが使われるでしょう。それは、TITLE要素、ADDRESS要素、INS要素、DEL要素、title属性、そしてcite属性です。

注。 プロパティの値がURIであるような指定をMETA要素で行わず、 代わりに、LINK要素を使おうとする人もいるでしょう。そこで、次のメタ情報設定は、

<META name="DC.identifier"
      content="ftp://ds.internic.net/rfc/rfc1866.txt">

下記のようにも書かれ得ます。

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

name属性の代わりに[RFC822]形式のヘッダ部として、HTTP伝送時に使用します。HTTPヘッダの正当な情報についてはHTTPの仕様（[RFC2068]）をご覧下さい。

下記のMETA宣言文は、

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

HTTPヘッダ部に次のように書き出されます。

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

この情報は、キャッシュにとって、関連項目の新しい版をいつダウンロードすべきかの判断材料とされます。

ユーザエージェントによっては、下記のようなMETA宣言文を、当該文書を指定時間後に指定 URI へと自動的に書き換えるための情報として利用します。

<META http-equiv="refresh" content="3,http://www.acme.com/intro.html">

上記の「content」は何秒後に 次の URI に書き換えるかを設定するものです。一般にこの機構はコマ送り的イントロページに使われています。けれども、ユーザエージェントによってはこの機構をサポートしていないので、自動書き換え機構を使おうとする場合には通常のリンクなどによって移動できるようにしておく必要があります。（そこで、この機構はイントロページの「標準」とはなり得ていません。）

META要素とサーチエンジン

META要素のよくある使い方は、サーチエンジンに対して効率よい検索を可能にする「キーワード」設定です。もしMETA要素が言語依存型の情報を扱う場合、サーチエンジンは、下の例のように使われるlang属性によって、拾ってきたキーワードを篩いにかけることもできます。

<-- For speakers of US English -->
<META name="keywords" lang="en-us" 
         content="vacation, Greece, sunshine">
<-- For speakers of British English -->
<META name="keywords" lang="en" 
         content="holiday, Greece, sunshine">
<-- For speakers of French -->
<META name="keywords" lang="fr" 
         content="vacances, Gr&egrave;ce, soleil">

サーチエンジンの効力は、LINK要素によっても補強されます。翻訳版へのリンクであるとか、他のメディア（「PDF」など）へのリンクであるとか、当該文書が大きな文書の一部分であった場合の第一文書へのリンクであるとか。

より詳しくは、附記B.4「サーチエンジンの機能を助ける」で記します。

META要素とPICS制限情報（META and PICS）

インターネット情報選別基準（The 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">

Meta data profiles）

HEAD要素のprofile属性は、 メタ情報のプロファイルの所在を示すものです。profile属性の値は、 URI となります。ユーザエージェントは、この URI を、2通りに活用します。

次の例では、文書のインデックス付けに有用であるような仮説的プロファイルを参照しているものです。このプロファイルが設定している変数は、「著者」「著作権」「キーワード」、「発行日」となっており、各々当該「HEAD」要素に含まれる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>

この仕様書の作成中には、日付の表し方の共通作法として[RFC2068]第3章3節の形式が利用されていました。けれどもこの形式は処理が難しいので、HTML文書においては[ISO8601]に従うよう要請します。より詳しくはINS要素とDEL要素の項をご覧下さい。

scheme 属性は、メタ情報の取り扱いについて、 より詳しい情報をユーザエージェントに知らせるためのものです。メタ情報の記述形式について様々な手法が何の予告もなく用いられると非常に重大な間違いが起こりうるので、その記述形式を表しておくのです。例えば、日付を（両議的な）形式「10-9-97$B!W$G5-$7$?>l9g!"$3$l$O!V1997年10月9日」を意味するのか「1997年9月10日」を意味するのか、そのままでは決められません。ここでscheme属性値として「Month-Day-Year」を併記しておくと、「10-9-97」が一義的に「1997年10月9日」だと理解されます。[訳注。正誤表に基づき修正済み。]

scheme属性は、こうした決定的な形式情報だけでなく、様々な情報をユーザエージェントに提供できます。

例えば、次の例では、プロパティ「identifier」の値が ISBN コードを意味していることが示されています。

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

scheme属性が取り得る値は、nameプロパティについて与えられた値と、関連 プロファイルとに依存します。

注。 現在利用可能なプロファイル例が、Dublin Coreから提起されています。（[DCORE]を参照のこと。）これは、電子的書誌情報について定義したプロファイルで、異なる記述モデルの間で共通利用が可能なようになることを目指しています。

The document body）

The BODY element）

<!ELEMENT %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 要素における文書の見栄えをコントロールするための属性は 非推奨としました。

非推奨例（DEPRECATED EXAMPLE）:
次のHTML断片は、非推奨となった属性の使用法を示すものです。背景色を白、文字色を黒、リンク色を赤、選択中のリンクを fuchsia、既訪問リンクを maroonに指定しています。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
   "http://www.w3.org/TR/REC-html40/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.0//EN"
   "http://www.w3.org/TR/REC-html40/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.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<HTML>
<HEAD>
 <TITLE>人口動態の研究</TITLE>
 <LINK rel="stylesheet" type="text/css" href="smartstyle.css">
</HEAD>
<BODY>
  ... 本文 ...
</BODY>
</HTML>

「FRAMESET」と「BODY」について。 フレーム機能を利用するHTML文書では、BODY要素がFRAMESET要素によって置き換えられます。詳しくは フレーム分割文書について述べた16章をご覧下さい。

Element identifiers: the id and class attributes）

属性の定義

id = name [CS]
当該要素に名前をつけます。文書中で同じ名前が重ならないようにする必要があります。
class = cdata-list [CS]
当該要素につけるクラス名を示します。1つのクラス名を幾つの要素につけても構いません。1つの要素に複数のクラス名をつける場合には、列記する各名称を空白文字で区切る必要があります。

id属性は、特定の要素に対して文書中で それ1つきしりかない名前をつけるものです。（SGMLパーザによって確認され得ます。）例えば、次の各段落は各々異なるid 属性値によって区別されています。

<P id="myparagraph">この段落には独自の名前がつけられています。</P>
<P id="yourparagraph">この段落にもまた独自の名前がつけられています。</P>

id属性は、HTML文書中で 次のような役割を果たします。

一方class属性は、各要素に対して1あるいは複数のクラス名を設定し、それらのクラスに属しているという目印をつけます。1つのクラス名は複数の要素によって共有され得ます。class属性は、HTML文書中で 次のような役割を果たします。

次の例ではSPAN要素が、id属性並びにclass属性と合わせて、メッセージ文のマークアップに使われています。メッセージ文は英文と仏文の2通りが用意されています。

<!-- English messages -->
<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>

<!-- French messages -->
<P><SPAN id="msg1" class="info" lang="fr">Variable d&eacute;clar&eacute; 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 }

1つ前の例の、フランス語版の「msg1」と英語版の「msg1」は、同じid属性値を共有してしまっているので、同一文書中には記せないことにご注意下さい。id属性に関しては、もっと様々な応用があるでしょう。

ほとんど全てのHTML要素に対して、「id」属性や「class」属性を設定可能です。

例えば、プログラミング言語に関する文書を書いているとしましょう。その文書中には整形済み文章の形で多くのプログラム例が記されることになります。ここではPRE要素で「example」クラスとしてプログラム例を記し、その背景色を緑に指定しました。

<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 属性と同じ名前空間を共有します。詳しくは第12章2節のid属性によるアンカー設定の項をご参照下さい。

Block-level and inline elements）

BODY要素中に記される様々な要素には、「ブロックレベル要素」に分類されるものと「インライン要素」（「テキストレベル」とも呼称されます）に分類されるものがあります。次のような点に違いがあります。

Content model（内容モデル）
一般に、ブロックレベルの要素はインライン要素や他のブロックレベル要素を内容として含みます。インライン要素の場合は、データか他のインライン要素だけを内容として含みます。この性質から、ブロックレベルの要素はインライン要素より大きい構造を造るものだ、と言えます。
Formatting（表示方法）
表示に際して、特段の指定がない限り、ブロックレベルの要素とインラインレベルの要素は異なる扱いを受けます。ブロックレベル要素は新しい行から始められますが、インライン要素はそうなりません。空白文字や改行文字、整形などに関しては テキストの章をご覧下さい。
Directionality（書字方向）
[UNICODE]の双方向書字アルゴリズムに内在する技術的理由により、ブロックレベル要素とインライン要素では書字方向情報をどのように継承するかが異なります。第8章2節の書字方向情報の継承の項をご覧下さい。

スタイルシートを使うと、各要素に対して、ブロックレベル的にもインライン的にも表示できるような指定を行えます。例えば、リストに関する要素をインライン要素として扱うような指定を行うことも可能ですが、一般的な表示原則をこのように上書きするやり方は、やらないようにしてください。

インライン要素とブロックレベル要素の伝統的な扱いを取り替えてしまうような指定を行うと、双方向書字アルゴリズムに対して影響を与えます。詳しくは第8章2節の双方向表記に対するスタイルシートの効果の項をご覧下さい。

7.5.4 要素をグループ化する要素: DIV要素とSPAN要素（Grouping elements: the DIV and SPAN elements）

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

開始タグ: 必要、終了タグ: 必要。

他に使用可能な属性

DIV要素とSPAN要素は、id属性やclass属性と併用することで、文書に構造的な意味を補強するものです。インライン要素を扱う場合はSPAN要素、ブロックレベル要素を扱う場合はDIV要素を用います。が、表示に関する取り決めはありません。従って、必要・あるいは好みによって表示方法を指定したい場合は、 スタイルシートやlang属性などを利用する必要があります。

ここで、顧客情報リストに基づくHTML文書を作ろうとしている状態を考えてみましょう。HTMLには「顧客<client>」、「電話番号<telephone number>」、「メールアドレス<email address>」などをマークアップするタグなど存在しませんから、DIV要素やSPAN要素を使ってその用を足すことにします。また、情報の整理のためにTABLE要素を利用することになるでしょう。

<!-- Example of data from the client database: -->
<!-- Name: Stephane Boyera, Tel: (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>Tel:<TD>(212) 555-1212</TR>
<TR><TH>Email:<TD>sb@foo.org</TR>
</TABLE>
</DIV>

<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>Tel:<TD>(617) 555-1212</TR>
<TR><TH>Email:<TD>yves@coucou.com</TR>
</TABLE>
</DIV>

このデータベース情報の表示を細かく指定するためのスタイルシートを、後から簡単に設定することができます。

他の利用法については、class属性とid属性の解説部分での例文をご覧下さい。

視覚系のユーザエージェントの場合、一般に、 DIV要素の前後を改行します。そこで、

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

のようなマークアップは、概ね次のように表示されます。

aaaaaaaaa
bbbbbbbbb
ccccc

ccccc

7.5.5 見出し: The H1, H2、 H3、 H4、 H5、 H6要素（Headings: The H1, H2, H3, H4, H5, H6 elements）

<!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の見出しには6つのレベルがあり、H1が最上位、H6が最下位のレベルを表します。視覚系ブラウザは通常上位の見出しを大きく、下位の見出しを小さく表示します。

下の例は、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>Habitat</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 を飛び越しちゃってるから良くない、というわけです。

The ADDRESS element）

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

開始タグ: 必要、終了タグ: 必要。

他に使用可能な属性

ADDRESS要素は、当該文書・フォームなどに関する問い合わせ先を記す場合に使います。概して文書の先頭か末尾に記されています。

例えば、W3Cの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: 1997/12/16 05:38:14 $
</ADDRESS>
前へ ・ 総目次 ・ 要素一覧 ・ 属性一覧 ・ 索引