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