長(zhǎng)期以來(lái)，格式化網(wǎng)站頁(yè)面時(shí)基本HTML元素的選擇都取決于它們的顯示的樣式。若需要一個(gè)帶有縮進(jìn)的段落，你可能會(huì)選擇用<blockquote>標(biāo)簽將這段文字包圍起來(lái)，讓段落兩端顯示出一些空白。但顧名思義，blockquote元素表示其中包含的內(nèi)容是一段引用自其他來(lái)源的文字。如果我們僅僅是為了讓某一段文字以縮進(jìn)形式顯示而使用blockquote元素，而這段文字卻并非引用自其他來(lái)源的話(huà)，那么就意味著我們錯(cuò)誤地使用了HTML標(biāo)簽——HTML標(biāo)簽是用來(lái)表示文檔結(jié)構(gòu)的。對(duì)于文檔的顯示樣式（例如某一元素的縮進(jìn)），應(yīng)該使用CSS來(lái)實(shí)現(xiàn)。
結(jié)構(gòu)化HTML文檔主要體現(xiàn)在對(duì)HTML標(biāo)簽正確、合理地使用中。選擇HTML標(biāo)簽時(shí)要根據(jù)其語(yǔ)義，而不是其樣式進(jìn)行。
既然現(xiàn)在CSS設(shè)計(jì)已經(jīng)是可用的了，那么就應(yīng)該把所有的格式化和設(shè)計(jì)相關(guān)的實(shí)現(xiàn)放在CSS文件中，讓HTML只用來(lái)表示文檔結(jié)構(gòu)。作為一門(mén)用來(lái)設(shè)計(jì)表現(xiàn)樣式的語(yǔ)言，CSS建立于HTML的文檔結(jié)構(gòu)之上并為其應(yīng)用可視化樣式，而HTML則只用來(lái)表示文檔的結(jié)構(gòu)，不再用于頁(yè)面樣式的設(shè)計(jì)中。
那么正確、合理的文檔結(jié)構(gòu)能夠帶來(lái)什么好處呢？我們所提到的“結(jié)構(gòu)”到底又是什么東西呢？
帶有語(yǔ)義的標(biāo)記
為表現(xiàn)樣式編碼和為實(shí)現(xiàn)正確的語(yǔ)義編碼，二者在基本原理上的差別比較微妙。這里給出了一段示例代碼來(lái)幫助我們更好地區(qū)別。下面這一段HTML就是為了實(shí)現(xiàn)某種表現(xiàn)樣式而編寫(xiě)的：
<br><br>
<b><font size="2">Our Family</font></b>
<br><br>
<font size="1">Pictured are Matt and Jeremy.As
usual,Matt is msking a funny face. We don't have many hotos
where he isn't.</font>
下面這一段HTML是為了達(dá)到正確的語(yǔ)義而編寫(xiě)的：
<div id="family">
<h3>Our Family</h3>
<p>Pictured are Matt and Jeremy. As usual, Matt is
making a funny face. We don?t have many photos where he
isn?t.</p>
</div>
在第一個(gè)代碼片斷中，所有的HTML標(biāo)簽都是用來(lái)表現(xiàn)樣式的。 <br>標(biāo)簽用來(lái)?yè)Q行，<b>標(biāo)簽用來(lái)給文本加粗，<font>標(biāo)簽則指定了文本顯示的大小。
而在第二個(gè)代碼片斷中，卻一點(diǎn)都沒(méi)有對(duì)頁(yè)面顯示樣式的說(shuō)明——h3和p元素僅僅用來(lái)描述頁(yè)面中某一段內(nèi)容的功能。p元素中包含了一個(gè)自然段的文字，而h3元素則表示其內(nèi)容是頁(yè)面中的第三級(jí)標(biāo)題。
關(guān)鍵之處就在于，第二個(gè)代碼片段并沒(méi)有考慮這些元素將要以何種樣式呈現(xiàn)出來(lái)，因?yàn)樵氐某尸F(xiàn)樣式將由CSS控制。之所以選擇這些標(biāo)簽，是因?yàn)樗鼈兦∪缙浞值孛枋隽似渲械膬?nèi)容。這也正是HTML中語(yǔ)義的概念：選擇何種HTML標(biāo)簽取決于標(biāo)簽本身的語(yǔ)義，而不是其默認(rèn)顯示出的樣式。
針對(duì)語(yǔ)義編寫(xiě)HTML所帶來(lái)的巨大優(yōu)勢(shì)將在本章稍后部分介紹?，F(xiàn)在我們只要記住，使用CSS進(jìn)行設(shè)計(jì)時(shí)的主要任務(wù)之一，就是從編寫(xiě)合法的、帶有良好結(jié)構(gòu)并擁有語(yǔ)義的HTML文檔開(kāi)始。完成了這一步之后，我們才能在這個(gè)堅(jiān)實(shí)牢固的基礎(chǔ)之上應(yīng)用各種CSS樣式。
創(chuàng)建良好的標(biāo)記
每個(gè)頁(yè)面都在結(jié)構(gòu)上有自己不同的需求，所以對(duì)于創(chuàng)建HTML來(lái)說(shuō)，很難找到一個(gè)完美的一攬子解決方案。但我們卻能夠總結(jié)出一些通用的指導(dǎo)方針，將這些要點(diǎn)爛熟于胸，一定會(huì)對(duì)編寫(xiě)HTML大有裨益。
?選擇DOCTYPE
在HTML的最開(kāi)始部分聲明DOCTYPE（Document Type的簡(jiǎn)寫(xiě)）可以讓瀏覽器或其他用戶(hù)代理知道你要使用的HTML語(yǔ)言的類(lèi)型。無(wú)論你打算選擇何種類(lèi)型的HTML語(yǔ)言，DOCTYPE都是一個(gè)健壯的文檔所必需的，也是你在編寫(xiě)HTML時(shí)要做的第一件事情。
“<p>標(biāo)簽”和“p元素”之間到底有什么區(qū)別？大多數(shù)時(shí)候它們表示的是同一個(gè)東西，但仍有一些細(xì)微的區(qū)別?！皹?biāo)簽”指簡(jiǎn)單的HTML分隔符，例如<p>、<div>和</body>等。而“元素”則是由一對(duì)開(kāi)始結(jié)束“標(biāo)簽”構(gòu)成的，用來(lái)包含某一些內(nèi)容——這里有一個(gè)值得注意的例外，即<br/>本身既是開(kāi)始標(biāo)簽又是結(jié)束標(biāo)簽，其中不包含任何內(nèi)容。
一般地，“元素”用來(lái)表示某一段明確的結(jié)構(gòu)，而“標(biāo)簽”則僅僅是用來(lái)創(chuàng)建文檔結(jié)構(gòu)的語(yǔ)法而已。
示例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
?指定語(yǔ)言和字符集
與聲明DOCTYPE同樣重要的是將HTML文檔指定為某一種人類(lèi)的語(yǔ)言。如果你曾偶然闖入某個(gè)看似亂碼的網(wǎng)頁(yè)，而實(shí)際上其文字卻是日語(yǔ)、希臘語(yǔ)、斯瓦希里語(yǔ)或者其他什么語(yǔ)言，你就會(huì)知道頁(yè)面編寫(xiě)者忘記設(shè)置頁(yè)面編碼所造成的后果了。因?yàn)镚oogle和其他搜索引擎會(huì)根據(jù)搜索請(qǐng)求的語(yǔ)言來(lái)過(guò)濾搜索結(jié)果，所以如果你不想放棄搜索引擎帶來(lái)的流量的話(huà)，那么正確地設(shè)置頁(yè)面的編碼將顯得極為重要。本章稍后將詳細(xì)介紹字符編碼的相關(guān)內(nèi)容。
示例：
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
設(shè)置文檔的XML語(yǔ)言。這里設(shè)置為英語(yǔ)的ISO代碼en。
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
設(shè)置文檔的字符集。這里為UTF-8。
?指定標(biāo)題
每個(gè)HTML頁(yè)面都需要一個(gè)用來(lái)描述頁(yè)面內(nèi)容的<title>元素。在訪(fǎng)客將頁(yè)面保存至收藏夾時(shí)，<title>元素中的內(nèi)容將作為鏈接的描述同樣被保存在訪(fǎng)客的瀏覽器中。搜索引擎也對(duì)<title>元素中包含的關(guān)鍵字格外感興趣，因此好的<title>可以明顯地提高頁(yè)面在搜索引擎中的排名。網(wǎng)站中的每個(gè)頁(yè)面都應(yīng)該盡可能地有一個(gè)唯一的標(biāo)題，標(biāo)題應(yīng)該極具描述性地概括該頁(yè)面的內(nèi)容，而不是泛泛地介紹整個(gè)站點(diǎn)。
?選用恰當(dāng)?shù)脑?/p>
我們?cè)谇懊嬉呀?jīng)分析了這個(gè)問(wèn)題，但還是有必要在這里重復(fù)一遍：根據(jù)文檔內(nèi)容的結(jié)構(gòu)而選擇HTML元素，而不是根據(jù)HTML元素的樣式。例如，用p元素包含文字段落，而不是為了換行；用blockquote包含被引用的文字，而不是為了得到縮進(jìn)等。
當(dāng)然，并不是所有的HTML元素都可以在XHTML 1.0 Strict標(biāo)準(zhǔn)中使用的。事實(shí)上，雖然XHTML 1.0 Strict標(biāo)準(zhǔn)（以及XHTML 1.1標(biāo)準(zhǔn)）中可使用的HTML元素較少，但這些元素卻有著更加明確的意義。若你在創(chuàng)建文檔時(shí)找不到合適的、可以恰當(dāng)描述其結(jié)構(gòu)的標(biāo)簽，那么可以考慮使用通用的div或span元素。當(dāng)然，這也是一個(gè)警告……接下來(lái)將會(huì)介紹。
示例：
<h3>The Road to Enlightenment</h3>
而不要使用這樣的HTML：
<code style="font-size: 1.5em;">The Road to Enlightenment</code>
?避免過(guò)度使用div和span
設(shè)計(jì)HTML時(shí)一個(gè)常見(jiàn)的錯(cuò)誤就是過(guò)度使用div和span。少量、必要地合理使用可以明顯增強(qiáng)文檔的結(jié)構(gòu)性。但若是文檔中使用了太多的div和span，那么你就應(yīng)該考慮一下是不是還有更加合適的HTML元素供選擇了。例如，若是h3更能表示內(nèi)容的含義，那么就不應(yīng)該使用div，span也不應(yīng)該替代label的作用。
但這并不意味著應(yīng)避免使用div和span。文檔中合適位置的少量div元素可以使文檔更易于應(yīng)用樣式，且在邏輯段落上也顯得更加清晰。我們可以將div看作一個(gè)可以被重用的容器：將內(nèi)容深深隱藏于太多的容器中并不是一個(gè)好主意，但是幾個(gè)合理位置中的div卻可以讓文檔顯得井井有條。
示例：
<div id="pageHeader">
<h1>css Zen Garden</h1>
<h2>The Beauty of <acronym title="Cascading Style
Sheets"> CSS</acronym> Design</h2>
</div>
?盡可能少使用標(biāo)簽
前面兩個(gè)提示所隱藏的含義就是，HTML標(biāo)簽使用得越少越好——事實(shí)上也確實(shí)如此。若想創(chuàng)建出良好的文檔結(jié)構(gòu)，那么盡可能少使用標(biāo)簽應(yīng)該是一個(gè)自始至終都要考慮的問(wèn)題。僅僅使用必要的標(biāo)簽，將其他不必要的都刪掉。這樣做的好處不僅在于能夠讓文件保持小巧（也就意味著用戶(hù)下載速度的提高），也可以讓瀏覽器能夠很快完成文檔的解析，即得到更快的呈現(xiàn)速度。
示例：
<p>The Zen Garden aims to excite, inspire, and encourage participation.</p>
而不要這樣：
<div>
<p><span class="text">The Zen Garden aims to excite,
inspire, and encourage participation.</span></p>
</div>
?適當(dāng)?shù)厥褂胏lass和id
為元素添加起標(biāo)示作用的屬性可以讓你在稍后很容易將該元素與CSS或JavaScript關(guān)聯(lián)起來(lái)。class是一類(lèi)可重用的屬性，能夠被重復(fù)應(yīng)用到頁(yè)面中的任何元素上；而id則是獨(dú)一無(wú)二的，同一個(gè)id在每個(gè)頁(yè)面上只能出現(xiàn)一次。
一個(gè)元素可以應(yīng)用多個(gè)class，一個(gè)class也可以應(yīng)用在多個(gè)頁(yè)面元素上。我們也可以為同一個(gè)元素同時(shí)應(yīng)用class和id，但要記?。涸谕粋€(gè)頁(yè)面上不能為多個(gè)元素指定相同的id。class和id可以選用字母或數(shù)字（a～z、A～Z、0～9）命名1，但必須以字母開(kāi)頭。雖然有些瀏覽器對(duì)class和id名稱(chēng)的大小寫(xiě)不敏感，但為了今后便于調(diào)試，還是小心為妙。
注釋?zhuān)? 下劃線(xiàn)“_”也可以使用?！g者注
三個(gè)合法的標(biāo)識(shí)符：
<body class="homepage">
<p id="introduction">
<div id="section5" class="top corner solid">
兩個(gè)不合法的標(biāo)識(shí)符：
<span class="15pxhigh">
<div id="footer"><div id="footer">
3.時(shí)間的檢驗(yàn)
若曾編寫(xiě)過(guò)在未來(lái)相當(dāng)長(zhǎng)的一段時(shí)間內(nèi)都要保持不變的文檔，你就會(huì)發(fā)現(xiàn)在編寫(xiě)的過(guò)程中必須處處小心，讓文檔盡可能完美。
以出版行業(yè)為例，為了保證語(yǔ)言流暢簡(jiǎn)潔和內(nèi)容的正確性，這本書(shū)曾被很多人修改編輯過(guò)。原因很明顯：與網(wǎng)頁(yè)在瀏覽器緩存中存在的時(shí)間相比，書(shū)籍在書(shū)架中停留的時(shí)間要長(zhǎng)得多。所有這些預(yù)先的檢查工作都是為了確保書(shū)籍在出版時(shí)的正確性（但愿出版后好運(yùn)相伴）。
但是在同樣的問(wèn)題上，網(wǎng)站卻沒(méi)有此類(lèi)的限制。每次用戶(hù)來(lái)訪(fǎng)，Web站點(diǎn)都從服務(wù)器將內(nèi)容發(fā)送給訪(fǎng)客。這樣就意味著，即使在網(wǎng)站發(fā)布之后，你仍舊可以修改頁(yè)面的內(nèi)容或重新設(shè)計(jì)頁(yè)面的樣式，每個(gè)再次訪(fǎng)問(wèn)的用戶(hù)都能夠立即看到這些變化，而并不需要像圖書(shū)這樣，只有重印或再版的時(shí)候才有機(jī)會(huì)修改。自然，網(wǎng)站的不斷改進(jìn)會(huì)讓人非常高興，但這也會(huì)讓那些簽了固定合同的設(shè)計(jì)師感到些許郁悶。
雖然禪意花園也是一個(gè)網(wǎng)站，但在編寫(xiě)HTML的過(guò)程中卻遇到了一些獨(dú)特的挑戰(zhàn)，讓這個(gè)過(guò)程更像是寫(xiě)書(shū)而不是網(wǎng)站。若是在用戶(hù)已經(jīng)提交了設(shè)計(jì)之后再修改頁(yè)面的HTML，那么就有可能破壞掉從前的設(shè)計(jì)，這也與禪意花園的最初目標(biāo)相悖。即使修改的僅僅是頁(yè)面中的文本，也會(huì)對(duì)文檔以及文檔中某塊內(nèi)容的大小造成影響，并有可能無(wú)法預(yù)知地改變某些作品的布局。這樣看來(lái)，一旦發(fā)布之后再對(duì)禪意花園的HTML進(jìn)行任何結(jié)構(gòu)或內(nèi)容的修改都可能是有害且不可接受的，所以在編寫(xiě)HTML時(shí)就需要盡可能小心準(zhǔn)確。