原文鏈接：http://www.w3school.com.cn/xhtml/xhtml_structural_02.asp 無論如何，不要跳過本節。閱讀本章將增進你的技能，為你的網頁減肥，并且使你對標記與設計之間的差異有更清晰的認識。本章中的理念是易于學習的，但是卻能極大的提高網站的性能，以及設計、制作和更新網站的便利性。
在本節，你將學到如何撰寫合乎邏輯的、緊湊的標記，使得你有能力將帶寬流量降低50%左右，在減少服務器負擔和壓力的同時，減少網站的加載時間。通過去除那些表現元素，并改掉那些沒有任何好處的壞習慣，我們就可以達到上述的目的。
這些壞習慣折磨著網絡中的許多站點，特別是那些將 CSS 代碼與主要基于表格的布局混合在一起的站點。這種做法笨拙且不經濟，即使是對于那些在其他領域很有經驗的設計師來說。同時，出現這個問題的幾率是均等的，不論是那些手寫代碼的站點，還是利用可見編輯工具，比如 Dreamweaver 和 GoLive，來創建的站點。
本節會提出這些常見的錯誤，這樣你就可以識別和防范它們，并且學會如何改正錯誤。我們詳細闡述唯一標識符屬性 (id) - ，并展示它如何使你可以編寫極其緊湊的 XHTML 代碼，不論你創建的是混合布局還是純粹的 CSS 布局。
每個元素都必須結構化嗎？
正如上一節中我們講到的那樣，每個元素都可以被結構化，CSS 可使得一個有序或無序的列表顯示為徹頭徹尾的導航欄，其中還擁有反轉按鈕效果。文檔的內容可以通過普通的元素進行標記，這些元素通過特定的結構化屬性標志來指示出它們在網站設計中所扮演的語義角色。
我們在公元 2006 年創建了 W3School 的第一個中文測試版，我們在一開始就使用了 CSS 進行布局，并使用 XHTML 來結構化文檔。每一個其中的元素都是結構化的，從標題到列表，乃至段落。你可以在 w3school 的每個頁面看到具有反轉效果的首頁按鈕和二級菜單按鈕。下面是這兩個組件的 XHTML 代碼：
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。
你可以使用任何命名。"Gladys" 和 "orangebox"都完全符合 XHTML 的命名規則。但是語義的 (semantic) 或者元結構化 (meta-structural) 的命名是最好的（即能夠解釋其中元素所執行功能的命名）。
當客戶決定使用藍色時，你會覺得將站點某部分命名為 orangebox（橙色框）會非常地傻。下面的這種情況中，你會覺得自己更傻，當距離最后交付只有六個月時，你開始調校樣式表，卻怎么也想不起來 "Gladys"（格拉迪斯，女子名）到底代表導航區、側欄還是搜索框。
因此，將 id 標注為 "menu"、"content" 或者 "searchform"會幫助你回憶。進一步講，標記不等同于設計，結構良好的的頁面可以被格式化為你希望的任何樣子。這樣做的結果是，無論你使用純粹 CSS 布局或者混合布局，你都會徹底改掉使用表現標記進行思考和創作的習慣。 id Vs. class
id 屬性對于 XHTML 并不新鮮；class 屬性或者 div 元素也一樣。它們都可以回溯到 HTML 時代。id 屬性為一個元素分配一個唯一的名字。每個名字只能在被賦予的頁面使用一次。（例如，假如你的頁面包含 id 為 content 的 div，那么另外一個 div 或者其他別的元素都不能使用這個名字。相反地，class 屬性可以被一遍又一遍地使用在頁面中（例如，頁面中的五個段落都可以使用名為 "small" 或者"footnote" 的 class 名稱）。下面的標記將有助于闡明 id 和 class 的差異：
在這個例子中，名為 searchform 的 div 被用來封裝包含搜索表單的頁面區域，而 div class="blogentry" 則用來封裝 blog 中的每個文章入口。在頁面中只有一個搜索表單，所以我們選擇 id 標注這個唯一的組件。但是 blog 則擁有許多的（文章）入口，所以 class 屬性被應用于這種情況。同樣地，新聞站點通常擁有多個 div，這些 div 的 class 可以命名為 "newsitem" 或者別的什么。
然而不是所有的站點都需要 div。blog 站點可以僅僅使用 h1, H2, 和 h2 標題和 <p> 段落，新聞站點也一樣。我們在這里展示 class 為 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 的腳本來定位特定元素的方法。 * 作為對象元素的名稱。 * 作為一種綜合用途處理 (general purpose processing) 的工具（在 W3C 的例子中，“當把數據從HTML頁面中提取到數據庫，或將 HTML 文檔轉換為其他格式等情況下，作為域識別工具來使用。”）。
id的規則
id 值必須以字母或者下劃線開始；不能以數字開始。雖然 W3C 驗證不會捕獲這個錯誤，但是 XML 解析器會的。同時，如果你將 id 與 JavaScript 在表單中配合使用，那么 id 名稱和值必須是合法的 JavaScript 變量。空格和連字號，特別是連字號，是不被允許的。不僅如此，將下劃線用于 class 或者 id 名都不是個好主意，這是由于在 CSS2.0（以及某些瀏覽器）中的限制。
語義標記和可用性
現在，我們已經討論過了用途廣泛的 XHTML 元素（特別是 div 和 id），讓我們在看看關于本站首頁的例子。首先讓我們回顧一下這個位于報頭位置的菜單：
我們擁有七個鏈接，每個鏈接被分配一個id來對應相應的內容：例如名為 h 的 id 對應 HTML 教程，以此類推。同時這些鏈接被封裝于名為 menu 的列表元素內，名為 menu 的 id 標明了這個列表的職能 - 一個菜單列表，而更外圍的名為 navfirst 的 div 則用來標注頁面中的這個節 (section)，將之與諸如主要內容 (maincontent)、側欄 (sidebar) 和頁腳 (footer) 之類的元素區別開來。
div 和 ul 兩個元素提供了真實的結構，即標明了其中內容的職能（導航欄）和它在文檔中所屬的位置（頁面的報頭位置）。相反地，傳統的表格布局無法提供有關數據的任何語義信息，同時會輕松地吃掉三倍的帶寬。
請注意這些標記沒有包含img標簽，所以不會牽扯到 width、height、background 或者 border 等等屬性。同時它沒有使用表格單元格，也不會涉及相關的一系列屬性。它非常地干凈小巧，同時提供了所有可供理解它的信息。
通過與 CSS 配合使用，這些標記向網站訪問者提供了可靠的可快速加載的布局。同時也提供了為訪問者創造更靈活多樣的外觀的可能性。并且在無 CSS 的環境中，我們的結構良好的標記依然可以毫不混亂地提供所有的內容。
目光敏銳的讀者也許已經發現，a 元素中包含的文本并沒有被瀏覽器顯示出來，這也要歸功于結構化標記與 CSS 的完美配合，使我們可以通過幾行 CSS 規則來定義一個觸發機制，當用戶使用圖形瀏覽器時，他們會看到漂亮的導航按鈕，而當用戶使用純文本的閱讀器時，他們也可以得到全部的文本，這樣，對所有的用戶來說，內容都是一樣的。
并且，由于標記沒有包含圖像和表格單元，這個導航欄組件可以在不改變結構的情況下被站點內的任何頁面所引用，同時賦予它不同的視覺效果。簡而言之，通過對代碼進行模塊化，我們提高了代碼的復用性。