XHTML構造化その2：ケーススタディ：W3schoolの構造化タグ
いかなる場合でも、このセクションをスキップしないでください。この章を読むことで、あなたのスキルを向上させ、ウェブページを軽量化し、マークアップとデザインの違いについてより明確な理解が得られます。この章の理念は学習しやすいですが、ウェブサイトのパフォーマンスを大幅に向上させ、デザイン、作成、更新の便利性も高めます。
このセクションでは、論理的で簡潔なマークアップの書き方を学びます。これにより、バンド幅の流量を約50%削減し、サーバーの負荷とストレスを軽減しつつ、ウェブサイトの読み込み時間を短縮することができます。不要な要素を取り除き、役に立たない悪い習慣を変えることで、上記の目的を達成できます。
これらの悪い習慣は、特にCSSコードと主にテーブルベースのレイアウトを組み合わせたサイトで多くのウェブサイトを苦しめています。この方法は重く、経済的でなく、他の分野で経験豊富なデザイナーでも同じです。また、この問題が発生する確率は均等であり、手書きコードのサイトでも、DreamweaverやGoLiveなどのビジュアルエディタを使用して作成されたサイトでも同じです。
このセクションでは、これらの一般的なエラーについて説明し、それらを認識し、防止し、修正方法を学ぶことができます。ユニークな識別子属性（id）について詳細に説明し、それがどのように非常にコンパクトなXHTMLコードを書くことができるか、ハイブリッドレイアウトでも純粋なCSSレイアウトでも、を示します。
各要素は構造化する必要がありますか？
前節で述べたように、各要素は構造化できます。CSSは、順序付きまたは順序なしのリストを完全なナビゲーションバーに表示し、リバースボタンの効果も持つことができます。ドキュメントの内容は、通常の要素でマークアップされ、特定の構造化属性を通じて、それがウェブサイトのデザインでどのような意味的役割を果たすかを示します。
私たちは2006年にCodeW3C.comの最初の中国語テスト版を作成しました。最初からCSSを使用してレイアウトを行い、XHTMLを使用してドキュメントを構造化しました。その中のすべての要素は構造化されています。タイトルからリスト、段落に至るまでです。CodeW3Cの各ページで、リバース効果のあるホームボタンとサブメニューのボタンを見ることができます。以下は、これら2つのコンポーネントのXHTMLコードです：
<div id="header"><h1><a href="/">codew3cオンラインチュートリアル</a></h1></div> <div id="navfirst"> <ul id="menu"> <li id="h"><a href="/h.asp" title="HTMLチュートリアル">HTMLチュートリアル</a></li> <li id="x"><a href="/x.asp" title="XMLチュートリアル">XMLチュートリアル</a></li> <li id="b"><a href="/b.asp" title="ブラウザスクリプト">ブラウザスクリプト</a></li> <li id="s"><a href="/s.asp" title="サーバースクリプト">サーバースクリプト</a></li> <li id="d"><a href="/d.asp" title="dot netチュートリアル">dot netチュートリアル</a></li> <li id="m"><a href="/m.asp" title="マルチメディアチュートリアル">マルチメディアチュートリアル</a></li> <li id="w"><a href="/w.asp" title="建設マニュアル">建設マニュアル</a></li> </ul> </div>
div、id、他のアシスタント
正しく使用された場合、divは構造化マークアップの素晴らしいアシスタントになり、idは驚くほどの小さなツールであり、非常にコンパクトなXHTMLを書き、CSSを巧妙に利用し、標準のドキュメントオブジェクトモデル（DOM）を通じてサイトに複雑で洗練された動作を追加する能力を持つことができます。
W3Cは、最新のXHTML2草案のXHTML構造モデルでdivを以下のように定義しています：
div 要素は、id、class、role 属性と組み合わせて、ドキュメントに追加的な構造を提供する一般的なメカニズムを提供します。この要素は、内容にスタイルを定義しません。したがって、クリエイターはこの要素をスタイルシート、xml:lang、属性などと組み合わせて使用することで、XHTMLを彼ら自身のニーズと好みに適応させることができます。
div は division の略です。division は分割、領域、グループを意味します。例えば、一連のリンクを組み合わせると、ドキュメントの division が形成されます。
構造の一般的なメカニズムを確定する
HTMLを書くすべての人は、段落やタイトルなどの一般的な要素に非常に馴染みがありますが、div に対してはあまり馴染みがないかもしれません。W3Cの説明では、div 要素の理解の鍵となる「構造を追加する一般的なメカニズム」とあります。
このサイトのホームページでは、チュートリアルのカテゴリリストを div 内にまとめています。これは、チュートリアルのカテゴリが正文の要素の一部ではなく、独立しているためです。その中で、h2 要素は各チュートリアルのタイトルを示し、ul リスト要素は各チュートリアルの詳細なリストを示します。しかし、より大きな具体的な意味では、このチュートリアルのカテゴリは構造化された役割を果たしており、二級ナビゲーションコンポーネントとして機能しています。この役割を強調するために、navsecond という ID をこの div に使用しています。
<div id="navsecond"> <h2>HTMLチュートリアル</h2> <ul> <li><a href="/html/index.asp" title="HTMLチュートリアル">HTML</a></li> <li><a href="/xhtml/index.asp" title="XHTMLチュートリアル">XHTML</a></li> <li><a href="/css/index.asp" title="CSSチュートリアル">CSS</a></li> <li><a href="/tcpip/index.asp" title="TCP/IPチュートリアル">TCP/IP</a></li> </ul> <h2>XMLチュートリアル</h2> <ul> <li><a href="/xml/index.asp" title="XMLチュートリアル">XML</a></li> <li><a href="/xsl/xsl_languages.asp" title="XSL言語">XSL</a></li> ... ... ... ... </div>
どのような名前でも使用できます。\
クライアントが青色を選んだ場合、サイトの一部を「orangebox」（橙色のボックス）と名付けるのは非常に愚かです。以下のような状況では、自分が非常に愚かだと思うことがあります。最終的な納品までに6ヶ月しか残っていないのに、スタイルシートを調整し始め、どうしても「Gladys」（女性名）がナビゲーションエリア、サイドバー、または検索ボックスを代表するのか思い出せません。
したがって、「menu」、「content」、または「searchform」に id を指定することで、覚えやすくなります。さらに、マークはデザインとは異なり、構造の良いページはどのような形式にでも形式化することができます。これにより、純粋な CSS 布局やハイブリッド布局を使用する場合でも、表現マークを使用して考えたり創作したりする習慣を根本的に変えることができます。
id と class
id 属性は XHTML では新しいものではありません；class 属性や div 要素も同様です。これらはすべて HTML 時代に遡ります。id 属性は要素にユニークな名前を割り当てます。名前は割り当てられたページ内で一度だけ使用できます。（例えば、ページに id が「content」の div がある場合、他の div や他の要素ではその名前を使用できません。逆に、class 属性はページ内で何度も使用できます（例えば、ページの5つの段落が「small」または「footnote」という名前の class 名称を使用できます）。以下のマークは id と class の違いを明確にするのに役立ちます：
<div id="searchform">検索フォームコンポーネントはここに配置されます。これは、以下のようになります。 ページのセクションはユニークです。</div> <div class="blogentry"> <h2>今日のブログ投稿</h2> <p>ブログの内容はここに記載されます。</p> <p>ブログの内容の別の段落がここにあります。</p> <p>ページには多くの段落が含まれることがありますが、同じようにページのセクションもユニークです。</p> ブログには多くのエントリがあり得ます。ブログページは以下のように使用されます。 「blogentry」クラス（または他の何か）の複数のインスタンスがあります。 class).</p> </div> <div class="blogentry"> <h2>昨日のブログ記事</h2> <p>実際、ここでは別のclassが指定されたdiv内にいます。</p> "blogentry."</p> <p>彼らはウサギのように繁殖します。</p> <p>このページに10件のブログ記事がある場合、次のようなことが起こるかもしれません。</p> classが"blogentry"のdivが10個あります。</p> </div>
この例では、searchformという名前のdivが検索フォームを含むページエリアを囲むために使用され、div class="blogentry"はブログの各記事エントリを囲むために使用されます。ページには1つの検索フォームしかありませんので、このユニークなコンポーネントをidで注釈することを選びました。しかし、ブログには多くの（記事）エントリがありますので、この場合class属性が適用されます。同様に、ニュースサイトは通常複数のdivを使用し、これらのdivのclassは"newsitem"や他の名前と名付けられます。
すべてのサイトがdivを使用する必要はありません。ブログサイトはh1、H2、およびh2タイトルと<p>パラグラフのみを使用することができます。ニュースサイトも同様です。ここでblogentryクラスのdivを表示しているのは、サイトにdivを詰め込むことを推奨するのではなく、同じHTMLドキュメント内で複数回classを使用し、一度だけidを使用するという原則を示すためです。
粘性テープ理論
id属性を粘性テープに例えて考えることは役立ちます。私はミルクを買いに行くことを思い出させるために冷蔵庫にテープを貼り、電話にテープを貼り、遅延で支払いを行った顧客に電話をすることを思い出させるためにテープを貼ります。また、今月の15日までに支払いを行わなければならない請求書を思い出させるために帳簿のカバーにテープを貼ります。
idはドキュメント内の特別なエリアを示すために使用され、どのエリアが特別な処理が必要であることを警告します。この点で、id属性は粘性テープに似ています。特殊な処理を実現するために、この特別なidを使用してスタイルシートにいくつかのルールを書き込んだり、JavaScriptファイルにいくつかのコード行を追加する必要があります。例えば、あなたのCSSファイルには特定のルールがあり、これらのルールはidがsearchformのdiv内の要素にのみ適用されます。
あるid属性が特定のCSS規則のシリーズに対して磁石のようなものとして使用されると、それはCSS選択子と呼ばれます。多くの選択子の作成方法としては、idは使いやすいですが、多様な用途があります。
idの力
id属性は驚くほど強力です。以下のような能力があります：
- スタイルシート選択子として、コンパクトで最小化されたXHTMLを作成する能力を持たせます。
- 過去のname属性に代わる、ハイパーテキストのターゲットアンカーとして。
- DOMベースのスクリプトから特定の要素を定位する方法として。
- オブジェクト要素の名前として。
- 一般的な用途の処理（W3Cの例では、「HTMLページからデータを抽出したり、HTMLドキュメントを他の形式に変換する場合など、領域識別ツールとして使用される。」）のツールとして。
idのルール
id値は、文字またはアンダースコアで始まる必要があります；数字で始めることはできません。W3Cの検証ではこのエラーをキャッチしませんが、XMLパーサーではキャッチします。また、idを使用してフォーム内でJavaScriptと連携する場合、id名と値は合法なJavaScript変数でなければなりません。スペースやハイフンは、特にハイフンは許可されていません。さらに、classやid名にアンダースコアを使用することは推奨されません。なぜなら、CSS2.0（および一部のブラウザ）での制限があるためです。
意味のあるタグとアクセシビリティ
今では、幅広い用途を持つXHTML要素（特にdivとid）について話し合ったことを振り返り、このサイトのトップページに関する例を考えてみましょう。まず、ヘッダー位置にあるこのメニューを振り返ってみましょう：
<div id="navfirst"> <ul id="menu"> <li id="h"><a href="/h.asp" title="HTMLチュートリアル">HTMLチュートリアル</a></li> <li id="x"><a href="/x.asp" title="XMLチュートリアル">XMLチュートリアル</a></li> <li id="b"><a href="/b.asp" title="ブラウザスクリプト">ブラウザスクリプト</a></li> <li id="s"><a href="/s.asp" title="サーバースクリプト">サーバースクリプト</a></li> <li id="d"><a href="/d.asp" title="dot netチュートリアル">dot netチュートリアル</a></li> <li id="m"><a href="/m.asp" title="マルチメディアチュートリアル">マルチメディアチュートリアル</a></li> <li id="w"><a href="/w.asp" title="建設マニュアル">建設マニュアル</a></li> </ul> </div>
私たちは7つのリンクを持ち、それぞれのリンクには対応する内容に対応する id が割り当てられています：例えば、h という id は HTML 教程に対応し、そのようにして続きます。これらのリンクは menu というリスト要素に統合されており、menu という id はこのリストの機能を示しています - メニューリストです。さらに外側には navfirst という div が用いられ、ページ内のこのセクションを、メインコンテンツ（maincontent）、サイドバー（sidebar）、フッター（footer）などの要素と区別しています。
div と ul の二つの要素は実際の構造を提供しており、中の内容の機能（ナビゲーションバー）とそのドキュメント内の位置（ページのヘッダー位置）を示しています。逆に、伝統的なテーブルレイアウトはデータに関する任何義情報を提供することができず、3倍の帯域幅を消費します。
これらのマークアップには img タグが含まれていないため、width、height、background、border などの属性に影響を与えません。また、テーブルセルを使用していないため、関連する一連の属性にも影響を与えません。非常にシンプルで小さく、その理解に必要なすべての情報を提供しています。
CSS と組み合わせて使用することで、これらのマークアップは訪問者に信頼性が高く、迅速にロードできるレイアウトを提供します。また、訪問者により柔軟で多様な外観を作成する可能性を提供します。CSSがない環境でも、構造が良く整ったマークアップは混乱なくすべてのコンテンツを提供できます。
鋭い目を持つ読者は既に気づいているかもしれませんが、a 要素に含まれるテキストはブラウザによって表示されていません。これは構造化マークアップと CSS の完璧な組み合わせのおかげです。数行の CSS 规則でトリガーメカニズムを定義することができ、グラフィックブラウザを使用するユーザーには美しいナビゲーションボタンが表示され、テキストのみのリーダーを使用するユーザーでも全文が読めるようにしています。そのため、すべてのユーザーにとって内容は同じです。
さらに、タグに画像やテーブルセルが含まれていないため、このナビゲーションコンポーネントは構造を変更せずにサイト内のどのページでも参照でき、異なる視覚効果を提供できます。一言で言えば、コードのモジュール化を通じて、コードの再利用性を高めました。
