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