DIVおよびSPAN要素は、idおよびclass属性ととともに、文書に構造を追加する一般的な仕組を提供します。これらの要素は、中身がインライン(SPAN)あるいはブロックレヴェル(DIV)である事を示しますが、その中身がそれ以外の表現上の意味を持つ事はありません。ですから、制作者はこれらの要素をスタイルシートやlang属性と一緒に使う事で、はじめてお望みの通りに、あるいは好きな通りに、HTMLを仕立てる事ができます。
例えば、顧客情報のデータベースに基いたHTML文書を生成したいとしましょう。HTMLには「顧客」「電話番号」「E-メールアドレス」のようなオブジェクトを特定する要素が含まれませんから、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">Client information:</SPAN> <TABLE class="client-data"> <TR><TH>Last name:<TD>Boyera</TR> <TR><TH>First name:<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">Client information:</SPAN> <TABLE class="client-data"> <TR><TH>Last name:<TD>Lafon</TR> <TR><TH>First name:<TD>Yves</TR> <TR><TH>Tel:<TD>(617) 555-1212</TR> <TR><TH>Email:<TD>yves@coucou.com</TR> </TABLE> </DIV>
(以下略)
見出し要素は、引続き現われるセクションのトピックを短く言い表します。見出しの情報は、ユーザエージェントに利用されて、例えば、文書の目次を自動的に生成するのに使われたりするでしょう。
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. ...this section continues... <DIV class="subsection" id="forest-habitat" > <H2>Habitat</H2> <P>Forest elephants do not live in trees but among them. ...this subsection continues... </DIV> </DIV>
This structure may be decorated with style information such as:
<HEAD>
<TITLE>... document 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>
P要素はパラグラフを表します。ブロックレヴェル要素を(P自身も)含む事ができません。
私達は制作者が空のP要素を使うのをやめさせます。ユーザエージェントは空のP要素を無視すべし。
P要素はパラグラフを表します。ブロックレヴェル要素を(P自身も)中に持っている事ができません。
ラインブレークはキャリッジリターン、ラインフィード、あるいは、キャリッジリターンとラインフィードのペアである事と定義されます。全てのラインブレークはホワイトスペースになります。
BR要素はテキストの現在の行を強制的に中断(終了)します。
視覚系ユーザエージェント向けに、BR要素に続くマーク附けが、左あるいは右マージンにフロートしている画像やその他のオブジェクトの周囲を回り込むかどうか、その種のオブジェクトの下から始まるかどうか、を決定するため、clear属性を使えます。詳しくは「配置とフローティングオブジェクト」のセクションにて説明します。フロートしている画像とオブジェクトの周囲におけるテキストの回り込みを制御するには、制作者はスタイルシートを使って下さい。
双方向性の整形を顧慮すると、BR要素は[ISO10646]のLINE SEPARATORキャラクタが双方向性アルゴリズムでする振舞いと同様の振舞いをすべきです。
時として、制作者はラインブレークが二語の間に出現するのを阻止したいと思うかもしれません。 エンティティは空白として振舞いますが、そこでユーザエージェントはラインブレークを生じません。
<!ENTITY % pre.exclusion "IMG|OBJECT|BIG|SMALL|SUB|SUP"> <!ELEMENT PRE - - (%inline;)* -(%pre.exclusion;) -- preformatted text --> <!ATTLIST PRE %attrs; -- %coreattrs, %i18n, %events -- >
Start tag: required, End tag: required
Attribute definitions
Attributes defined elsewhere
PRE要素は視覚系ユーザエージェントに、囲われているテキストが「既に整形されている」事を伝えます。既に整形されているテキストを扱う時、視覚系ユーザエージェントは:
非視覚系のユーザエージェントはPRE要素の中身にある余計なホワイトスペースを顧慮しなくても結構です。
ラインブレークに関するSGMLの仕様についての詳細は、appendixの「ラインブレークについてのメモ」を参照して下さい。
上記のDTDは、どの要素がPRE宣言の中に出現してはならないか、を示しています。これはHTML 3.2と同じで、一定の行間と列の配置を保持して、テキストが固定ピッチのフォントでレンダリングされるようにする意図があります。
The following example shows a preformatted verse from Shelly's poem To a Skylark:
<PRE>
Higher still and higher
From the earth thou springest
Like a cloud of fire;
The blue deep thou wingest,
And singing still dost soar, and soaring ever singest.
</PRE>
Here is how this is typically rendered:
Higher still and higher
From the earth thou springest
Like a cloud of fire;
The blue deep thou wingest,
And singing still dost soar, and soaring ever singest.
水平タブ文字
水平タブ文字([ISO10646]と[ISO88591]における十進9)は通常、視覚系ユーザエージェントに、八文字ごとのタブストップに行の文字を位置揃えするのに必要な、少くともゼロでない数のスペースとして解釈されます。水平タブを既に整形されたテキストの中で使うのは、やめて下さい――と、そう私達が強く申しますのは、編集時にタブスペーシングを八字以外に設定するのはありがちな事で、文書の配置をおかしくする事につながるからです。
HTMLは制作者に情報のリストを作る方法を幾つか提供します。どのリストも一つかそれ以上のリスト要素を含まなければなりません。リストは、
を含む事が出來ます。
例へば上記のリストは未整理のリストで、UL要素で生成されます。
<ul> <li>未整理の情報 <li>整理された情報 <li>定義 </ul>
整理されたリストと云ふのは、OL要素で生成されるけれども、整理されてゐる事が強調されるべき情報を含む事が出來ます。例へばレシピで、
定義リストは、DL要素で生成されますけれども、(ほかにもいろいろと應用の仕方は「ある」のですが)一般に「用語」と「定義」のペアが連なつて生成されます。何かの宣傳で、こんな風に定義リストを使ふかも知れません。
HTML内での明示:
<dl> <dt>低コスト <dd>今度の製品では從來の製品に比べてコストを劇的に削減いたしました。 <dt>使ひ易い <dd>より使ひ易く製品を改良しました。 <dt>御子樣にも安全です <dd>御子樣がこの製品のそばで一人で遊んでゐても大丈夫(但し保證ナシ)。 </dl>
リストはネスト出來ますし、異るタイプのリストでも組合せて使ふ事が出來ます。云々。
- ulを「並んでゐるだけのリスト」、olを「並び順を強調したリスト」と譯しても良い?