IMG標記的alt屬性和title屬性詳解

正確的使用alt text屬性和title屬性不僅可以提高圖片的搜索能力，對用戶體驗上也是很有幫助。

alt text

替換文字（alt text）是為了給那些不能看到你文檔中圖像的瀏覽者提供文字說明。這包括那些使用本來就不支持圖像顯示或者圖像顯示被關閉的瀏覽器的用戶，視覺障礙的用戶和使用屏幕閱讀器的用戶。所以替換文字是用來替代圖像而不是提供額外說明文字的。Alt text在IE瀏覽器中還起到了title的作用――鼠標經過時的文字提示。IE瀏覽器給了大家一個誤導，在IE中ALT會變成文字提示是因為IE不標準。這一點Firefox做的就比較好。

title

title是對圖片的說明和額外補充，如果需要在鼠標經過圖片時出現文字提示應該用屬性title。title屬性的優先級高于alt text。但由于錯誤的引導，很多初學者就在img標簽內只加了alt屬性。

下面看個例子，我們可以更清楚的看清alt text和 title之間的區別：

//*圖片不顯示
<img src="sj33.jpg" width="400" height="104"alt="設計之家">  
<img src="sj33.jpg" width="239" height="104" />
//*圖片顯示
<img src="sj33.png"  />
<img src="sj33.png"  alt="設計之家" />
 
在IE瀏覽器中，這四句代碼，鼠標經過圖片時，都會出現文字提示。

而在Firefox瀏覽器中，前三句代碼，鼠標經過圖片時，都會出現文字提示，最后一句代碼，鼠標經過圖片不會顯示文字提示。

也就是說當圖片不能顯示時，鼠標經過圖片時會顯示替換文字的內容，而當圖片可以顯示時，鼠標經過圖片時，替換文字就不會顯示出來了。

現在我們已經知道alt text和title有什么不同了，那么我們怎樣才能正確使用它們呢？

1. alt text和title對訪問者都很重要（alt text對搜索引擎會更重要一些），所以在定義img對象時，最好將alt text和title屬性都寫全，保證在各種瀏覽器中都能正常使用。

2. 在alt text和title中包含關鍵字，并且二者內容最好不一樣。

3. 不要在alt text和title中堆積關鍵字，否則可能會導致搜索引擎懲罰。