標示縮寫 <abbr>

<abbr> 標示縮寫元素在標籤語意上表示「縮寫」，可以告訴搜尋引擎這是縮寫字，就這篇教學會介紹 <abbr> 標示縮寫元素。

認識 <abbr>

HTML 的標示縮寫元素是由 <abbr> 標籤所構成的元素，可以告訴搜尋引擎這是縮寫字。

• <abbr> 屬於「容器元素」，需要有「起始標籤」以及「結束標籤」。
• <abbr> 的顯示類型為「inline 行內元素」，預設不會自動換行。

例如下方的 HTML 開啟後，會在網頁中放入 <abbr> 標示某些字的縮寫，如果有加上 title 屬性，會自動在下方加上虛線的底線提示這是縮寫字。

<p>
  search engine optimization 的縮寫是 <abbr title="search engine optimization">SEO</abbr>
  <br>
  chief executive officer 的縮寫是 <abbr title="chief executive officer">CEO</abbr>
</p>

<abbr> 支援屬性

<abbr> 除了支援「全域屬性」以及「可見元素的事件屬性」( 參考「HTML 元素屬性」)，通常會再使用 title 屬性，使用 title 屬性後會自動在下方加上虛線的底線提示這是縮寫字，當滑鼠移到縮寫字上方，就會出現 title 屬性裡的提示。

<p>
  search engine optimization 的縮寫是 <abbr title="search engine optimization">SEO</abbr>
  <br>
  chief executive officer 的縮寫是 <abbr title="chief executive officer">CEO</abbr>
</p>

<abbr> 預設樣式

下方是 <abbr> 的預設樣式：

詳細樣式教學可參考：CSS 教學

abbr[title] {
    text-decoration: underline dotted;
}

意見回饋

如果有任何建議或問題，可傳送「意見表單」給我，謝謝～