HTML img title 與 img alt 的差別

HTML img title 與 img alt 的差別在於＂使用的目的與呈現效果＂兩方面，簡單來說 img title 與 img alt 是兩個不同的東西，img title 是圖片標題，有點類似網頁標題的意思，用來標示圖片的說明文字，當滑鼠移到圖片上就會自動顯示出來，而 img alt 可就完全不同囉！img alt 是圖片的替代文字，所謂替代文字的意思就是在圖片失效的時候所要呈現的文字，如果圖片可以正常顯示，則 img alt 就不會有任何的功能。

HTML img title 與 img alt 的語法

無論是 img title 還是 alt 都直接寫在 img 圖片標籤（img tag）內即可，每一張圖片只能使用一次，兩個功能都是選用項目，不一定要寫。如果你想進一步認識 img title 與 img alt 的差別與詳細用法，可以參考以下兩篇的內容。

HTML img title 與 img alt 的範例

範例呈現的效果

範例總共準備了兩個 img 圖片標籤，第一張圖片的網址故意用 # 來表示，這樣就不會有圖片可以顯示，在範例呈現的效果可以看到出現了一行文字「圖片失效就顯示這段文字」，此即為 img alt 的替代文字效果，第二張圖片則使用 title 的效果，當滑鼠移到圖片上就可以看到圖片標題文字自動跑出來，除非瀏覽器有特別限制，否則通常都可以正常顯示。以上就是 HTML img title 與 img alt 的差別。

為了讓範例的圖片顯示得稍微清楚一點，所以我們利用 CSS 的 style 替圖片增加了黑色的外邊框，語法是「style="border:1px black solid;"」這一段，如果你對圖片外邊框的設計有興趣，可以參考《img border 圖片邊框》與《CSS border 邊框》這兩篇的內容。

更多網頁圖片設計