HTML 有許多標籤，許多人每天都在使用，例如 <div>、<p> 和 <a>。但也有一些隱藏的寶石，常常被忽視。這些標籤可以幫助使網站更加引人入勝、可及性更強且更具意義，而不需要太多額外的努力。

在本文中，我們將討論一組獨特的 HTML 元素，可以增強您的網頁。它們提供了特定的功能，用於格式化文本、改善可讀性和添加互動特性。

目錄

  1. <q> 標籤：短行內引用

  2. <s> 標籤：刪除線文本

  3. <mark> 標籤：高亮文本

  4. <ruby> 標籤：註解東亞語言文本

  5. 〈time〉標籤：語義時間和日期

  6. 〈bdi〉標籤：雙向文本隔離

  7. 〈dfn〉標籤：定義術語

  8. 〈wbr〉標籤：換行機會

  9. 〈ins〉標籤：插入文本

  10. 標籤 <del>：刪除的文字

  11. 結論

標籤 <q>：短行內引用

標籤 <q> 用於在段落中添加短引用。它有助於使引用看起來不同且更容易被發現，而不會打斷文本的流暢性。此標籤會自動在內容周圍添加引號。

描述與語法

標籤 <q> 的基本結構很簡單：

<p>She said, <q>This is amazing!</q></p>

這將顯示為：
她說：“這太棒了！”

它與標籤 <blockquote> 的區別

標籤 <q> 用於句子中的短引用。另一方面，標籤 <blockquote> 用於較長的引用，通常需要自己的空間或段落。

例如：

<blockquote>
  "This is a long quote that needs its own space. It is different from a short quote."
</blockquote>

這個區塊將顯示為縮排，旨在突出一大段引用的文字。

使用案例：在段落中添加引用

<q>標籤非常適合需要在句子中提及引用而不將其分開的情況。例如，在引用文章或博客文章中：

<p>The professor said, <q>Practice makes perfect</q>, during the class.</p>

在這種情況下，<q>標籤使引用保持小範圍內並放在同一段落中。

教授說，在課堂上，熟能生巧。

瀏覽器兼容性和樣式提示

大多數現代瀏覽器會自動向<q>標籤內容添加引號。但如果需要，您可以使用 CSS 更改其外觀。以下是如何設置樣式：

q {
  quotes: "«" "»";
  font-style: italic;
}

此代碼將引號更改為法式樣式標記（« 和 »），並將引用設為斜體。

大多數瀏覽器支持<q>標籤，因此您無需擔心現代用戶的兼容性問題。但較舊的瀏覽器可能需要額外注意，因此請始終測試您的受眾是否使用較舊版本。

<s>標籤：刪除線文字

<s>標籤用於顯示不再正確、相關或已被刪除的文本。它在文本中間加上一條線，我們稱之為“刪除線”。該標籤通常用於指示已經編輯或更新的內容。

解釋和用法

<s>標籤使用簡單。將其包裹在要劃掉的文本周圍：

<p>This product was <s>$50</s> now only $30!</p>

這將顯示為：
此產品原價$50，現在只要 $30！

常見用例：指示已刪除或不相關的內容

<s> 標籤非常適合顯示價格變動、編輯或不再有效的內容。例如：

價格更新:

<p><s>$75</s> $50 (Limited Offer!)</p>

$75 $50（限時優惠！）

更正或變更:

<p><s>Old website address</s> New website address</p>

舊網站地址 新網站地址

不再相關的內容:

<p>This feature is <s>no longer available</s>.</p>

此功能 不再可用.

使用 CSS 的樣式可能性

您可以使用 CSS 自訂刪除線的外觀。例如，您可以更改線條或文本的顏色：

s {
  text-decoration: line-through;
  color: red;
}

在這種情況下，文本會有紅色的刪除線，強調它已被刪除的事實。

語義意義與視覺裝飾

<s> 標籤具有一定的語義意義。它通常表示曾經有效但現在不正確或過時的內容。這不僅僅是一種樣式變化。例如，它非常適合顯示法律文件中的變更、部落格文章中的更正或價格更新。

另一方面，如果您只是將刪除線用作視覺裝飾，而不意味著文本是錯誤的，則最好直接使用 CSS，如下所示：

