<abbr>：縮寫元素

嘗試一下

<p>
  You can use <abbr>CSS</abbr> (Cascading Style Sheets) to style your
  <abbr>HTML</abbr> (HyperText Markup Language). Using style sheets, you can
  keep your <abbr>CSS</abbr> presentation layer and <abbr>HTML</abbr> content
  layer separate. This is called "separation of concerns."
</p>

abbr {
  font-style: italic;
  color: chocolate;
}

屬性

該元素僅支援全域屬性。當與 <abbr> 元素一起使用時，title 屬性具有特定的語義意義；必須包含縮寫的完整人類可讀描述或展開。該文本通常會在將滑鼠游標懸停在元素上時，由瀏覽器呈現為工具提示。

你使用的每個 <abbr> 元素都是獨立的；為其中一個提供 title 不會自動將相同的展開文本附加到其他具有相同內容文本的元素上。

使用注意事項

典型用例

並不要求所有縮寫都必須使用 <abbr> 進行標記。但是，有幾種情況可以使用：

• 當使用縮寫且要在文檔內容流之外提供展開或定義時，使用具有適當 title 的 <abbr>。
• 要定義讀者可能不熟悉的縮寫時，使用 <abbr> 並內置文字提供定義。僅在內嵌展開或定義不可用時才包含 title 屬性。
• 當需要語義地注意縮寫在文本中的存在時，<abbr> 元素很有用。這可用於樣式設計或腳本目的。
• 你可以將 <abbr> 與 <dfn> 一起使用，為縮寫或縮略語建立定義。參見下面的範例定義縮寫。

語法注意事項

在具有語法數量（即，項目數量影響句子語法的語言）的語言中，title 屬性中使用與 <abbr> 元素內部相同的語法數量。這對於具有超過兩個數字的語言（例如阿拉伯語）尤其重要，但對於英語也是相關的。

默認樣式

該元素的目的純粹是方便作者，所有瀏覽器默認都是內聯顯示（display: inline），儘管其默認樣式因瀏覽器而異：

有些瀏覽器向元素內容添加了虛線下劃線。其他在將內容轉換為小型大寫字母時添加了虛線下劃線。其他可能與 <span> 元素一樣未對其進行區別。要控制此樣式，請使用 text-decoration 和 font-variant。

範例

語義標記縮寫

要標記縮寫而不提供展開或描述，只需使用沒有任何屬性的 <abbr>，如此範例所示。

HTML

<p>Using <abbr>HTML</abbr> is fun and easy!</p>

結果

為縮寫設置樣式

你可以使用 CSS 為縮寫設置自定義樣式，如此簡單範例所示。

HTML

<p>Using <abbr>CSS</abbr>, you can style your abbreviations!</p>

CSS

abbr {
  font-variant: all-small-caps;
}

結果

提供展開

添加 title 屬性可讓你為縮寫或縮略語提供展開或定義。

HTML

<p>Ashok's joke made me <abbr title="Laugh Out Loud">LOL</abbr> big time.</p>

結果

定義縮寫

你可以將 <abbr> 與 <dfn> 一起使用，更正式地定義縮寫，如此範例所示。

HTML

<p>
  <dfn id="html"><abbr title="HyperText Markup Language">HTML</abbr> </dfn> is a
  markup language used to create the semantics and structure of a web page.
</p>

<p>
  A <dfn id="spec">Specification</dfn> (<abbr>spec</abbr>) is a document that
  outlines in detail how a technology or API is intended to function and how it
  is accessed.
</p>

結果

無障礙議題

在頁面上首次使用縮寫或縮略語時拼寫出完整的縮寫或縮略語有助於幫助人們理解，特別是如果內容是技術性的或行業術語。

僅在文本中展開縮寫或縮略語不可行時才包含 title。在宣布的單詞或短語與在屏幕上顯示的內容之間存在差異，特別是如果它是讀者可能不熟悉的技術術語時，可能會令人不安。

HTML

<p>
  JavaScript Object Notation (<abbr>JSON</abbr>) is a lightweight
  data-interchange format.
</p>

結果

對於不熟悉內容中討論的術語或概念的人、剛接觸該語言的人和有認知問題的人來說，這尤其有助於理解內容。

技術摘要

規範

瀏覽器相容性

參見

• 使用 <abbr> 元素