XHTML構造化の一つ：XHTMLを使ってウェブサイトをリコンストラクトする

我们曾经为本节撰写的标题是：“XHTML : 简单的规则，容易的方针。”原因之一是，本节讨论的规则和方针是简单和容易的。原因之二是，一本简单和容易的 WEB 设计图书，就像超级市场的新式的免费商品一样，虽然常见却可以有效地吸引人的眼球，这样的东西可以刺激人的兴趣，并且鼓励人们尝试。

我确实希望本节的内容可以激发你的兴趣，并鼓励你去尝试。为什么这么说呢？因为一旦你掌握了本章包含的简单容易的理念，你就会重新思考网页运作的方式，并开始改变建造它们的方法。然而我并不希望你只是将代码重新改写一遍。我希望你可以实实在在地以另一种方式思考和工作。

另一方面，重构才是 XHTML 真正的意义。

在本章，我们将研究结构化标记的机制和涵义。如果你正在将网站标准融入你的开发项目，你或许会觉得本章的内容有些熟悉。不过即便是这方面的老手，也会从本章发现意外的收获。

XHTML 规则概要

只要遵守一些简单的规则和容易的方针，将传统的 HTML 转换为 XHTML 1.0 是快捷且无痛的。无论是否使用过 HTML，都不会妨碍你使用 XHTML。

  • 请使用适当的文档类型声明和命名空间。
  • 请使用 meta 元素声明你的内容类型。
  • 请使用小写字母书写所有的元素和属性。
  • 请为所有的属性值添加引号。
  • 请为所有的属性分配值。
  • 请关闭所有的标签。
  • 使用空格和斜线来关闭空标签。
  • 注释中请不要写双下划线。
  • 小于号及和号应写作 < 和 &

Unicodeと他の文字セット

XML、XHTML、およびHTML 4.0ドキュメントのデフォルトの文字セットはUnicodeです。これはUnicode連合が定義した標準です。Unicodeは包括的な文字セットであり、各文字に特定のユニークな数字を提供します。Unicodeは、それはアルファベットではなく、数字のマッピングスキームであるため、最も一般的なアルファベットに最も近いものです。

Unicodeはウェブドキュメントのデフォルトの文字セットですが、開発者はより適した他の文字セットを選択することができます。例えば、アメリカやヨーロッパのウェブサイトでは、ISO-8859-1（Latin-1）エンコーディングがよく使用されていますが、中華人民共和国の国際標準はgb2312です。

ドキュメントを表現のためにマークアップするのではなく、意味を表現するために

覚えておいてください：レイアウトにはCSSを最大限に使用してください。ウェブ標準の世界では、XHTMLマークアップは表現とは関係なく、ドキュメントの構造に関連しています。

構造が良いドキュメントは、手機端末のブラウザからモダンなデスクトップグラフィックブラウザまで、可能な限り多くの意味をブラウザに伝えることができます。構造が良いドキュメントは、古いブラウザやCSSをオフにした現代のブラウザでも、ユーザーに視覚的な意味を伝えることができます。

すべてのサイトがすぐにHTMLテーブルレイアウトを放棄できるわけではありません。CSSの発明者であるW3Cは、2002年11月まで公式ウェブサイトをCSSレイアウトに変更していませんでした。しかし、厳格な標準主義者であっても、表現を構造から完全に分離することは常にできませんでした。少なくともXHTML 1ではそうではありませんでした。しかし、今では、表現を構造から分離すること（またはデータをデザインから分離すること）を通じて、混合の伝統的なレイアウトも利益を得ることができます。

以下のヒントが、より構造化された方法で思考を助けることができます：

目次内の色

文法学校では、私たちの多くは標準的な目次形式を使用して文章を書かざるを得ませんでした。今では、デザイナーとして、目次の制約から自由に解放され、独特な個人的な表現の自由な領域に大胆に飛び込むことができます（私たちのパンフレットやビジネスサイトはそれほどユニークで個性的ではありませんが）。しかし、少なくとも目次の煩わしさに悩まされることはありません。

実際には、HTMLに従えば、コンテンツを組織的な階層構造として構成化するべきです。CSSをサポートしないブラウザの時代には、販売可能なレイアウトを提供しながらこのことを行うことはできませんでした。しかし、今では、デザインを実現する際に完全にそのままにする能力を持ち、内在的な構造が良いドキュメントを提供することができます。

ネットワークで使用するテキストをマークアップする際、または既存の文書ドキュメントをウェブページに変換する際には、伝統的な目次のこれらの項目を考慮してください。

<h1>私のテーマ</h1>
<p>紹介的なテキスト</p>
<h2>補足的な意見</h2>
<p>関連するテキスト</p>

同時に、廃止されたHTML要素（例：<font>）や、無意味な要素（例：<br>）を使用して実際には存在しない論理構造をシミュレートすることを避けるべきです。

例えば、こんなことをしないでください：

<font size="7">私のテーマ</font><br />
紹介的なテキスト<br /><br />
<font size="6">補足的な意見</font><br />
関連するテキスト<br />