span.strike {
  text-decoration: line-through;
}

然後在您的 HTML 中應用：

<p>This text is <span class="strike">crossed out</span> just for fun!</p>

這種方法純粹是為了樣式，並不具有與 <s> 標籤相同的意義。

<mark> 標籤：突出顯示的文本

<mark> 標籤用於突出顯示文本。它有助於吸引注意某些內容的部分，使其更為顯眼。默認情況下，當使用 <mark> 標籤時，瀏覽器會用黃色背景來突出顯示文本。

<mark> 標籤的目的

<mark> 標籤非常適合在你想強調某些重要內容時使用。它通常用於顯示搜索結果、最近的變更或任何需要特別注意的文本。

這裡有一個它如何工作的例子：

<p>This is a <mark>highlighted</mark> word.</p>

這將顯示為：
這是一個 突出顯示的 單詞。

使用 <mark> 進行強調或搜索結果的最佳實踐

突出關鍵詞：如果你想在文章或博客中強調重要的單詞或短語，<mark> 標籤是個簡單的方法：

<p>The most important concept here is <mark>efficiency</mark>.</p>

這裡最重要的概念是 效率。

搜索結果：在網頁上顯示搜索結果時，使用 <mark> 標籤突出顯示匹配的術語，可以使用戶更容易找到他們所尋找的內容：

<p>Your search for <mark>HTML</mark> found these results:</p>

你搜索的 HTML 找到了這些結果：

最近更新：你也可以使用 <mark> 標籤來顯示內容中的新更新或變更：

<p>We have recently added the <mark>new feature</mark> to the app.</p>

我們最近在應用中添加了 新功能。

如何有效地為突出顯示的文本進行樣式設計

雖然<mark>的預設顏色是黃色，但您可以使用CSS來更改它，以符合您網站的設計。以下是一個自定義突出顯示文本的範例：

mark {
  background-color: lightblue;
  color: black;
  padding: 2px;
}

這將使文本具有淺藍色背景和黑色文本。

如果您希望文本更突出，您可以添加邊框或更改字體樣式：

mark {
  background-color: yellow;
  color: black;
  font-weight: bold;
  border-radius: 4px;
}

這將使突出顯示的文本看起來更精緻且引人注目。

瀏覽器支持和無障礙考量

<mark>標籤在所有現代瀏覽器中都受到支持，因此您不會面臨任何兼容性問題。只需確保您選擇的背景顏色提供足夠的對比度以便於閱讀，特別是對於視力障礙的使用者。

使用淺色背景搭配深色文本是一個不錯的基本法則。測試顏色對比度可以確保突出顯示的內容對所有人，包括使用螢幕閱讀器的人，都能保持無障礙。

<ruby>標籤：註釋東亞語言文本

<ruby>標籤用於在文本中添加小註釋，通常見於日語或中文等東亞語言中。這些註釋幫助讀者理解發音或意義，特別是當字符複雜或不熟悉時。

<ruby>的定義和使用案例

在日語等語言中，通常會在字符上方或旁邊使用小指南來顯示如何發音。<ruby>標籤將主要文本與小註釋配對，通常使用更簡單的字形。

這是一個基本範例：

<ruby>漢 <rt>かん</rt> 字 <rt>じ</rt></ruby>

這顯示了日文漢字 漢字 及其發音（振假名）顯示在上方或旁邊，如 かんじ（漢字）。


漢 かん 字 じ

<rp> 和 <rt> 子元素的重要性

<rt> 元素用於 <ruby> 標籤內，定義主要文本的註解（如發音）。它代表「ruby text」。

<ruby>漢 <rt>かん</rt></ruby>

這將顯示 漢 和 かん（漢）作為註解顯示在上方。


漢 かん

<rp> 元素，簡稱「ruby parenthesis」，用作對於不支持 <ruby> 標籤的瀏覽器的後備方案。它將額外字符（如括號）包裹在ruby文本周圍，以顯示這是一個註解：

<ruby>漢 <rp>(</rp><rt>かん</rt><rp>)</rp></ruby>

