HTML img alt 圖片替代文字

HTML img alt 屬性的功能是建立圖片替代文字，這個圖片替代文字與 img title 頗為類似，但不同的是 img alt 用在當圖片出錯或圖片失效時（例如圖片被移除或伺服器權限修改），讓瀏覽器顯示出替代文字，但是當滑鼠移到圖片上的時候，並不會顯示替代文字，等於是圖片的備案，假設文章中的圖片失效，網頁設計師可能不會希望出現一個 x，如果有設定 img alt 屬性，就可以顯示出可閱讀的文字。

HTML img alt 語法範例

HTML img alt 屬性範例

範例呈現的效果

範例中共準備了兩個 img tag，不過都沒有實際的圖片存在，故意測試 img alt 的效果，其中一張圖片的 alt 為空，另外一張則有設定 alt 的文字，各位讀者朋友可以用 IE、FireFox、Google Chrome、Opera 分別看結果有什麼不同？

雖然 img alt 是當圖片失效的時候才會有作用，但 alt 這個屬性在 ie 瀏覽器下，當滑鼠提到圖片上，還是會顯示替代文字的，其他常見的瀏覽器像是 Google Chrome、FireFox、Opera 這些到是不會顯示。另外，Google Chrome 部份版本無法顯示 img alt 的替代文字效果。

HTML img alt 的替代文字可以寫繁體中文，通常用來表示圖片的內容，或者圖片的連結，例如有對圖片使用 HTML <a> 標籤的時候，但建議不要在 alt 標籤中塞入太多無意義的文字來誤導讀者。

延伸閱讀