要素の外観ではなく、意味に基づいて要素を使用する

私たちの中には、h1を使用して大きなテキストが必要な場合や、前に点線を追加する必要がある場合にliを使用するという悪い習慣に陥っている人々がいます。前の章で議論したように、ブラウザは常にデザイン属性をHTML要素に強要しています。私たちはすべて、h1が大きな文字を意味し、liが点を意味し、blockquoteがテキストをインデントするという考え方に慣れています。多くの人々は、構造化された要素を使用して表示効果をシミュレートする方法でHTMLを乱暴に書いています。

同様に、デザイナーがすべてのタイトルに同じサイズを使用したい場合、彼らはすべてのタイトルをh1に設定します。それでも、これは構造化された意味がありません。

<h1>これはメインのタイトルです。私はテキストを要約形式で構築する場合。</h1>
<h1>これはメインのタイトルではありませんが、上のタイトルと同じフォントを使用したいと思っていますが、CSSの使い方がわかりません。</h1>
<h1>これは本当にタイトルではありません。しかし、ページのテキストが同じフォントを使用して、私が望むように
CSSを理解していれば、ドキュメントの構造を乱さずにこのデザインを達成できます。</h1>

私たちの小技を一時的に捨てて、要素の意味に基づいて使用し始めなければなりません。実際には、h1はあなたが望むどんな外観にもなり得ます。CSSを通じて、h1は非粗体の小さなローマ字に、pテキストは太字の大きな文字に、liは点がなくてもかまいません（または、小さな猫や犬、または会社のロゴのPNG、GIF、またはJPEG画像を使用して代わりに使用することもできます）などです。

今から、CSSを使用して要素の外観を決定します。要素がページ内またはサイト内の位置に応じて外観を変更することもできます。 CSSは構造から表示を完全に分離し、好きなスタイルでどの要素もフォーマットするのに許可します。

h1, h2, h3, h4, h5, h6 {
	font-family: georgia, palatino, "New Century Schoolbook",
	times, serif;
	font-weight: normal;
	font-size: 2em;
	margin-top: 1em;
	margin-bottom: 0;
	{}

なぜこんなことをするのか？その目的は、グラフィックブラウザでブランド化された外観と感覚を得ることを同時に、テキストブラウザ、ワイヤレスデバイス、HTML形式の電子メールで、ドキュメントの構造が保持されるようにすることです。

XHTMLの章でCSSの技術についてもっと詳しく説明するつもりはありません。私たちは、ドキュメント構造とビジュアル表現が全く異なる2つのものであることを示し、構造化要素がテキストを変換するために使用されるべきであり、強制的な表示効果を強要するためのものではないことを示したいだけです。

構造化要素を使用して、意図のないゴミと呼ばれるものを避ける

HTMLやXHTMLの用途は構造化された意味を伝えることですが、多くのHTML論争者が以下のようにリストを挿入しています：

プロジェクト1<br />
プロジェクト2<br />
プロジェクト3<br />

リストの代わりに、順序付きリストまたは無秩序リストを使用を検討してください：

<ul>
<li>プロジェクト1</li>
<li>プロジェクト2</li>
<li>プロジェクト3</li>
</ul>

"ただし、liは点を与えてくれ、私は点を必要并みません！" というかもしれません。上記の章によると、CSSは要素が期待される外観について何も仮定しません。あなたが期待する要素の外観を教えるのを待っています。点を閉じるのはCSSの最も基本的な能力です。リストが通常のテキストと同じように見えるようにしたり、グラフィックナビゲーションバーのように見えるようにしたり、完全な反転効果を持つようにしたりする能力があります。

したがって、リストをマークするためにリスト要素を使用してください。同様に、strongを使用してbを、emを使用してiを、などとします。ほとんどのデスクトップブラウザのデフォルト状態では、strongの表示効果はbと同じであり、emとiも同じです。同時に、ドキュメント構造を破壊しないまま、期待するビジュアル効果を作成することもできます。

CSSは要素の表示について何も仮定しませんが、ブラウザは多くの仮定を行っており、strongを他の効果ではなく太字として表示するブラウザは見つかりません（デザイン者がCSSで他の表示方法を指示していない場合を除きます）。もし、未知のブラウザがstrongを太字として表示しないことを心配している場合、以下のようなCSSルールを書けるかもしれません：

strong {
	font-weight: bold;
	font-style: normal;
	{}

視覚要素と構造

ウェブ標準は、どのテクノロジーを使用するかだけでなく、その方法に従うことを要求しています。XHTMLを使用してマークアップを書き、CSSを使用して一部または全てのレイアウトを処理することは、必ずしもサイトが使いやすく軽量になるわけではありません。また、どれだけの帯域幅を節約できるかも限られています。私たちが初期に使用していた技術と同様に、XHTMLとCSSも誤用や悪用されることがあります。長いXHTMLや長いHTMLと同様に、長い過度なCSSも完全に表示HTMLコードを置き換えることはできません。これは、一つの悪いものが別のものに置き換わっただけであります。