如果瀏覽器不支持ruby註解，它將顯示括號內的發音，如下所示：
漢 (かん)。

實用範例：語言學習的ruby註解

<ruby> 標籤是語言學習者的一個有用工具。它可以直接在不熟悉的單詞或字符上方或旁邊顯示其發音。這使得初學者更容易閱讀和學習新詞彙。

例如，假設你想幫助某人學習中文的「人」這個詞：

<ruby>人 <rt>rén</rt></ruby>

這將顯示 人 和發音 rén 在上方。


人 rén

對於較長的句子：

<p><ruby>我 <rt>wǒ</rt></ruby> <ruby>是 <rt>shì</rt></ruby> <ruby>学生 <rt>xuéshēng</rt></ruby>.</p>

這幫助學生同時看到字符和正確的發音。

我 wǒ 是 shì 學生 xuéshēng.

跨瀏覽器相容性與渲染考量

大多數現代瀏覽器都支援<ruby>標籤，但舊版瀏覽器可能無法正確渲染。這時候<rp>元素就派上用場，確保即使瀏覽器不支援ruby文本，註解仍然可讀。

為了無障礙，確保註解周圍有足夠的空間，使其易於閱讀。你也可以使用CSS調整註解的外觀：

ruby rt {
  font-size: 0.75em;
  color: gray;
}

這將使ruby文本變小並且顏色不同，以保持其與主要內容的視覺分離。

使用<ruby>是一種提高語言學習者或對某些字母不熟悉的讀者可讀性的好方法。只需記得檢查瀏覽器支援並添加備用方案，以便在不同設備上提供更好的使用體驗。

<time>標籤：語義時間與日期

<time>標籤用於標記機器可讀格式的日期或時間。它有助於搜索引擎、瀏覽器和其他工具更清晰地識別與時間相關的信息，這對於提高搜索結果的可見性或更好的數據解析非常有用。

使用<time>標籤來標示機器可讀的日期和時間

當你使用<time>標籤時，它使你可以提供易於人類和計算機閱讀的日期或時間。這在博客、新聞文章或活動頁面上特別有幫助。

這是一個例子：

<p>Published on <time datetime="2024-10-01">October 1, 2024</time></p>

用戶將看到文本“2024年10月1日”，但datetime屬性提供了日期的機器可讀版本。搜索引擎現在可以輕鬆解釋這個日期。

發佈於

您還可以使用<time>標籤來顯示時間：

<p>The event starts at <time datetime="13:00">1:00 PM</time>.</p>

這樣可以清楚地告訴用戶和機器事件何時發生。

活動將於開始。

<time>如何改進活動詳情的SEO和數據解析

搜索引擎依賴結構化數據來更好地理解內容。<time>標籤使它們更清楚地了解事件、出版物或截止日期的時間，從而提高搜索結果的相關性。例如，搜索引擎可以更好地顯示博客文章的發佈日期或事件的時間。

對於活動頁面，以下示例提供了既人性化又機器友好的時間信息：

<p>Join us for the workshop on <time datetime="2024-12-15">December 15, 2024</time> at <time datetime="15:30">3:30 PM</time>.</p>

然後，搜索引擎和網絡爬蟲可以提取這些數據，並將其用於在搜索結果中創建豐富片段，從而幫助活動引起注意。

文章、博客和活動頁面中的使用示例

以下是如何使用<time>標籤的一些實際示例：

  1. 部落格文章：您可以顯示文章的發佈日期或最後更新日期：

     <p>最後更新於 <time datetime="2024-09-28">2024年9月28日</time>。</p>

  2. 活動清單: 活動網站可以使用<time>標籤列出活動的舉辦時間:

     <p>我們下一次的聚會將在<time datetime="2024-11-10">2024年11月10日</time>在<time datetime="18:00">下午6時</time>舉行。</p>

  3. 截止日期: 當呈現重要的截止日期時，使用 <time> 標籤以增強清晰度：

     <p>請在 <time datetime="2024-10-30T23:59">2024年10月30日，晚上11:59</time>之前提交您的申請。</p>

在這些例子中，datetime 屬性確保計算機能夠正確讀取時間信息，而用戶則能看到更易讀的版本。

