《Web前端開發精品課 HTML與CSS進階教程》——2.3 圖檔語義化

本節書摘來自異步社群《web前端開發精品課 html與css進階教程》一書中的第2章，第2.3節，作者： 莫振傑 更多章節内容可以通路雲栖社群“異步社群”公衆号檢視。

在html中，我們使用img标簽來表示圖檔。對于圖檔的語義化，我們從以下兩個方面來深入探讨一下。

（1）alt屬性和title屬性。

（2）figure元素和figcaption元素。

2.3.1　alt屬性和title屬性

img标簽有兩個重要屬性：alt和title。

alt屬性用于圖檔描述，這個描述文字是給搜尋引擎看的。并且當圖檔無法顯示時，頁面會顯示alt中的文字。

title屬性也用于圖檔描述，不過這個描述文字是給使用者看的。并且當滑鼠指針移到圖檔上時，會顯示title中的内容。

文法：

說明：

搜尋引擎跟人不一樣，它看不出一張圖檔描繪的是什麼東西，它隻會檢視html代碼，通過img标簽的alt屬性或者頁面上下文來判斷圖檔的内容。是以，對于img标簽，我們一定要添加alt屬性，以便搜尋引擎識别圖檔的内容。alt屬性在搜尋引擎優化中也很重要，并且會被賦予一定的權重。

請一定要注意：alt屬性是img标簽必需屬性，一定要添加；title屬性是img标簽可選屬性，可加可不加。建議大家在實際開發中，對于img标簽，要記得在alt屬性中添加必要的描述資訊。

2.3.2　figure元素和figcaption元素

https://yqfile.alicdn.com/26cc9c2cbd087955b09f96817836a511aee67fac.png" >

對于如圖2-4所示的這種“圖檔+圖注”的效果，我們可以使用如下代碼來實作。

但是這種實作方式的語義并不好。在html 5中，引入了figure和figcaption兩個元素來增強圖檔的語義化。

figure元素用于包含圖檔和圖注，figcaption元素用于表示圖注文字。在實際開發中，對于“圖檔+圖注”效果，我們都建議使用figure和figcaption這兩個元素來實作，進而使得頁面的語義更加良好。