語法
釋義
在HTML 4.01中,alt屬性主要用於兩個img與area元素,alt屬性的語法如下:
<img alt="..." />
<area alt="..." />
介紹
alt 屬性是一個必需的屬性,它規定在圖像無法顯示時的替代文本。
假設由於下列原因用戶無法查看圖像,alt 屬性可以為圖像提供替代的信息:
網速太慢
src 屬性中的錯誤
瀏覽器禁用圖像
用戶使用的是螢幕閱讀器
<img> 標籤的 alt 屬性指定了替代文本,用於在圖像無法顯示或者用戶禁用圖像顯示時,代替圖像顯示在瀏覽器中的內容。
例子
視力受損的讀者如果使用螢幕閱讀器如JAWS(英語:JAWS (screen reader))或Orca(英語:Orca (assistive technology)),這些應用程式會將圖像中提供的alt文字讀出,讓他們以聆聽理解圖像內容。純文字網頁瀏覽器如Lynx或允許使用者手動會禁止下載圖像的瀏覽器會顯示alt文字以取代圖像;一般能正常顯示圖像的網頁瀏覽器的讀者則需要開啟圖像屬性或頁面原始檔才能得知alt屬性內容。
常見誤解
IE7將alt文字顯示成彈出式提示框Internet Explorer 7及更舊版本會錯誤地將alt屬性渲染成彈出式提示框(英語:tooltip)。這個設定導致許多網路開發者真的將alt屬性當成彈出式提示框來使用[3],而忽視了title才是用來顯示彈出式提示框的正確屬性。這個失誤在Internet Explorer 8被改正過來,alt文字不會再被當成提示框彈出。alt屬性有時亦會被誤稱為“alt元素”(alt tag,變相與img元素畫上等號)。
重要性
圖片alt屬性是搜尋引擎唯一能識別的圖片信息,因此,在最佳化網站時,儘可能利用alt屬性闡述圖片的主題內容,但是又要避免關鍵字的重疊堆砌,該圖片屬性作用也不僅僅告訴搜尋引擎圖片的主要信息,另外在圖片出現載入失敗時,還能夠讓訪客理解圖片所闡述的內容!
用來對網頁上的圖片進行描述,游標在圖片上時顯示的提示語即採用該標籤實現。從SEO和用戶體驗來看,ALT-代替屬性都是必要的,其重要性主要有:
網頁內容相關性是關鍵字最佳化的前提,搜尋引擎認為,網頁上的圖片應該與網頁主題相關。反過來講,當搜尋引擎要判斷網頁的關鍵字時,圖片的ALT-代替屬性是一個可信任的參考點。所以, 別忘了在圖片的ALT-代替屬性里添加上該網頁的關鍵字。有時候因為一些原因,比如使用螢幕讀取器、頻寬較低、網路阻礙等導致網頁上的圖片無法顯示。描述性的ALT-代替屬性可以告訴用戶該位置的內容,從而添加用戶體驗。正規的網站都應該這樣做。有時,如果沒有ALT-代替屬性,會導致用戶不明白該圖片代表著什麼,為什麼放在這個網頁。
標籤寫法
正確寫法
alt標籤在html語言中的寫法是這樣的:<img src="圖片路徑" alt="圖片描述"/>
圖片描述最好是用簡短的語句,描述這張圖片的內容,如果是連結,則描述連結的作用,並帶上關鍵字。
注意事項
不好的習慣是每張圖片都沒有alt標籤。而不可取的是,對於每個標籤都採用關鍵字堆砌,這樣就有可能會導致被視為Spam垃圾網站。