<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> 的預設樣式：

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

更多教學

大家好，我是 OXXO，是個即將邁入中年的斜槓青年，我有個超過一千篇教學的 STEAM 教育學習網，有興趣可以參考下方連結呦～ ^_^

• Python 教學 ( 學習導讀 )
• Scratch 教學
• GA4 ( Google Analytics 4 ) 教學
• 生成式 AI ( AIGC ) 教學
• Midjourney 教學
• HTML 教學