語意意涵與設計動機
HTML5 推出之前,開發者常用 <div> 包住 <img> 再加上一段文字來充當圖片說明。但這種做法在語意上不夠明確,瀏覽器和搜尋引擎無法直接得知那段文字是圖片的說明或標題。為了解決這個語意不清的問題,HTML5 引入了 <figure> 與 <figcaption> 元素。
<figure>: 表示一個自含式的內容單元(self-contained unit)。通常 <figure> 包含一張圖片、一個插圖、一段程式碼、一張表格或影片等,整體可被視為單一單位對待。設計這個元素的用意,是讓這段內容即使移動到文件的其他位置甚至附錄,仍不影響主文件流程的理解。換句話說,<figure> 中的內容與主文的關聯性較弱,可以獨立存在而語意清晰。
<figcaption>: 表示 <figure> 的說明或標題(caption)。它用來描述 <figure> 內其他內容的意義,比如圖片的說明文字、圖表的標題、程式碼範例的描述等。有了 <figcaption>,開發者不必再額外用 <p> 或 <span> 來寫說明文字,瀏覽器和搜尋引擎也能瞭解這段文字是圖 figure 的說明。
這對元素的設計動機在於語意標註:讓程式碼本身就蘊含內容結構的意義。使用 <figure>/<figcaption> 可以提升程式碼的自我解說性——人類閱讀程式碼或是機器解析時,都更容易理解「某內容 X 有一段說明 Y 與之關聯」。這種語意化設計符合現代網頁開發趨勢,為SEO和無障礙設計打下良好基礎。
基本語法與用法
讓我們先看 <figure> 與 <figcaption> 的基本用法與結構。以下是典型的HTML範例:
<figure> <img src="sunset.jpg" alt="夕陽下的大象散步" /> <figcaption>夕陽餘暉中的大象</figcaption> </figure>
上述程式碼示範了一張圖片及其說明文字。重點說明:
<figure> 是父元素,包覆圖片和說明文字,構成一個完整的內容單元。
<figcaption> 必須置於 <figure> 內部,而且位置要麼在最前(開頭),要麼在最後(結尾)。以上例子將 <figcaption> 放在最後,也可以寫在 <img> 之前,只要保持在 <figure> 裡第一或最後的位置即可。
每個 <figure> 應該只包含一個 <figcaption>。根據HTML5規範,一個 <figure> 元素最多只能有一個 figcaption,用來描述整個 figure 的內容。如果 <figure> 裡沒有 <figcaption>,也沒有語法錯誤,但就少了語意上的說明部分。
除了圖片,<figure> 元素可以容納各種媒體或引用內容。例如:
<!-- <figure> 用於區塊引用 (帶引言人) --> <figure> <blockquote>...引言文字內容...</blockquote> <figcaption>— 愛因斯坦</figcaption> </figure> <!-- <figure> 用於程式碼範例 --> <figure> <pre><code>/* 一段程式碼 */</code></pre> <figcaption>程式碼:這段 CSS 更改文字顏色</figcaption> </figure>
如上所示,不論是引言還是程式碼片段,都可以放在 <figure> 中,再用 <figcaption> 做標註說明。這讓文件結構更清晰:讀者能輕易區分主文內容和輔助說明內容,開發者也能確定哪些文字屬於圖表的「標題」。
需要注意的是,<figcaption> 不是必需的。如果某個 <figure> 不需要額外說明,例如純粹裝飾性的圖片或內容一目了然,那 <figcaption> 可以省略。但如果需要解說,務必在 <figure> 內部加入 <figcaption> 提供有意義的文字描述。
與傳統 <div> + <img> 包裝的比較
在 <figure> 問世之前,我們經常這樣結構圖片及其說明:
<div class="figure"> <img src="sunset.jpg" alt="夕陽下的大象散步"> <p class="caption">夕陽餘暉中的大象</p> </div>
上面的程式碼使用 <div> 作為容器、<p> 或 <span> 作為說明文字,透過 class 來表達「這是圖說」。雖然能達成視覺效果,但語意上不夠直觀:瀏覽器和搜尋引擎需要透過 class 名稱或其他線索猜測這是圖片的說明,語義明確性不足。
反觀使用 <figure>/<figcaption>:
語意清楚: <figure> 天生代表一個圖或媒體單元,<figcaption> 自帶「說明文字」的意涵,比起任意的 <div>/<p>,少了語意模糊的問題。
結構更緊密: <figure> 將圖像和說明包裹在一起,意味著它們是一組相關內容。若未來重組版面或搬移位置,整個 <figure> 可以一併移動,確保圖和文不分離。
輔助工具與SEO更友善: 螢幕閱讀器、搜尋引擎爬蟲等看到 <figure> 就能意會接下來是一個自包含內容單元,看到 <figcaption> 則知道是對前述內容的描述,無需額外推測。
簡言之,<figure>/<figcaption> 提供了語意上的「強類型」包裝,讓內容關係明確表達在 HTML 結構中,而不只是透過 CSS class 或開發者約定去理解。對開發維護、SEO 以及無障礙體驗都有正面效益。
CSS 美化範例
有了語意正確的結構後,我們可以用 CSS 來美化 <figure> 和 <figcaption> 以提升視覺效果。以下是一個簡單的樣式範例:
figure {
max-width: 400px; /* 限制 figure 寬度 */
margin: 1em auto; /* 使 figure 區塊置中,並在垂直方向留間距 */
border: 1px solid #ccc; /* 給 figure 一個淡灰色邊框 */
padding: 5px;
text-align: center; /* 圖片和 figcaption 內容置中對齊 */
}
figure img {
max-width: 100%; /* 確保圖片不會超出 figure 的寬度 */
height: auto; /* 等比縮放圖片高度 */
display: block;
margin: 0 auto 5px; /* 圖片下方留出空間給 figcaption */
}
figure figcaption {
font-size: 0.9em; /* 說明文字比正文略小 */
color: #555; /* 說明文字使用灰色提升對比度 */
background: #f9f9f9; /* 淡背景區隔圖說 */
padding: 3px;
}
上述 CSS 做了幾件事:
容器效果: 將 <figure> 設定固定最大寬度並置中,並加上細邊框和內距,使其與周圍內容區隔開來,看起來像一個獨立單元。
圖片響應: 讓 <img> 寬度自適應容器(max-width: 100%),確保在小螢幕裝置上圖片能縮放,不會溢出版面。
圖說樣式: 將 <figcaption> 文字縮小、變灰,搭配淡色背景,呈現出與正文不同的風格,直觀表明這是附註說明而非正文內容。並利用 text-align: center 讓圖說置中,通常照片說明置中對齊閱讀性更佳。
這些樣式會讓我們的 <figure> 圖文組合呈現如下視覺效果:一張具備邊框的圖片置中顯示,圖片下方緊跟一行灰色斜體(如果設定 font-style: italic 也常用於圖說)的小字說明。有了語意標記,再加上適當的 CSS,美觀與資訊結構兼備。
(註:<figure> 和 <figcaption> 本身在瀏覽器預設樣式中通常是 display: block,因此自然會各佔一行顯示。上述範例只是額外調整樣式,使其更貼近實際文章中的理想呈現。)
JavaScript 互動範例:滑入放大圖片與顯示標題
為了提高用戶體驗,我們還可以結合 JavaScript 為 <figure> 圖片和標題添加互動效果。例如,當使用者將滑鼠移到圖片上時,圖片稍微放大並強調顯示圖說文字。這裡我們透過簡單的 JavaScript 配合 CSS 達成「滑入圖片縮放、標題浮現」的效果:
首先,在 CSS 中預先定義好 hover 狀態的樣式,例如:
/* 初始狀態:圖說半透明、圖片轉場效果 */
figure.zoom img {
transition: transform 0.3s ease;
}
figure.zoom figcaption {
opacity: 0;
transition: opacity 0.3s ease;
}
/* 滑鼠移入 figure 時的狀態 */
figure.zoom.hover img {
transform: scale(1.1); /* 圖片放大至110% */
}
figure.zoom.hover figcaption {
opacity: 1; /* 圖說完全顯示 */
}
接著,利用 JavaScript 在滑鼠事件中切換 .hover 狀態:
<figure class="zoom" id="demoFigure">
<img src="flower.jpg" alt="一朵盛開的花朵">
<figcaption>盛開的花朵,近距離細節</figcaption>
</figure>
<script>
const fig = document.getElementById('demoFigure');
fig.addEventListener('mouseenter', () => {
fig.classList.add('hover');
});
fig.addEventListener('mouseleave', () => {
fig.classList.remove('hover');
});
</script>
以上程式碼說明:
我們給 <figure> 一個類別 .zoom,並在滑鼠事件中動態加入或移除 .hover 類別。
CSS 選擇器 figure.zoom.hover img 以及 figure.zoom.hover figcaption 定義了當 figure 同時具有 .zoom 和 .hover 類別時的效果:圖片放大、figcaption 不透明顯示。
當滑鼠移開時,移除 .hover,圖片和文字又會恢復原狀(圖片縮回原尺寸、圖說隱藏)。
這種互動實作使圖片區塊更加生動:使用者將滑鼠移上圖片時,圖片有視覺強調效果,並且圖說文字淡入出現提供更多資訊。當然,類似的效果也可以只用純 CSS 的 :hover 實現,但透過 JavaScript 更便於針對行動裝置(觸碰事件)等進行擴充。這個例子僅供展示 <figure>/<figcaption> 可結合腳本實作的可能性,實際應用中可依需求設計更多元的互動(例如點擊圖片彈出燈箱顯示大圖等)。
適用場景:圖片、圖表與影片
<figure> 元素的彈性非常高,不僅局限於照片圖片。在各種需要插入說明性媒體的場景下都能派上用場:
照片/插圖: 部落格文章中插入照片並加上圖說,是 <figure> / <figcaption> 的典型用例。讀者可從圖說快速了解圖片重點,例如攝影作品的標題或簡短描述。對於多張相關照片,開發者可以選擇每張獨立一個 <figure> 含各自的 <figcaption>,或將多張照片作為一組圖集放入同一 <figure>,以一個共同的 <figcaption> 說明(例如:「上圖:2023 年公司團隊活動剪影」)。
數據圖表: 當我們在網頁中展示統計圖(如長條圖、折線圖、餅圖等)或者資訊圖形時,可以將圖表(不論是圖片格式或 <canvas> 繪製)放進 <figure>。<figcaption> 則用來提供圖表標題、資料來源或重點說明。例如:「圖1:2025年第一季銷售成長趨勢圖」。這讓讀者在視覺上、語意上都清楚知道圖表代表什麼。需要注意的是,如果是用純 HTML <table> 呈現資料表格,HTML本身有 <caption> 標籤專門給表格加標題,此時可直接使用 <table><caption>...</caption>...</table> 而非外層再套 <figure>。
影片/音訊: 可以將 <video> 或 <audio> 元素作為 <figure> 的內容,<figcaption> 提供影片標題或音訊說明。例如,一段教學影片嵌入頁面時,使用 <figure> 包裹 <video>,並在 <figcaption> 中標示影片標題、講者或簡介。這比單純把影片放進頁面更具結構性,方便使用者理解該媒體內容的來由或重點。同理,嵌入 YouTube iframe 影片時,也能用 <figure> 包起來搭配 <figcaption> 說明影片內容或版權資訊等。
程式碼範例: 技術文件或教學文章中,常需要展示一段程式碼並在下方附註解釋。將 <pre><code>...</code></pre> 放入 <figure> 中,然後用 <figcaption> 簡述這段程式碼的作用或重點。例如:「範例1:JavaScript 函數計算斐波那契數列」。這樣做的好處是結構分明,讀者一眼就能把程式碼本身和解說文字區分開。
引用與其他媒體: 如前節範例,引用名人語錄時,可以用 <figure> 包住 <blockquote>,然後 <figcaption> 標示作者或出處。甚至包括藝術作品(如一幅畫作的圖像+說明文字)、廣告橫幅(廣告媒體+描述)等,都能使用 <figure> 進行語意化封裝。
綜上,凡是媒體內容需要搭配文字說明的情境,<figure> 配 <figcaption> 幾乎都可以派上用場。這不僅對視覺呈現有利,也為機器閱讀和內容組織提供了語意支撐。
<figcaption> 與替代文字 (alt) 及 ARIA 可及性
討論 <figure> 不可避免要談到與圖像相關的無障礙和描述性文字。特別是對於圖片,兩個重要的文本來源是 alt 屬性 和 <figcaption>。它們各自扮演不同角色,卻共同影響著可及性(Accessibility)與SEO:
alt 屬性: 定義在 <img> 標籤上,內容是圖片的替代文字,提供給無法查看圖片的使用者(例如視障者使用螢幕閱讀器、或網路慢導致圖片載入失敗時顯示)。alt 的文字應該簡潔且功能性地描述圖像。對於屏幕閱讀器,alt文字會在圖像處被唸出,使視障使用者得知圖像內容。對SEO來說,alt文字也提供搜尋引擎理解圖片內容的資訊。因此,每一個重要的內容圖片都應提供適當的 alt 屬性。若圖片僅裝飾用途,alt可留空 (alt=""),讓輔助技術忽略它。
<figcaption>: 如前所述,是圖片(或其他媒體)的可見說明文字。與 alt 不同的是,figcaption 的內容會直接呈現在頁面上,供所有使用者閱讀,所以撰寫時可以更具編輯性或敘述性,提供額外資訊或上下文。例如,一張新聞照片的 alt 可能是「總統在記者會上發言」,而 figcaption 則可以是「總統於記者會上宣布新政策,此舉預料將影響數百萬人生活」。Figcaption 能夠包含豐富的描述、背景甚至引用、時間等資料,而不僅僅是圖像中「看得到的」內容。
兩者的關係: alt 與 figcaption 並非擇一使用,而是互補的。最佳實踐是:
圖片的關鍵內容,用 alt 說明,確保無法看圖時仍知悉重點。
進一步的解說、背景或附加資訊,放在 figcaption 中提供給所有讀者。
不要把兩者寫成一模一樣的文字。如果 figcaption 已經提供了詳細說明,alt 可以寫得簡要一些,避免重複冗餘。另一方面,alt 提供基礎事實性描述時,figcaption 可以擴充上下文,兩者互相補充。
例如:
<figure> <img src="election.jpg" alt="候選人A擁抱支持者"> <figcaption>候選人A在勝選之夜與支持者擁抱慶祝,這場選戰他以5%的些微差距險勝。</figcaption> </figure>
上例中,alt 交代了圖像的基本畫面 (擁抱支持者),figcaption 則進一步交代時間(勝選之夜)、情緒和結果(險勝5%差距)。這對於視覺與非視覺使用者都提供了價值。
ARIA 與 <figure>: ARIA (Accessible Rich Internet Applications) 是一套協助無障礙的屬性規範。幸運的是,<figure> 和 <figcaption> 在 HTML5 本身已經具有良好的可及性語意:
HTML 預設會將 <figure> 宣告為一個獨立的區塊,有些輔助技術會將其視為「圖組」(figure role)。而當 <figure> 裡有 <figcaption> 時,該 figcaption 的內容常被視為 figure 的可及名稱(accessible name)。也就是說,螢幕閱讀器在遇到 <figure> 時,可能會朗讀 figcaption 作為對這塊內容的標題或說明,使使用者瞭解figure內涵的大意。舉例來說,遇到上述勝選之夜的 figure,螢幕閱讀器可能會念出「圖:候選人A在勝選之夜與支持者擁抱慶祝...」,然後再念出圖像的 alt(若有必要)。這讓視障者能同步獲得標題和圖片描述兩方面資訊。
<figcaption> 本身是區塊元素,允許包含流內容(flow content),因此你可以在 figcaption 中使用內聯元素甚至段落、清單等。例如可在 figcaption 裡加入 <strong> 或 <a> 連結,或像先前例子在 figcaption 用 <time> 標記時間、<cite> 標記資料來源書名等。這些都不違背規範。此外,如果需要,你也可以給 <figure> 加上 role="group" 或 role="figure" 來強化某些輔助技術的解析,但大多數情況下不需要特別加,讓瀏覽器用預設語意即可。
總而言之,善用 figcaption 並不代表可以忽略 alt 屬性,兩者應搭配使用,確保圖像資訊對所有使用者都是可取得且有意義的。同時,<figure>/<figcaption> 的語意已為無障礙考量,一般不需要額外的 ARIA 標記就能有不錯的輔助技術相容性。
SEO 價值:結構化資料與語意優勢
使用 <figure> 和 <figcaption> 除了提升使用者體驗,對 SEO 也有多方面的助益。以下從搜尋引擎角度說明其價值:
語意強化與內容理解: 搜尋引擎爬蟲在分析頁面時,HTML 標籤提供了重要的線索。<figure> 標記的內容被視為獨立單元,而 <figcaption> 則被視為對該單元的說明文字。相比雜亂無章的 <div>,語意標籤能讓爬蟲更精準地理解內容層次。例如,Google 的指引中提到,<figcaption> 中的文字會被認作圖片的標題,而非普通段落文字或替代文字。這意味著搜尋引擎能分辨出「這段文字在說明上方的那張圖片」。對內容語意的精準掌握,有助於搜尋引擎在索引時把相關資訊關聯起來。
圖片搜尋的優化: 對於圖片SEO,figcaption 扮演著重要角色。Google 圖片搜尋會同時考慮 alt 文本和figcaption 內容來判斷圖片的相關性和作為摘要顯示。根據 Google 採訪資訊,<figcaption> 內文字被視為圖片的「caption(標題/說明)」,而不是重複的 alt 文本。換言之,如果你在 figcaption 裡巧妙地加入與圖片主題相關的關鍵字和描述,圖片搜尋結果中更有可能出現你的圖片,並在縮圖下方顯示 figcaption 的文字作為摘錄,增加點擊誘因。然而,正如前節所述,切忌figcaption只是機械地複製alt——更好的做法是提供補充資訊,這樣搜尋引擎在索引時就有兩份互補的資訊來理解該圖像。
Rich Snippet 及結構化資料: <figure> 本身並不是結構化資料(Structured Data)的格式,但良好的HTML語意結構為你進一步提供 Schema.org 等結構化標記創造了便利。比如,你可以在 <figure> 上使用 Microdata 或在頁面中嵌入 JSON-LD,描述該 figure 是一個 Schema.org/ImageObject,而 figcaption 的文字可對應到 ImageObject 的 caption 屬性。這樣一來,搜尋引擎更能機器可讀地掌握圖片的標題說明,有助於在相關搜尋結果中提供豐富摘要 (Rich Snippets)。雖然 Google 在 2022 年移除了圖片站點地圖中 <image:caption> 等欄位的支援(改為更依賴頁面內容解析),但這更凸顯了在頁面上以 figcaption 等方式提供圖片說明的重要性——因為爬蟲現已自行從頁面內容提取圖像相關資訊,而不依賴額外標記。
可讀性與停留時間: SEO 不僅在於讓機器讀懂,也在於人閱讀得愉快。使用 <figure>/<figcaption> 能提升文章的可讀性:圖文相伴、段落井然,讀者更容易吸收資訊。良好的閱讀體驗通常意味著更長的停留時間與更低的跳出率,這些使用者行為信號也會間接影響 SEO 表現。舉例來說,一篇技術文章如果圖片都有清晰的 figcaption 說明,讀者在快速瀏覽時能更快理解每張圖的意義,可能更願意細讀內容或分享連結。
總而言之,<figure> 與 <figcaption> 提供的語意結構對 SEO 有正面助益但非靈丹。它們協助搜尋引擎更好地解析頁面,尤其是圖像相關內容,但依然需要優質的文字搭配。也就是說,你仍須撰寫有意義的 figcaption 文字、適當的 alt 屬性,以及確保整體內容品質,才能真正提升搜尋排名和點擊率。
優化與最佳實踐建議
在實際運用 <figure> 與 <figcaption> 時,請考慮以下最佳實踐來優化結構、可訪問性與SEO效果:
該用則用,避免濫用: 並非頁面上所有圖片都一定要用 <figure> 包裹。對於裝飾性的圖案、純背景圖片或排版用途的圖,可以直接透過 CSS 處理或使用 <img alt=""> 而不需要 figcaption。如果某圖像沒有語義上的獨立意義(例如只是頁面裝飾),那麼使用 <figure> 反而可能讓結構顯得不必要複雜。換言之,當圖像或媒體需要一個標題/說明時再使用 <figure>,這樣語意標記才能發揮價值。
保持 <figcaption> 精簡且相關: 圖說文字應該扼要說明圖像或內容的重點,同時與主題相關。避免在 figcaption 寫過長的段落——如果說明文字超過數行,讀者可能混淆這是圖說還是正文的一部分。另外,過長的 figcaption 也可能暗示該內容其實屬於主文闡述,而非對圖的簡短說明。如果需要長篇描述,考慮將詳細資訊放在正文,figcaption 只放摘要或標題。另外,在 figcaption 中適度包含與主題相關的關鍵詞有助於 SEO,但請務必確保閱讀起來自然、服務於內容,而非刻意堆砌關鍵詞。
結構層級與 Outline: <figure> 本身不會打亂HTML文件的大綱層級,但要注意不要在 figcaption 中使用不適當的標題元素。例如,有些人可能想在 figcaption 中用 <h2> 來標示圖片標題。儘管技術上 figcaption 可包含 <h1>-<h6>(因為它允許流內容),但這些標題元素未必會被算入頁面主大綱,而且可能對SEO沒有幫助。如果真的要在 figcaption 裡有一個強調的標題,建議用 CSS 樣式呈現即可,不一定非要 <h*> 標籤。總之,避免讓 figcaption 干擾頁面主要內容的標題結構,以免搜尋引擎對頁面主題層次判斷混亂。
多媒體的無障礙考量: 若 <figure> 內容是圖片,務必書寫 alt 文本(除非圖片純裝飾且 alt 空白)。若內容是影音,也要提供替代方案,例如影片需考慮字幕或文字說明、音訊可提供文字紀錄等。<figcaption> 提供的是對媒體的概述或補充,但對於無法使用該媒體的人(看不到圖、聽不到音)而言,figcaption 可能不足以傳達全部資訊。例如,圖表的 figcaption 可能標示「2025年銷售趨勢圖」,但視障者可能還需要數據的詳細文字說明才能理解趨勢。因此,可以將圖表的關鍵數據以隱藏的文字或表格形式提供(例如加上 aria-describedby 連結到更詳細的說明區塊),以滿足無障礙需求。
相容性與代碼校驗: 目前主流瀏覽器都已經支援 <figure> 和 <figcaption> (這項標籤自2014年左右就廣泛實裝)。在非常舊的瀏覽器(例如 IE8 及以前)中,這些元素是未知標籤,可能需要 HTML5 Shiv 等腳本支援才能正確呈現。不過在2025年,大多不用擔心這點。如果需要你的網頁向下相容,確認使用這些新元素時頁面依然保持基本可讀性。同時,養成良好習慣:確保 figcaption 沒有寫在 figure 外部(那將是無效的HTML),每個 figure 起始和結束標籤正確匹配等,以通過 HTML 驗證。
Lazy Loading(延遲載入): 愈來愈多網站對圖片使用 lazy loading 來提升效能(讓非首屏圖片延後載入)。使用 <figure> 並不影響 lazy loading 的實施——你依然可以在 <img> 上加上 loading="lazy" 屬性,或使用 Intersection Observer 搭配數據屬性來實現懶加載。<figure> 僅僅是語意容器,不會干預圖片何時載入。唯一要注意的是:如果你用 JavaScript Lazy Load庫,確保它能正確找到頁面中的 <img> 標籤。不少懶載入方案是根據 <img> 是否在可視範圍內來啟動載入,figure 不會改變這邏輯。因此,可以安心地將 lazy loading 應用於 figure 中的圖像。同時,lazy load 圖片依然需要提供有效的 alt,以及可能的佔位樣式,避免延遲載入時版面突然位移影響體驗。
測試與迭代: 最後,不妨在部署 <figure>/<figcaption> 結構後,使用開發者工具或無障礙檢測工具(例如螢幕閱讀器、Lighthouse 無障礙評估)來查看效果。確定螢幕閱讀器在圖片處會讀出你期望的資訊(alt和figcaption),並檢查搜尋引擎抓取預覽(可透過Google搜尋控制台的網址檢查工具查看抓取後內容)是否包含 figcaption 文字。根據測試結果微調 figcaption 的文字內容或結構,確保在人與搜尋引擎兩方面都取得最佳平衡。
常見問答 FAQ
最後,我們整理幾個關於 <figure> 和 <figcaption> 的常見問題,提供快速解答:
總結
經過上述介紹,你應該對 <figure> 和 <figcaption> 有了全方位的理解。這對語意化標籤為我們的網頁內容提供了清晰的結構和含義,不僅令程式碼更易讀、維護,還讓讀者和搜尋引擎都能更好地從內容中獲取價值。
在日常前端開發中,建議善加利用 <figure>/<figcaption> 來標記圖文資訊。當你下一次要在文章中插入圖片或其他媒體時,不妨試試用 <figure> 包裹,添加一段貼切的 <figcaption> 說明,這小小的改變將為你的網頁帶來語意與可讀性的提升,讓內容更上一層樓。祝你在創作網頁時玩轉這對實用的元素,打造既美觀又結構良好的圖文版面!
