網頁製作中註意應用HTML標籤的問題_HTML/Xhtml_網頁製作

HTML已經嘗試去除表現和朝向內容髮展，導致這樣一個基本原理：從表現（CSS）中分離出內容意義（HTML）。這將會給網頁減肥，因為一個表現指令集合（以外部CSS文件的形式）可以應用到多個頁面。這也會使網站更易於管理因為全域變動可以從修改一個單獨的檔案得到。
部分不良標籤基本上是表現標籤（例如small），它們可以用更有意義和更簡單的CSS規則取代。其他的不僅用於表現，而且還是不必要的龐大（例如font標籤）或對可用性有害的可惡的（例如blink）。 標籤
以下這些是你可能會經常碰到的可以有更好選擇的標籤： b 可以用來產生粗體元素。使用strong（意味著強烈強調）代替更有意義，或者用CSS來完成這項工作，增加font-weight: bold的規則，用來表明粗體元素。 i可以用來產生斜體元素。使用em（表示強調），這也更有意義。或是可以用CSS來表現斜體：font-style: italic big可以產生較大字體。使用標題（如h1，h2等，當文本本來就是一個標題時）代替，增加了意義，或簡單地在CSS中使用font-size屬性，獲取更多的控制權。 small 可以產生小字體。 CSS（font-size）再一次取得更多的控制權。 hr 可用來展現一條水平線。在CSS中用hr設計很少見，CSS的border-top，border-bottom屬性或樸素的圖像做這個效果會更好。
上述的標籤與最新的HTML標準儘管都相容，但對內容卻沒有任何好標籤應有的意義。 They could be more useful but they aren't particularly harmful, and might easily be mistaken for innocent butter-wouldn't-melt-in-their-mouth nuggets of pure goodness when standing next to the following filthy tags. u可以為元素產生底線。它提醒著下劃線文字還很多連接關聯。這就是這個標籤死了很久的原因——你不必給非連接文字下劃線。 center可以用來居中在元素內部的元素。 CSS屬性text-align允許不只是center，還有left、right和justify。 menu用來建立選單清單。它並沒有ul做的完美，在因為無序列表更通用，ul高高地站在menu的屍體上。 layer和div元素相似，都由CSS絕頂位置。這僅僅能在舊版的Netscape中運作，所以再也沒有什麼用。 blink或marquee。大聲說不！它們應該像本身意義一樣被期待，但有著十分有限的支持，和，只會產生非常，非常噁心的笑話。 font，可以用來定義元素的字體名稱，尺寸和顏色，在標籤世界中理所當然地獲得了臭名昭著標籤之王榮譽稱號。舊的網站（甚至新的也有）像滿世界的瘟疫之蟻一樣佈滿整個頁面。大部分的font標籤激增是從網頁製作軟體帶來的，把font標籤包括顏色和尺寸用在每一個元素。 font標籤被濫用到出現在當前的每一個重複元素的（如，每次你使用p元素），而CSS，則可以用一條簡短的代碼來應用重複元素，甚至控制整個網站。使用CSS方法，不僅可以使頁面比被大量font標籤寄生的更苗條，而且更容易維護因為你所需要做得只是改變CSS文件中的一行，而不是逐一修改每一個font標籤。這也增加了維護一個一直保持設計風格一致的網站的可能性。 font標籤和不恰當的表格使用是兩個產生網頁不必要臃腫的主要原因。 屬性
可能你認為你正在使用良好的標籤，但還是有一些麻煩的寄生蟲屬性潛伏，它們隨時會冒出來。 name用來為一個元素指定一個名字，它在如input的表單元素中完全被接受，但在其它地方，name的工作已經被id屬性取代。 text和bgcolor可以在body起始標籤中定義頁面的基本文字顏色和背景顏色。 CSS的color和background-color屬性在應用到body選擇符時也可以做到。 background可以在body標籤中指定一個背景圖畫。 CSS會做得更好，用如background-image的屬性來處理背景圖。 link、alink、vlink在body標籤中用來指定連接（未訪問，啟動和已訪問）。 CSS寶貝－ :link、:active和:visited會做這項工作。 align可以用來對齊某個元素的內容（例如 <div align="center">Stuff</div>），但是，像center<code>center標籤，CSS的text-align<code>text-align屬性是新的老闆。 target<code>target可以用不同的方式開啟一個連接，最常用的是開啟新視窗（例如<a href="wherever.html" target="_blank">Help me</a><code><a href="wherever.html" target="_blank">Help me</a>）。看起來不錯，但你不要對你的網站這樣做。用戶並不預期不可思議的東西（例如新視窗）出現，而且最常用的瀏覽工具是瀏覽器的後退按鈕，如果你打開新窗口，這將不可用。它是非法和不易用的。 注意
保留標籤的表現屬性如圖像的width<code>width和height<code>height，表格的cellpadding<code>cellpadding和cellspacing<code>cellspacing，是由於這些元素經常使用不同的值。這不是完美的解決方案，但如果你的網頁有大量的圖像和表格，你沒有其他的明智選擇，只好使用它們。
最讓人難以理解的表現屬性是textarea<code>textarea標籤，它只有cols<code>cols和rows<code>rows兩個合法屬性，在最新的HTML版本中也是必須的。 良好標籤，不良使用
要進入你的臥室你可以彎腰通過一個狗洞，但等等，還有一扇有把手的為人類準備的門！哇，看——剛好適合一個進入。
使用HTML標籤（好標籤），無論相信與否（相信它！），有一個很好的理由：你使用它們有一個好前提，你就會有一個更好的結果。
網頁本身對使用者來說，比起HTML標籤語法語意更容易用，螢幕閱讀器常會在遇到一個ul<code>ul標籤或有著h1<code>h1或h2<code>h2的標題標籤時強調突出它們。
在HTML標籤世界中最被濫用的就是表格了。表格常常用來佈局，但表格應該只用來展示表格式數據，就如它們本身的設計意圖。不用表格的佈局方法不是追求開悟的某種禪，它不僅可以顯著地為網頁減肥，而且更易於維護和重新設計。 注意
有時侯設計者也會用在這裡提到的這些標籤和屬性（特別是用表格來佈局）來做過渡型的設計——既可以工作在舊版本的瀏覽器上（尤其是Netscape4），也可以工作在現代瀏覽器上。表格確實可以在CSS不稱職的Netscape4上有更強的表現控制。很不幸，這些用戶很少而且越來越少了，而展現表格佈局的缺點一覽無遺的行動裝置用戶越來越多。上述的無表格設計可以預防這些缺點，儘管對一小部分的用戶有些許的表現改變，但還能在所有的瀏覽其中保持著完全的功能。 框架
Goldilocks認為喝上一杯麥片粥是一個不錯的注意，但三個碩大的肉食哺乳動物突然出現，把她丟出窗戶。框架就是裝麥片粥的杯子。它們看起來似乎不錯，但已經到了瀕危階段而且很快就會消失。
大部分的網站並不是用框架，而一般使用者也會把一個文件當作一頁。
有些情況，如你要防止用戶不能把特定的網頁加到書籤，又如你希望用戶用Email或即時聊天軟體推薦特定的網頁，又或你想把整個網站變得十分複雜，讓使用螢幕閱讀器的使用者在框架之間頻繁操作，還或者你想迷惑搜尋引擎，夠了夠了，你使用框架吧！
總之，框架只會增加複雜性和喪失可用性。 注意
只要你遵守下列規則，你不會在犯錯上有前途：
1）一個標籤或屬性就算只有一點點的跟表現搭上，都不要使用。那是CSS的事。而CSS做得更好。
2）把標籤使用在如它的名字所暗示的用途上。表格標籤是用在表格式資料上的。標題標籤是用在標題上的。等等等等。
3）特定的內容用恰當的標籤。列表用list<code>list，標題用hx(x = 1 - 7)等等等等。

延伸閱讀 HTML進階指南的標準要點：戒掉壞習慣和轉向標準－相容於XHMTL