瀏覽器支持與可及性

<time> 標籤在現代瀏覽器中得到廣泛支持。它還改善了可及性，因為螢幕閱讀器可以更準確地解釋日期和時間，為殘障用戶提供更好的體驗。

<bdi> 標籤：雙向文本隔離

<bdi> 標籤代表「雙向隔離」，用於防止多語言網站上的文本方向問題。這個標籤在處理包含從左到右 (LTR) 和從右到左 (RTL) 語言的內容時特別有用。

<bdi> 標籤在多語言網站中的角色

當混合具有不同文本方向的語言時，如英文 (LTR) 和阿拉伯文 (RTL)，文本的自然流動有時會變得混亂。<bdi> 標籤有助於保持文本佈局的整潔，確保每部分文本都能正確顯示，無論語言的方向如何。

例如，如果您想將用戶輸入（如用戶名）顯示在其他文本旁邊，而您不知道用戶名將使用哪種語言，您可以使用 <bdi> 來確保它不會影響文本的流動。

如何使用 <bdi> 來防止文本方向問題

<bdi> 標籤包裹您想要隔離的文本部分，並防止文本方向受到周圍內容的影響。

這裡有一個簡單的例子：

<p>User <bdi>اسم</bdi> has logged in.</p>

如果用戶名是阿拉伯文（從右到左），<bdi> 標籤確保句子的其餘部分（英文，從左到右）不會被打斷。如果沒有 <bdi> 標籤，句子可能會因文本方向的混合而無法正確顯示。

另一個包含數字的例子：

<p>Invoice number: <bdi>#1234</bdi></p>

如果發票號碼包含不同方向的文字或數字，<bdi> 標籤能確保格式保持正確。

<bdi> 的範例

<bdi> 標籤通常用於多語言應用程式、用戶生成內容平台以及同時處理多種語言的網站。例如，允許用戶輸入數據（如姓名或地址）的網站，可能會使用 <bdi> 來確保文本的正確對齊。

這是一個論壇上的例子：

<p><bdi>مستخدم</bdi> liked your post!</p>

如果沒有 <bdi>，文本可能會顯得很尷尬，但有了它，阿拉伯語用戶名和英語文本都能正確顯示。

瀏覽器相容性

<bdi> 標籤在所有現代瀏覽器中都受到支持，包括 Chrome、Firefox、Safari 和 Edge。這是一個輕量級的解決方案，不需要特殊的樣式，並在處理多語言文本時幫助保持內容佈局整齊。

<dfn> 標籤：定義術語

<dfn> 標籤用於標記網頁中正在定義的術語的第一次出現。它幫助讀者迅速辨認出特定的單詞或短語是定義，提高內容的清晰度，特別是在技術寫作中。

如何使用 <dfn> 標記定義

<dfn> 標籤使用起來很簡單。您只需將其包裹在您想要定義的單詞或短語周圍。通常，該術語出現在其意義解釋附近。

範例：

<p>The <dfn>DOM</dfn> (Document Object Model) is a programming interface for web documents.</p>

在這裡，<dfn> 標籤突顯了 “DOM” 是正在定義的術語。

DOM（文件物件模型）是一種用於網頁文件的程式設計介面。

提供文中解釋的最佳實踐

當使用 <dfn> 標籤時，請確保您正在定義的術語緊接著它的解釋。這樣可以保持清晰，並幫助讀者立即將術語與其意義聯繫起來。

另外，最好只在首次介紹術語時使用 <dfn>，因為多次重複使用可能會讓讀者感到困惑。

例如，在一篇關於 HTML 的技術文章中：

<p>The <dfn>API</dfn> (Application Programming Interface) allows different software applications to communicate with each other. Once defined, an API can simplify many web development tasks.</p>

在這種情況下，”API” 在首次提到時被定義，之後再次使用 “API” 時就不需要再使用 <dfn> 標籤。

<dfn> 如何提升技術內容的清晰度

在技術寫作中使用 <dfn> 標籤是一種使內容更易於理解的好方法。它清楚地向讀者表明您在介紹一個新術語，這在解釋複雜概念時尤其有用。這有助於提高可讀性，並使使用者更快掌握關鍵概念。

