HTML4.01仕様-HTMLドキュメントの最上位構造(4)
10122 ワード
7.5.4 Grouping elements: the DIV and SPAN elements
<!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 --
>
Start tag: required, End tag: required
開始ラベル:必須、終了ラベル:必須
Attributes defined elsewhere
他の場所で定義された属性
idおよびclass属性を持つDIVおよびSPAN要素は、ドキュメントに構造を追加する一般的な方法を提供する.これらの要素は、コンテンツが行内(SPANを使用)またはブロックレベル(DIVを使用)であることを定義しますが、コンテンツに他のプレゼンテーションロジックは適用されません.そこで、著者はこれらの要素を使用して、スタイルシート、lang属性などを通じてHTMLを裁断して、自分のニーズと味に合うことができます.
Suppose, for example, that we wanted to generate an HTML document based on a database of client information. Since HTML does not include elements that identify objects such as "client", "telephone number", "email address", etc., we use DIV and SPAN to achieve the desired structural and presentational effects. We might use the TABLE element as follows to structure the information:
たとえば、データベース内の顧客情報に基づいて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: [email protected] -->
<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>[email protected]</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>[email protected]</TR>
</TABLE>
</DIV>
Later, we may easily add style sheet declarations to fine tune the presentation of these database entries.
その後、これらのデータベース・エンティティの表示方法を改善するために、スタイルシート宣言を簡単に追加できます.
For another example of usage, please consult the example in the section on the class and id attributes.
使用法の別の例については、classおよびidプロパティセクションの関連例を参照してください.
Visual user agents generally place a line break before and after DIV elements, for instance:
Visualization User Agentでは、通常、DIV要素の前後に1つずつ折り曲げ(改行)が追加されます.たとえば、次のようになります.
<P>aaaaaaaaa<DIV>bbbbbbbbb</DIV><DIV>ccccc<P>ccccc</DIV>
which is typically rendered as:
典型的には、
aaaaaaaaa
bbbbbbbbb
ccccc
ccccc
7.5.5 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 --
>
Start tag: required, End tag: required
開始ラベル:必須、終了ラベル:必須
Attributes defined elsewhere
他の場所で定義された属性
タイトル要素は、説明したセクションのトピックを簡単に説明します.タイトル情報は、ユーザーエージェントによってドキュメントのディレクトリを自動的に作成するために使用できます.
There are six levels of headings in HTML with H1 as the most important and H6 as the least. Visual browsers usually render more important headings in larger fonts than less important ones.
HTMLには6つのレベルのタイトルがあり、H 1が最も重要であり、H 6が最も重要ではない.ビジュアルブラウザでは、通常、重要なタイトルに使用されるフォントは、相対的に重要でないタイトルに使用されるフォントよりも大きくなります.
The following example shows how to use the DIV element to associate a heading with the document section that follows it. Doing so allows you to define a style for the section (color the background, set the font, etc.) with style sheets.
次の例では、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>
Numbered sections and references HTML does not itself cause section numbers to be generated from headings. This facility may be offered by user agents, however. Soon, style sheet languages such as CSS will allow authors to control the generation of section numbers (handy for forward references in printed documents, as in "See section 7.2").
HTML自体がタイトルの部分コードを生成します.しかし、ユーザエージェントは、このようなメカニズムを提供することができる.間もなく、CSSなどのスタイルシート言語は、著者らが部分符号化の生成を制御することを可能にする.
Some people consider skipping heading levels to be bad practice. They accept H1 H2 H1 while they do not accept H1 H3 H1 since the heading level H2 is skipped.
ジャンプ式のタイトルレベルは悪い経験だと思っている人もいる.彼らはH 1 H 2 H 1を受け入れるが、タイトルレベルH 2がスキップされたため、H 1 H 3 H 1を受け入れない.
7.5.6 The ADDRESS element
<!ELEMENT ADDRESS - - (%inline;)* -- information on author -->
<!ATTLIST ADDRESS
%attrs; -- %coreattrs, %i18n, %events --
>
Start tag: required, End tag: required
開始ラベル:必須、終了ラベル:必須
Attributes defined elsewhere
他の場所で定義された属性
ADDRESS要素は、ドキュメントまたはフォームのようなドキュメントの主要部分の連絡情報を提供するために、著者らが使用することができる.この要素は、通常、ドキュメントの開始または終了に表示されます.
For example, a page at the W3C Web site related to HTML might include the following contact information:
たとえば、W 3 Cの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:37:50 $
</ADDRESS>