HTML 正從表現轉向語義，分離結構 (HTML) 與表現 (CSS)。單一 CSS 文件可控制全站樣式，利於維護、改版。本文梳理初學者易誤用的有害標籤與屬性，助你以一半工作量達成標準化開發。

可用 CSS 替代表現性標籤

標籤	語義/作用	推薦替代方案
<b>	加粗	<strong> 或 CSS font-weight:bold
<i>	斜體	<em> 或 CSS font-style:italic
<big>	大字	標題用 <h1>-<h6>，其他用 CSS font-size
<small>	小字	CSS font-size 控制
<hr>	水平線	CSS border-top/bottom 或圖片

以上標籤符合近期 HTML 標準，但不賦予語義，雖無顯著害處，仍建議棄用。

嚴重有害、應堅決拒絕的標籤

• <u>：下劃線像連結，誤導用戶，人們不喜歡無連結的下劃線文字。
• <center>：置中。CSS text-align 可控制 center/left/right/justify，功能更全。
• <menu>：菜單列表。<ul> 無序列表更通用，取代 <menu>。
• <layer>：類 <div>，僅舊版 Netscape 支援，實用性極低。
• <blink>、<marquee>：閃爍/跑馬燈。堅決說不，嚴重干擾閱讀。
• <font>：定義字體名稱、大小、顏色。舊網站濫用如白蟻，頁面膨脹主因之一。CSS 一句搞定全站，減輕體積、保持風格一致、易維護。<font> 濫用與表格佈局是頁面臃腫雙雄。

令人頭疼的寄生屬性

即使標籤正確，屬性也可能導致變質：

• name：表單 <input> 完美適用，其他場合被 id 取代。
• text、bgcolor：指定基礎文字/背景色。CSS color、background-color 用於 body 選擇器更佳。
• background：body 背景圖。CSS background-image 提供更強控制。
• link、alink、vlink：鏈接顏色。CSS 偽類 :link、:active、:visited 同等作用。
• align：元素對齊。CSS text-align 替代。
• target：新窗口打開。聽起來不錯但破壞「後退」鈕體驗，用戶不期望魔術般彈窗。不親切。
• 表現屬性（圖片 width/height、表格 cellpadding/cellspacing）非完美方案，但大量圖片/表格時可能無他選。
• <textarea> 除 cols、rows 外多數屬性莫名其妙，最新標準仍要求這兩屬性。

好標籤壞用：語義化的重要性

HTML 標籤為細節設計，正確使用才能最佳效果。語義化 HTML 讓屏幕閱讀器等輔助工具更易識別列表 (<ul>)、標題 (<h1>/<h2>)，提升無障礙訪問。

最嚴重濫用：表格佈局。表格僅用於表格數據。棄用表格佈局非盲目信仰，實減輕體積、易維護重設計。過渡期為兼容舊瀏覽器 (Netscape 4) 曾用表格，但其用戶極少且減少，移動端表格佈局更糟糕。權衡下，盡量少用風格兼容所有瀏覽器功能才是正道。

框架：看似美好實則危險

框架像三隻熊的粥——看起來不錯，危險時刻存在。多數網站不用框架，用戶只用單頁。除非你想：阻止用戶書籤特定頁、阻止郵件/IM 分享特定頁、增加屏幕閱讀器用戶導航複雜度、進入搜索引擎地獄。框架本質：只增加複雜度、損失可用性。

避坑三原則

1. 標籤/屬性名稱生僻 → 註釋或不用，提升 CSS 效率。
2. 讓標籤做符合名稱的工作：表格做數據、標題做標題。
3. 有明確內容用適當標籤：列表用列表、標題用標題。

作者：佚名 | 文章來源：完美童話