常見已淘汰的 HTML 排版標籤及替代方案
現代 HTML 非常重視內容結構與語意，因此不再使用那些單純為了版面外觀而設計的標籤。以下整理出舊時代常見的呈現與排版相關標籤，以及對應的現代替代方案：
<center> （置中對齊標籤，已棄用）
<center> 標籤曾用於將內容置中顯示，它在 HTML4 就被列為棄用，HTML5 中不再支援。替代方案：使用 CSS 的 text-align 屬性來置中內容。例如，可以在父元素（如 <div> 或 <p>）上設定 style="text-align: center;"。對於區塊元素本身置中，還可利用 CSS 設定 margin-left: auto; margin-right: auto;（如將區塊元素左右外距設為 auto 來置中自身）。
<!-- 舊寫法：使用 <center> 標籤置中內容 -->
<center>
<p>這段文字會置中顯示</p>
<img src="logo.webp" alt="Logo">
</center>
<!-- 新寫法：使用 CSS 置中對齊 -->
<div style="text-align: center;">
<p>這段文字會置中顯示</p>
<img src="logo.webp" alt="Logo">
</div>
上述新寫法透過 CSS 將文字與圖片置中，不僅達到與 <center> 相同的效果，還符合現代最佳實踐。將樣式從結構中分離出來有助於維護，也讓 HTML 結構更語意化。若需要置中整個區塊（例如固定寬度的區塊元素），可改用 .centered { margin: 0 auto; } 等 CSS 方法來置中。
<font> （字型標籤，已棄用）
<font> 標籤在早期用來設定文字的字體、大小、顏色等樣式，例如：<font color="red" size="4">。這類呈現效果現在全部交由 CSS 處理。替代方案：使用 CSS 字體樣式屬性（如 color、font-size、font-family 等）來控制文字外觀，可以直接在元素上使用 style 屬性，或（更佳做法）利用 CSS 構造類別。例如，用 <span> 搭配 CSS 取代 <font>。
<!-- 舊寫法：使用 <font> 設定文字樣式 -->
<p><font color="blue" size="5" face="Arial">Hello 世界</font></p>
<!-- 新寫法：使用 CSS 設定文字樣式 -->
<p><span style="color: blue; font-size: 24px; font-family: Arial;">Hello 世界</span></p>
上例中，舊寫法直接使用 <font> 設定文字為藍色、字體 Arial、大小5號；新寫法則改用 <span> 包裹文字並以行內 CSS 指定相同樣式。透過 CSS，我們可以更靈活地統一管理整站的字體樣式，也避免在 HTML 中摻雜過多表現細節。總之，不要再使用 <font>，而應以 CSS 替代，例如在樣式表中定義類別來套用字型樣式，使內容與表現分離。
<big> （放大文字標籤，已棄用）
<big> 標籤會將其包裹的文字放大一級（例如比正常字體大一號）。這屬於純樣式用途的標籤，已在 HTML5 中移除。替代方案：使用 CSS 的字體大小屬性來控制文字大小，或根據語意選擇適當的標籤。如果只是想呈現較大的字，可用 CSS 設定 font-size（例如搭配 %、em 或絕對像素值）。如果放大是為了表示標題或重點，應考慮使用標題標籤（如 <h1>～<h6>）或 <strong> 來傳達語意。
<!-- 舊寫法：使用 <big> 放大文字 -->
<p>今天的重點是 <big>前端性能優化</big>。</p>
<!-- 新寫法：使用 CSS 放大文字 -->
<p>今天的重點是 <span style="font-size: 1.2em;">前端性能優化</span>。</p>
在新寫法中，我們以 CSS 將文字放大（例如 1.2em 代表比父元素字體大20%）。這樣做既實現了視覺效果，又不會引入非語意化的標籤。如果這段文字在語意上屬於段落中的強調，可以改用 <strong> 或 <em> 來標記，再用 CSS 控制其大小。重點：<big> 僅改變外觀而無語意，應以 CSS 或語意標籤替代。
<blink> （閃爍文字標籤，已淘汰）
<blink> 是早期非標準（Netscape 瀏覽器提供）的標籤，用來讓文字閃爍。這種閃爍效果在現代網頁中不僅令人分心，對於癲癇或視覺敏感的用戶可能造成危害，因此已被淘汰。現代 HTML 不支援 <blink>，大多數瀏覽器根本不再實現它。替代方案：如非必要，不建議再製造閃爍效果。如果一定要實現類似效果，可使用 CSS 動畫或 JavaScript 來控制元素的顯示隱藏。例如可用 CSS @keyframes 定義動畫讓元素的透明度在0和1之間交替，或用 JavaScript 週期性地切換元素的 visibility。但務必慎重考慮可存取性，應提供機制讓使用者停用此效果（或遵守媒體查詢 prefers-reduced-motion 以在使用者不希望動畫時停用）。
<!-- 不建議的舊寫法：<blink>讓文字閃爍（現代瀏覽器多不支援） -->
<!-- <blink>警告：資料遺失！</blink> -->
<!-- 新寫法：使用 CSS 實現簡單的閃爍動畫 -->
<p class="blink-text">警告：資料遺失！</p>
/* 定義 blink-text 類，透過動畫讓文字閃爍 */
@keyframes blinker {
50% { opacity: 0; }
}
.blink-text {
animation: blinker 1s step-start infinite;
}
上例的新寫法中，我們以 CSS 動畫方式讓文字閃爍，而非使用已淘汰的 <blink> 標籤。同時，應用時可以配合 prefers-reduced-motion 媒體查詢，當使用者偏好減少動態效果時自動停用閃爍動畫，以提高無障礙體驗。總之，絕大多數情況下不建議使用閃爍效果，這類效果既不符合現代設計趨勢，也可能對使用者造成困擾。
<marquee> （跑馬燈文字標籤，已淘汰）
<marquee> 是早期 IE 瀏覽器的非標準標籤，可讓文字或圖片在區域內自動捲動（俗稱跑馬燈效果）。雖然部分瀏覽器仍支援 <marquee>，但它從未成為正式標準且在 HTML5 中被列為不該使用的元素。替代方案：建議避免使用自動滾動的跑馬燈效果；如果一定需要類似效果，應使用 CSS 或 JavaScript 實現。例如可用 CSS 的動畫配合 transform: translateX() 讓文字水平滾動，或使用 <div> 包裹可移動的內容，由 JavaScript 來改變其位置。這樣的實現可控性更高，且能遵循使用者設定（例如偵測 prefers-reduced-motion 來在使用者不希望動畫時停止滾動）。另外，內容自動滾動會降低資訊的可讀性和可存取性，因此務必提供替代方案（例如讓使用者可以暫停滾動或自行控制）。
<!-- 舊寫法：使用 <marquee> 滾動文字 -->
<!-- <marquee behavior="scroll" direction="left">最新公告：歡迎訪問我們的網站！</marquee> -->
<!-- 新寫法：使用 CSS 動畫實現滾動效果 -->
<div class="marquee-container">
<div class="marquee-content">最新公告：歡迎訪問我們的網站！</div>
</div>
.marquee-container {
overflow: hidden;
width: 300px; /* 跑馬燈區域寬度 */
}
.marquee-content {
display: inline-block;
/* 初始位置在容器右側外，向左移動 */
animation: marquee-scroll 5s linear infinite;
}
@keyframes marquee-scroll {
0% { transform: translateX(100%); }
100% { transform: translateX(-100%); }
}
上述新範例中，我們用一個容器 .marquee-container 裁剪內容，內部的 .marquee-content 透過 CSS 動畫持續向左平移，達到文字不斷滾動的效果。透過這種方式，我們可以加入額外控制（例如在內容上方加一個暫停按鈕，透過切換動畫播放狀態來停止滾動），這是 <marquee> 無法輕易實現的。總結：<marquee> 已屬過去產物，建議以更現代的 CSS/JS 手段實現類似效果，同時注意提供使用者控制以提升可讀性。
其他排版相關標籤
除了上述主要標籤外，還有其他幾個已經淘汰的排版標籤需要注意：
- <basefont>：用於設置整個頁面的基礎字體大小、顏色和字體系列。HTML4 就將其廢止。
替代方案：使用 CSS 在 body 元素上設定字體樣式。 - <spacer>：早期 Netscape 提供，可插入指定寬高的空白空間。
替代方案：使用 CSS 的 margin、padding 或 width、height 來製造間距。 - <nobr>：讓包裹的文字不換行。
替代方案：使用 CSS 的 white-space: nowrap; - <strike> / <s>：刪除線標籤，舊用法棄用。
替代方案：使用 <del>（表示刪除內容）或 CSS text-decoration: line-through; - <u>：底線標籤，HTML5 重新定義其語意。
替代方案：單純外觀用途應使用 CSS text-decoration: underline; - <tt>：打字機文字標籤，HTML5 已不再包含。
替代方案：使用 <code>、<kbd>、<samp> 或 CSS font-family: monospace;
框架與結構類已廢止標籤
早期 HTML 提供了一些用於頁面框架布局和文件結構的元素，但隨著技術演進，這些元素不是在語意上不夠恰當就是已被更新的方案取代。以下是這類標籤及替代方案：
<frameset> / <frame> / <noframes> （框架集相關標籤，已淘汰）
這三個標籤用於將瀏覽器視窗分割為多塊「框架」，每個框架載入獨立的 HTML 頁面。在 90 年代末和 2000 年代初，框架集（frameset）曾是常見的版面技術。然而，HTML5 完全捨棄了框架集：不再支援 <frameset>、<frame>，<noframes> 也隨之廢除。原因是框架帶來許多問題，包括不易書籤/分享、瀏覽歷史混亂、SEO 和可存取性差等。
替代方案：現代網頁布局應使用 CSS 及 JavaScript 來實現多區域的界面，而非框架。若需要嵌入其他網頁內容，可使用 <iframe>（內聯框架）元素。<iframe> 可在頁面中嵌入另一個 HTML 文件，但其用法需謹慎，並盡量以語意化方式整合內容。此外，更好的做法是以伺服器端包含（Server-side include）或前端模板來組合頁面，使最終輸出為單一的完整 HTML（而非多個框架拼湊）。對於舊有採用框架的系統，通常建議重構為使用現代技術的版型，比如 CSS Grid/Layout 來實現分欄，而不用依賴 <iframe>。
<!-- 舊寫法：使用 frameset 分割視窗（HTML4 時期） -->
<!--
<frameset cols="200,*">
<frame src="menu.html" name="menuFrame">
<frame src="main.html" name="mainFrame">
<noframes>
<body>您的瀏覽器不支援框架，請<a href="main.html">點此</a>檢視內容。</body>
</noframes>
</frameset>
-->
<!-- 新寫法：使用 CSS 排版或 <iframe> 嵌入 -->
<div class="container">
<div class="sidebar">
<!-- 菜單內容直接包含或由伺服器端載入 -->
{% include 'menu.html' %}
</div>
<div class="main">
<!-- 主內容 -->
...主區塊內容...
</div>
</div>
/* 新寫法：使用 CSS 進行佈局，例如 Flexbox 或 Grid */
.container {
display: flex;
}
.sidebar {
flex: 0 0 200px; /* 固定側邊欄寬度 */
/* 假設已經有 menu.html 的內容嵌入 */
}
.main {
flex: 1;
}
在舊寫法中，<frameset> 將頁面左右分為兩欄，載入兩個子頁面。新寫法示意透過伺服器模板直接將菜單與主內容合併在同一頁，並用 CSS Flexbox 定義左右布局。如果一定需要在頁面中嵌入第三方或獨立來源的內容，可以用 <iframe src="...">，但應確保其高度/寬度，以及提供替代內容以增進可存取性（例如透過 title 屬性描述 iframe 內容）。重點：<frameset>/<frame> 已成歷史，重構舊框架頁面時，優先考慮響應式設計和單頁應用等現代方案，以提升使用體驗。
<dir> （目錄列表標籤，已廢止）
<dir> 是早期用來顯示目錄清單的元素，本質上和無序清單 <ul> 類似。它在 HTML4 中被棄用，原因是語意不夠明確且重複了 <ul> 的功能。替代方案：使用 <ul> 或 <ol> 來建立清單，並配合 CSS 控制外觀。如果需要多欄顯示目錄，可透過 CSS 多欄布局或 Flexbox 等實現。
<!-- 舊寫法：使用 <dir> 顯示列表 -->
<!-- <dir>
<li>文件一</li>
<li>文件二</li>
</dir> -->
<!-- 新寫法：使用 <ul> 顯示列表 -->
<ul class="directory-list">
<li>文件一</li>
<li>文件二</li>
</ul>
.directory-list {
/* 假設需要類似目錄的樣式 */
list-style-type: square;
column-count: 2; /* 例如分兩欄顯示 */
}
<hgroup> （標題群組標籤，已廢止）
<hgroup> 是 HTML5 草案中曾經出現的元素，設計用於將多個標題元素（<h1>...<h6>）組成一個標題群組。典型用例是主標題搭配副標題。不過，規範制定者後來認為這種群組方式並不理想，導致混亂，因而在 HTML5 最終版中將 <hgroup> 移除。
替代方案：直接使用適當的標題元素來組織內容，並透過結構和樣式呈現層次關係。例如可以將副標題視為標題的一部分，用 <p> 或 <span> 放在主標題後面；或者將主副標題一起包含在一個 <header> 區塊中，以表明它們共同構成一個主題。開發者也可以使用 CSS 來調整副標題的外觀，使其看起來像從屬於主標題。關鍵在於保持標題階層語意正確：通常每個區塊內容應有一個主要標題（例如 <h1> 或 <h2>），副標題可以作為該標題的說明，無需特定元素包裹。
<!-- 舊寫法：使用 <hgroup> 群組標題（現已不支援） -->
<!--
<hgroup>
<h1>網站公告</h1>
<h2>更新最新消息與活動</h2>
</hgroup>
-->
<!-- 新寫法1：直接使用標題和段落結合 -->
<header>
<h1>網站公告</h1>
<p class="subtitle">更新最新消息與活動</p>
</header>
<!-- 新寫法2：或將副標題納入主標題標籤內，以標點區隔 -->
<h1>網站公告 <span class="subtitle">－ 更新最新消息與活動</span></h1>
.subtitle {
display: block;
font-size: 1.2em;
color: #666;
margin-top: -0.5em;
}
<listing> / <xmp> / <plaintext>（舊式純文字/程式碼標籤，已淘汰）
這三個都是非常早期（可追溯至 HTML3/2 時代）的元素，用於顯示預先格式化的文字或範例程式碼：
- <listing>：原意為列出程式碼清單，類似於現在的 <pre>，但會將內容視為純文字處理（某些瀏覽器會自動等寬字體顯示並保留空白換行）。
- <xmp>：意為 example，瀏覽器遇到 <xmp> 會將之後所有內容都當純文字，直到結束標籤為止（因此 <xmp> 內的 HTML 標籤不會被解析）。
- <plaintext>：與 <xmp> 類似，也是不解析後續內容，一直持續到文件結束或被其他方式終止。
這些元素都早已廢止，因為它們的行為過於極端且容易造成解析困擾。替代方案：使用 <pre> 搭配 <code> 來呈現預先格式化的文字或程式碼區塊。<pre> 會保留空白和換行，而 <code> 表示其中是程式碼片段。必要時，為了在程式碼範例中顯示 HTML 標籤，應手動轉義特殊字元（例如 < 轉換為 <）。這提供了對等的功能且更可控。
<!-- 舊寫法：使用 listing/xmp/plaintext（現在不被支援） -->
<!--
<listing>
for(i=0; i<10; i++){
document.write("*");
}
</listing>
-->
<!-- 新寫法：使用 <pre><code> 顯示程式碼，並轉義必要字元 -->
<pre><code>
for(i = 0; i < 10; i++){
document.write("*");
}
</code></pre>
還有其他一些結構相關的淘汰標籤，如 <isindex>（內建搜尋欄標籤，已廢止）。它用於在頁面插入一個單行文字輸入框，讓使用者可以對整個網站進行關鍵字查詢。HTML5 完全移除了這個元素。替代方案是使用標準的 <form> 表單搭配 <input type="text">（或 type="search"）建立搜尋欄。
內嵌媒體與互動相關的過時標籤
這一類包含過去用於插入多媒體或提供互動功能的標籤，因瀏覽器演變或安全性緣故被捨棄。以下是重要的例子：
<applet> （Java 小應用程式標籤，已廢止）
<applet> 用於在頁面內嵌執行 Java 小應用程式（Java Applet）。它在 HTML4 中就被建議改用更通用的 <object> 或 <embed> 來取代，到了現代瀏覽器，由於安全因素，大多已不支援 Java Applet，因此 <applet> 幾乎失去作用。替代方案：在 HTML 中嵌入外部互動內容現在主要用 <embed> 或 <object>。例如，要嵌入影片、音訊等多媒體，用 <video> 或 <audio> 等專用標籤；嵌入一般外來內容（如 PDF）可用 <object data="file.pdf" type="application/pdf">。至於 Java Applet 提供的功能，通常需用其他技術重寫（比如使用 HTML5 的 Canvas、WebGL，或後端運算結果直接輸出，或者使用現代前端框架重現互動）。簡言之，不要使用 <applet>。如果真的需要嵌入舊有 Java Applet，現實上也難以啟動它，因為主流瀏覽器已禁用 NPAPI 插件。
<!-- 舊寫法：使用 <applet> 嵌入 Java 小應用 -->
<!--
<applet code="GraphApplet.class" width="400" height="300">
Java applet 無法顯示時的後備文字。
</applet>
-->
<!-- 新寫法：依內容選擇適當方式，以下以嵌入影片為例 -->
<video src="intro.mp4" width="400" height="300" controls>
您的瀏覽器不支援影片播放，請下載影片檔案觀看。
</video>
<bgsound> （背景音效標籤，已淘汰）
<bgsound> 是 Internet Explorer 瀏覽器引入的非標準標籤，用於在頁面載入時自動播放背景音效。它沒有明顯的內容，透過屬性設定音效檔案及播放參數（如 loop 循環）。現代網頁標準不支援 <bgsound>，而且自動播放音頻通常被視為不佳的體驗並受到瀏覽器限制（很多瀏覽器禁止未經使用者互動就播放音訊）。替代方案：使用 HTML5 的 <audio> 元素來內嵌聲音。可以加入 controls 屬性提供播放控制介面，或使用 autoplay 和 loop 屬性實現自動循環播放（但注意現代瀏覽器對 autoplay 的限制：通常只有靜音音訊或使用者點擊後才允許自動播放）。
<!-- 舊寫法：IE專用的 <bgsound> 自動播放音樂 -->
<!-- <bgsound src="bgmusic.mp3" loop="infinite"> -->
<!-- 新寫法：使用 <audio> 控制播放 -->
<audio src="bgmusic.mp3" loop autoplay muted>
您的瀏覽器不支援音訊播放。
</audio>
上述 <audio> 標籤使用了 loop 循環播放，autoplay 自動播放，並加上 muted (靜音) 屬性以提高瀏覽器允許自動播放的機率（許多瀏覽器規定自動播放音頻必須靜音或非常短）。這提供了類似 <bgsound> 的功能，但更符合用戶期待：我們也可以選擇加上 controls 供使用者自行控制播放。為何不建議再用 <bgsound>？除了它早被淘汰外，強制背景音在可存取性和使用體驗上都不好——使用者可能被突如其來的聲音嚇到，而且無法方便地關閉。因此建議即便用 <audio>，也預設不要 autoplay，而讓使用者決定何時播放。
其他媒體相關標籤
還有其他一些與媒體相關的淘汰標籤：
- <noembed>：針對不支援 <embed> 的舊型瀏覽器提供的後備內容。隨著 HTML5 將 <embed> 納入標準並統一了嵌入方式，<noembed> 變得不再必要。
替代方案：直接在 <object> 或 <video> 等標籤的內容中提供後備內容即可。 - <keygen>：HTML5早期版本引入的元素，用於生成用戶端公私鑰對並傳送證書簽名請求。由於實作不一致、安全疑慮，HTML5.2 起廢止。
替代方案：使用 JavaScript 的 Web Crypto API 在瀏覽器端生成，或使用伺服器端生成證書。 - <menuitem>：HTML5 引入的實驗性元素，搭配 <menu type="context"> 用於定義功能表項目。由於瀏覽器幾乎沒實作，HTML5.2 將其移除。
替代方案：使用常規的元素配合 JavaScript 實現類似功能表。
除了上述分類討論的標籤，還有一些冷僻但已廢棄的元素值得了解：<acronym>（定義縮寫或首字母縮略詞，HTML5 移除了，請改用 <abbr>）、<content> 與 <shadow>（Web元件舊版規範中用於 Shadow DOM 的標籤，現已被 <slot> 元素取代）、<multicol>（早期提案的多欄文字布局標籤，現今應使用 CSS 的 column-count 等多欄屬性）、<nextid>（非常早期的元素，HTML標準早已移除）、<image>（少數瀏覽器曾實驗性支援，標準中請繼續使用 <img> 標籤）等。
語意化與可存取性的重要性 ????
在替換這些舊標籤的過程中，我們不僅是為了遵循新標準，更是在提升頁面的語意結構與可存取性：
- 語意化（Semantic）標記能讓我們寫出的 HTML 更清晰地表達內容的意義，而非外觀。這對於協作開發、人員維護都大有幫助。例如，用 <strong> 取代粗體的視覺標籤，代表其中文字很重要；用 <del> 取代刪除線，代表內容被移除了。語意明確後，樣式完全可以交給 CSS 去處理，這符合關注點分離的原則，使得 HTML 結構乾淨、邏輯清楚。
- 可存取性（Accessibility）則關乎各種使用者（包含視障、聽障等）是否能正確理解和使用我們的網頁。許多舊標籤因為只追求視覺效果，在無障礙層面是不友善的。例如 <marquee> 和 <blink> 讓文字移動或閃爍，螢幕閱讀器可能無法妥善朗讀其中內容，而且動態效果可能讓某些使用者頭暈或錯過資訊。又如 <font> 改變顏色大小，如果缺乏語意，視障者無從得知其重要性。以正確元素取代並提供適當屬性（如替代文字、標題）可以大大改善這些問題。
- 未來相容性：使用已廢棄的標籤可能在新版本瀏覽器中逐漸失去支援。雖一時看似「還能用」，但可能下一版就完全無效。例如 <acronym> 現在仍可能被部分瀏覽器當作 <abbr> 看待勉強顯示，但我們不能保證永久如此。而且HTML檢驗工具會對這些元素報出警告，使我們的頁面不再被視為嚴格有效（valid）。為了長期維護和升級考量，提早替換掉它們才是上策。
綜上所述，淘汰舊標籤不只是追新潮，更是為了打造更健康、可持續的網頁應用。透過語意化我們讓內容結構對人和機器都清楚明瞭，透過關注可存取性我們讓更多元的用戶族群都能獲益。這也是現代前端工程師在編寫HTML時需要秉持的理念。
問與答 Q&A
最後，讓我們以問答形式回覆一些開發者可能提出的問題，加深對上述知識的理解：
維護效率：使用 CSS 後，可以在一個樣式表集中管理所有樣式，比起在無數個 <font> 標籤上修改屬性要高效得多。當你想調整整站字體或顏色時，只需改 CSS 就行，而不必逐頁逐元素去改 HTML。
結構清晰：移除多餘的呈現標籤，HTML 結構會更簡潔，語意更突出。未來接手此專案的開發者，或是你自己過幾月重看代碼，都能更容易理解內容的層次，而不會被一堆雜亂的 <font>、<center> 淹沒。
相容性與標準：網頁標準在演進，舊元素可能在下一版本瀏覽器就丟棄支援。如果提早因應，可避免未來瀏覽器更新導致頁面樣式走樣。而且，使用標準方法能通過 HTML 驗證，有助於SEO排名與整體品質。
性能與最佳化：雖然單純用 <font> 或 <center> 不會明顯拖慢頁面，但大量的行內樣式或非語意標籤可能影響瀏覽器解析效率，CSS 合併優化等手段也無法應用在這些零散標籤上。切換到外部CSS可利用瀏覽器快取，減少HTML檔大小。
總而言之，現在花時間汰換是為將來節省更多時間。建議可以逐步進行：例如先用全域的 CSS 覆蓋大多數 <font> 樣式，再移除標籤，循序漸進提升程式碼品質。
簡言之：<b>/<i> 不是過時不可用，但開發者需理解何時使用它們最適合。若只是為了樣式，請用 CSS；若表示重要性，用 <strong>/<em> 會更清晰。保持HTML結構語意化，有利於SEO與可存取性，同時CSS能滿足任何視覺需求。
總結
希望以上問答澄清了常見疑惑。在實際開發中，謹記以現代最佳實踐替代舊有標籤，你的網頁將會在可讀性、維護性和跨裝置體驗上更上一層樓！
