HTML img alt 屬性 (圖片替代文字)

HTML img alt 屬性是網頁圖片的替代文字，alt 的功能與 title 並不相同，設定圖片 title 可以讓滑鼠移到圖片上時顯示一的提示文字，可是 img alt 並不會有這樣的效果（少部分流覽器會有，例如舊版 IE），嚴格來說 img alt 的屬性是一種圖片替代文字的功能，也就是當圖片失效時，可以呈現出來的文字，用來說明該張圖片的內容或想闡述的資訊，如果圖片可以正常顯示，img alt 屬性就不需要有什麼作用，有點像是保險的感覺，沒有問題的時候似乎不存在，當需要的時候才會派上用場，HTML img alt 圖片替代文字大概就是這樣子，為了避免圖片失效時，網友不知道網頁想表達的內容是什麼，還是把 HTML img tag 標示清楚吧！

HTML img alt 屬性語法

HTML 的 img alt 屬性使用方式非常簡單，就是把替代文字寫在 alt 屬性內即可，平時用不到的時候其實也沒什麼存在感，不過對於搜尋引擎優化是有幫助的，有些對於搜尋引擎優化有一點點認識但又不夠專精的人，有時候會在圖片的 alt 隨意塞入過多或不相關的文字，其實這對搜尋引擎優化會有反效果，因為現在的搜尋引擎很聰明，會自動比對圖片以及 alt 內容，並判斷是否亂塞文字，如果判斷出來是亂塞文字在 alt 屬性內，就會被排除在搜尋結果外，所以請別隨便亂使用這個 HTML 的 img alt 屬性！

HTML img alt 屬性的實際應用範例

範例的輸出結果

範例共使用了兩個 HTML img 圖片標籤，不過第一張 img 標籤故意不放圖片網址，讓 alt 的效果展現出來，第二張圖片則有把圖片網址放進 img 的 src 內，兩個 img 標籤可以看到彼此的差異，第一張圖片無法正確顯示時，alt 的替代文字就可以顯示出來，這也就是 HTML img alt 屬性的最大價值所在，第二張圖片可以正常顯示，似乎 alt 就不存在一樣。

深入研究網頁圖片的基本語法與各種應用方式：HTML img tag 圖片標籤
與 img alt 屬性相對應的 title 屬性用法請參閱：HTML img title 屬性 (滑鼠移經圖片顯示文字)

更多網頁圖片應用