通過使用 <dfn> 標記定義，搜索引擎和其他工具也可能能夠更好地解釋您的內容，使其更具可訪問性。例如，技術術語表或教育網站可以使用 <dfn> 使其術語更突出。

<dfn> 的示例

<p>The <dfn>URL</dfn> (Uniform Resource Locator) is the address used to access a resource on the web.</p>

在這句話中，讀者被介紹了「URL」這個術語，接著給出了明確的解釋。這種使用 <dfn> 標籤來引入術語的方法，有助於使技術內容更易於閱讀和理解，特別是對於那些不熟悉該主題的人。

<wbr> 標籤：換行機會

<wbr> 標籤用於建議單詞或 URL 可以拆分的位置，以便在需要時創建換行。這在處理長單詞、URL 或任何可能破壞網頁佈局的文本時非常有用。

<wbr> 標籤是什麼以及為什麼它對於長單詞或 URL 至關重要

有時，長單詞或 URL 會通過引起橫向滾動或破壞佈局來干擾網頁的設計。<wbr> 標籤給瀏覽器提供了提示，告訴它在必要時可以在哪裡拆分單詞。這有助於保持文本的可讀性並防止溢出。

例如，如果你有一個長 URL，你可以放置 <wbr> 標籤來告訴瀏覽器在哪裡可以拆分文本：

<p>Visit our website at https://www.example<wbr>.com/super/long-url-that-might-break-layout</p>

如果瀏覽器需要拆分 URL，它將在 <wbr> 之後進行拆分，以確保設計保持完整。

控制單詞換行和文本溢出的最佳實踐

<wbr> 標籤應用於可能引起溢出問題的地方，例如長技術術語、電子郵件地址或 URL。但不要過度使用，因為不必要的拆分會使文本更難閱讀。

這裡有另一個長單詞的例子：

<p>This word is too long: anti<wbr>disestablishmentarianism.</p>

如果單詞過長以至於超出行長，瀏覽器會在“anti-”之後斷開，而不影響可讀性。

結合 CSS 使用時，您還可以控制單詞換行和文本溢出，以獲得更好的效果：

