原文鏈接：http://www.w3school.com.cn/xhtml/xhtml_structural_01.asp

我們曾經為本節撰寫的標題是：“XHTML : 簡單的規則，容易的方針。”原因之一是，本節討論的規則和方針是簡單和容易的。原因之二是，一本簡單和容易的 WEB 設計圖書，就像超級市場的新式的免費商品一樣，雖然常見卻可以有效地吸引人的眼球，這樣的東西可以刺激人的興趣，并且鼓勵人們嘗試。

我確實希望本節的內容可以激發你的興趣，并鼓勵你去嘗試。為什么這么說呢？因為一旦你掌握了本章包含的簡單容易的理念，你就會重新思考網頁運作的方式，并開始改變建造它們的方法。然而我并不希望你只是將代碼重新改寫一遍。我希望你可以實實在在地以另一種方式思考和工作。

另一方面，重構才是 XHTML 真正的意義。

在本章，我們將研究結構化標記的機制和涵義。如果你正在將網站標準融入你的開發項目，你或許會覺得本章的內容有些熟悉。不過即便是這方面的老手，也會從本章發現意外的收獲。

XHTML 規則概要

將傳統的 HTML 轉換為 XHTML 1.0 是快捷且無痛的，只要你遵守一些簡單的規則和容易的方針。不管是否使用過 HTML，都不會妨礙你使用 XHTML。

    * 使用恰當的文檔類型聲明和命名空間。
    * 使用 meta 元素聲明你的內容類型。
    * 使用小寫字母書寫所有的元素和屬性。
    * 為所有的屬性值加引號。
    * 為所有的屬性分配值。
    * 關閉所有的標簽。
    * 使用空格和斜線關閉空標簽。
    * 不要在注釋中寫雙下劃線。
    * 確保小于號及和號為 < 和 &

Unicode 和其他字符集

XML、XHTML、和HTML 4.0 文檔的默認字符集是 Unicode，一個由 Unicode 聯盟定義的標準。Unicode 是一套全面的字符集，它為每個字符提供了一個特定的唯一的數字，不論平臺、程序和語言。Unicode 也是我們擁有的最接近通用字母表的事物，盡管它并不是一個字母表，而是一套數字映射方案。

盡管 Unicode 是 web 文檔默認的字符集，開發人員依然可以自由地選擇更適合他們的其他字符集。比方說，美國和西歐的網站常常使用 ISO-8859-1 (Latin-1) 編碼，而中華人民共和國的國家標準是 gb2312。

為表達語義而標記文檔，而不是為了樣式

記住：請最大限度地使用 CSS 來進行布局。在 web 標準的世界里，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 方面的技術。我們只是希望展示文檔結構和可視表達是兩個完全不同的事物，并且結構化元素應被用來轉換文本，而不是強加顯示效果。

 使用結構化元素，而不是無意義的垃圾

由于我們已經忘記或者根本不知道 HTML 和 XHTML 的用途是傳達結構化的意義，許多 HTML 爭論者這樣使用標簽來插入列表：

項目一<br />
項目二<br />
項目三<br />

考慮一下使用有序或者無序列表取而代之：

<ul>
<li>項目一</li>
<li>項目二</li>
<li>項目三</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;
    }

視覺元素和結構

web 標準不僅要求我們使用何種科技，而且還要遵守使用這些技術的方式。使用 XHTML 來編寫標記，同時使用 CSS 來處理一部分或者全部的布局，并不一定會使站點更易用更輕便，同時節約多少帶寬。就像我們在早期使用的技術那樣，XHTML 和 CSS 也會被誤用和濫用。冗長的 XHTML 和冗長的 HTML 一樣，都會浪費用戶的帶寬和時間。冗長的過度的 CSS 也不能完全的代替表現 HTML 代碼；這只不過是一種糟糕的東西被另一種代替了而已。