<u>：非文字註解（下劃線）元素

試一試

<p>
  You could use this element to highlight <u>speling</u> mistakes, so the writer
  can <u>corect</u> them.
</p>

p {
  margin: 0;
}

u {
  text-decoration: red wavy underline;
}

有關何時適合使用 <u> 以及何時不適合的更多詳情，請參閱用法說明部分。

屬性

此元素僅包含全域性屬性。

用法說明

與其他純樣式元素一樣，最初的 HTML 下劃線 (<u>) 元素在 HTML 4 中被棄用；然而，<u> 在 HTML 5 中被恢復，並賦予了新的語義：標記文字應用了某種形式的非文字註解。

用例

<u> 元素的有效用例包括標註拼寫錯誤、在中文文字中為表示專有名詞而應用專名號，以及其他形式的註解。

你不應該使用 <u> 來為文字新增下劃線以達到某種呈現效果，或表示書名。

其他應考慮使用的元素

在大多數情況下，你應該使用 <u> 以外的元素，例如：

• <em> 表示強調
• <b> 吸引對文字的注意
• <mark> 標記關鍵詞或短語
• <strong> 表示文字具有很強的重要性
• <cite> 標記書籍或其他出版物的標題
• <i> 在西文文字中表示技術術語、音譯、思想或船隻名稱

要提供文字註解（與使用 <u> 建立的非文字註解相對），請使用 <ruby> 元素。

要應用下劃線外觀而不帶任何語義，請使用 text-decoration 屬性的 underline 值。

示例

標示拼寫錯誤

此示例使用 <u> 元素和一些 CSS 來顯示一個包含拼寫錯誤的段落，該錯誤用紅色波浪下劃線樣式標出，這是一種相當常見的用法。

HTML

<p>This paragraph includes a <u class="spelling">wrnogly</u> spelled word.</p>

在 HTML 中，我們看到 <u> 使用了 spelling 類，用於標示單詞“wrongly”的拼寫錯誤。

CSS

u.spelling {
  text-decoration: red wavy underline;
}

此 CSS 表明，當 <u> 元素應用了 spelling 類時，其文字下方應有一條紅色波浪下劃線。這是標示拼寫錯誤的常見樣式。另一種常見樣式可以使用 red dashed underline（紅色虛線下劃線）來呈現。

結果

對於任何使用過當今較流行的文字處理軟體的人來說，結果應該很熟悉。

避免使用 <u>

大多數時候，你實際上不想使用 <u>。以下是一些示例，展示了在幾種情況下應該怎麼做。

無語義的下劃線

要為文字新增下劃線而不暗示任何語義，請使用 <span> 元素，並將其 text-decoration 屬性設定為 "underline"，如下所示。

HTML

<span class="underline">Today's Special</span>
<br />
Chicken Noodle Soup With Carrots

CSS

.underline {
  text-decoration: underline;
}

結果

表示書名

書名應使用 <cite> 元素，而不是 <u> 甚至 <i>。

使用 cite 元素

<p>The class read <cite>Moby-Dick</cite> in the first term.</p>

為 cite 元素設定樣式

<cite> 元素的預設樣式會以斜體呈現文字。你可以使用 CSS 覆蓋它。

<p>The class read <cite>Moby-Dick</cite> in the first term.</p>

cite {
  font-style: normal;
  text-decoration: underline;
}

技術摘要

規範

瀏覽器相容性

另見

• 通常應改用 <span>、<i>、<em>、<b> 和 <cite> 元素。
• 對於無語義的下劃線，應使用 CSS text-decoration 屬性。