<abbr>:縮寫元素

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

<abbr> HTML 元素代表縮寫或縮略語。

在包含縮寫或縮略語時,首次使用時需提供該術語的全稱,並使用 <abbr> 標記縮寫。這有助於告知使用者縮寫或縮略語的含義。

可選的 title 屬性可在未提供完整展開時提供縮寫或縮略語的展開。這可為用戶代理提供如何宣布/顯示內容的提示,同時告知所有使用者該縮寫的含義。若存在,title 必須包含該完整描述,不能包含其他內容。

嘗試一下

屬性

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

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

使用注意事項

典型用例

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

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

語法注意事項

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

默認樣式

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

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

範例

語義標記縮寫

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

HTML

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

結果

為縮寫設置樣式

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

HTML

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

CSS

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

結果

提供展開

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

HTML

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

結果

定義縮寫

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

HTML

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

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

結果

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

技術摘要

內容類型 流內容段落型內容、捫及內容
允許內容 段落型內容
標籤省略 不允許,開始和結束標籤都是必須的。
允許的父元素 接受任何段落型內容
隱含的 ARIA 角色 沒有相對應的角色
允許的 ARIA 角色 任何
DOM 介面 HTMLElement

規範

Specification
HTML Standard
# the-abbr-element

瀏覽器相容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
abbr

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.

參見