p {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

這段 CSS 確保文本在必要時會整齊地換行，而使用 <wbr> 可以更好地控制這些斷開的位置。

瀏覽器對 <wr> 的支持及潛在挑戰

<wbr> 標籤在所有主要瀏覽器中均受到支持，包括 Chrome、Firefox、Safari 和 Edge。它輕量且不需要任何特殊樣式即可工作。

但需要注意的是，過度使用該標籤可能會使文本斷開顯得不自然，尤其是在內容被調整大小或在不同屏幕尺寸上查看時。

例如：

<p>Contact us at longemail<wbr>@example<wbr>.com for more information.</p>

在這種情況下，您可以避免長電子郵件地址導致佈局問題，但根據屏幕寬度，電子郵件可能會在不同的位置顯得斷開。

當您預期長文本字符串可能不會自然斷開時，請使用 <wbr>，以保持設計在各設備上的整潔和功能性。

<ins> 標籤：插入的文本

<ins> 標籤用於顯示已添加至文檔中的文本。這在跟踪編輯、更新或文檔變更時尤為有用。它還帶有默認的下劃線，以突出顯示新內容。

什麼是 <ins> 標籤，它與 <s> 標籤有何不同？

<ins> 標籤用於標記新增的內容，而 <s> 標籤則用於表示已被刪除或不再相關的文本。當您需要顯示文件中的變更，例如更新或修訂時，這兩個標籤都非常有用。

範例：

<p>This is the <ins>new text</ins> that was added.</p>
<p>This is the <s>old text</s> that is no longer valid.</p>

在這裡，<ins> 標籤突顯了新增的內容，而 <s> 標籤顯示了被劃掉的過時內容。

這是新增的文本。

這是 舊文本，不再有效。

用於跟蹤文件編輯或版本控制

<ins> 標籤通常用於管理需要版本控制的文件或編輯應該可見的情況。例如，您可以在協作寫作平台或法律文件中使用它，來顯示哪些部分已被新增。

帶有變更的文件範例：

<p>The contract was updated to include <ins>an extra clause</ins> on data privacy.</p>

這使讀者清楚「數據隱私」部分是最近新增的。

在軟體開發或內容管理中，您可能會使用 <ins> 標籤來顯示在版本控制文件中新引入的文本，使得跟踪編輯和修訂變得更加容易。

強調變更的樣式選項

<ins> 標籤的預設外觀是帶下劃線的，但您可以使用 CSS 進行自定義，以便更好地強調，特別是如果您希望變更更加突出。

以下是如何使用不同的視覺效果來樣式化 <ins> 標籤：

ins {
  background-color: #d4edda;
  color: green;
  text-decoration: none; /* 移除預設的底線 */
}

這將使插入的文本呈現綠色和淺綠色背景，使其更加引人注目。

您還可以添加不同的樣式，例如粗體字體或邊框：

ins {
  font-weight: bold;
  border-bottom: 2px solid green;
}

這些樣式選項使得用戶更容易識別已添加或更改的內容，提高文件編輯的可讀性和透明度。

總體而言，<ins> 標籤是一種簡單但有效的方式來跟蹤插入的內容，對於技術文檔和需要明確可見修訂的協作平台非常有用。

<del> 標籤：刪除的文本

<del> 標籤用於顯示已從文件中刪除或移除的文本。此標籤默認會將文本劃掉，使其易於識別已被移除的內容。在需要跟蹤更改或修訂的情況下特別有用。

<del> 標籤的目的和用法，用於劃掉文本

<del> 標籤的主要功能是以視覺方式顯示某些內容已被移除。這在需要讓讀者看到更改的文件、文章或代碼中很常見。被刪除的文本通常會有劃掉的效果，表示它不再相關或有效。

範例：

<p>This product costs <del>$50</del> $40 now.</p>

在這個例子中，價格變動清晰可見。舊價格（$50）被劃掉，而新價格（$40）緊接其後。

如何將其與 <ins> 結合以跟蹤修訂

<del> 標籤可以與 <ins> 標籤配對，顯示已刪除和新增的內容，非常適合跟蹤編輯或修訂。這在協作撰寫、法律文件或任何需要清楚記錄變更的情況下非常有用。

跟蹤修訂的示例：

<p>The meeting has been moved <del>Monday</del> <ins>Tuesday</ins>.</p>

在這裡，很容易看出“Monday”被替換為“Tuesday”，讀者清楚知道發生了什麼變化。

顯示和設計已刪除內容的最佳實踐

預設情況下，<del> 標籤會給文本添加刪除線，但您可以使用 CSS 進一步設計風格，使其更加顯眼或符合設計需求。

這是自定義已刪除文本外觀的示例：

del {
  color: red;
  text-decoration: line-through;
}

這使已刪除的文本呈現為紅色，更加吸引注意。您也可以結合其他格式，例如將文本淡化：

del {
  color: gray;
  opacity: 0.7;
}

這種風格減少了對已刪除內容的強調，使其不那麼分散注意力，但讀者仍然可以看到。

<del> 標籤提供了一種簡單有效的方法來跟蹤和顯示變更，特別是與 <ins> 標籤結合使用時。對於讓檢閱編輯或更新的任何人都能清晰了解文件至關重要。

結論

利用這些獨特的HTML元素可以擴展網站上的可能性，有助於創建更有意義和更易存取的內容。像<q>、<s>、<mark>、<ruby>、<time>、<bdi>、<dfn>、<wbr>、<ins>和<del>這樣的標籤都為特定任務帶來了各自的優勢。這些元素不僅僅是用於設計文本風格，而且還能添加上下文、增強用戶體驗並改善文檔結構。

正確使用這些標籤不僅使您的網頁更加清晰，還提高了跨設備和搜索引擎的兼容性。在應用這些元素時，請考慮每個元素如何同時提供視覺呈現和信息結構。它們提供了簡單但強大的方法，使網站更豐富且更易於理解，同時惠及廣泛的用戶。

如果您有任何問題或建議，歡迎在LinkedIn上聯繫。如果您喜歡這篇內容，考慮請我喝杯咖啡以支持創作更多面向開發者的內容。