如何使用HTML圖和Figcaption元素將字幕與圖像或媒體關聯？

使用HTML 的<figure> 和<figcaption> 可以直觀且語義清晰地為圖片或媒體添加說明文字。 1. <figure> 用於包裹獨立的媒體內容，如圖片、視頻或代碼塊；2. <figcaption> 則作為其說明文字，置於<figure> 內部，可位於媒體上方或下方；3. 它們不僅提升頁面結構清晰度，還增強可訪問性和SEO 效果；4. 使用時應注意避免濫用，適用於需強調並附帶說明的內容，而非普通裝飾圖；5. 不可忽視 的alt 屬性，它與figcaption 的作用不同；6. figcaption 位置靈活，可根據需要放在figure 內頂部或底部。正確使用這兩個標籤，有助於構建語義清晰、易於理解的網頁內容。

給圖片或媒體添加說明文字時，用HTML 的<figure></figure>和<figcaption></figcaption>是個很直觀又語義清晰的做法。它們不僅能幫助組織頁面結構，還能提升可訪問性和SEO 效果。關鍵在於理解這兩個標籤的用途和正確寫法。

基本結構：怎麼把圖和說明文字聯繫起來

<figure></figure>標籤用來包裹一個獨立的內容塊，比如圖片、圖表、視頻等；而<figcaption></figcaption>則是它的“標題”或“說明文字”，通常放在<figure></figure>裡面，可以出現在內容的前面或後面。

舉個例子：

 <figure>
  <img src="/static/imghw/default1.png"  data-src="example.jpg"  class="lazy" alt="如何使用HTML圖和Figcaption元素將字幕與圖像或媒體關聯？">
  <figcaption>這是一段對圖片的簡要說明</figcaption>
</figure>

這樣瀏覽器和屏幕閱讀器就知道這段文字是對這張圖片的描述。你也可以把<figcaption>放在<figure>最上面，讓說明文字顯示在圖片上方。

多種媒體都適用，不只是圖片

雖然最常見的是搭配<img src="/static/imghw/default1.png" data-src="example.mp4" class="lazy" alt="如何使用HTML圖和Figcaption元素將字幕與圖像或媒體關聯？" >使用，但<figure>和<figcaption>同樣適用於其他類型的媒體，比如音頻、視頻或者代碼塊。

比如嵌入一段視頻加上說明：

 <figure>
  <video controls>
    <source type="video/mp4">
    您的瀏覽器不支持視頻播放。
  </video>
  <figcaption>這是一個演示視頻，展示產品使用過程</figcaption>
</figure>

再比如展示一段代碼：

 <figure>
  <pre class="brush:php;toolbar:false"><code>function helloWorld() { console.log("Hello, world!"); }</code>

只要內容是一個“獨立單元”，都可以考慮用<figure></figure>包裹，並用<figcaption></figcaption>加上說明。

實際應用中要注意的幾個細節

• 不要濫用：如果只是普通的內聯圖片（比如文章中的裝飾圖），就沒必要用<figure></figure> 。它更適合需要單獨強調、帶說明的媒體內容。
• 語義優先：這些標籤主要作用是增強文檔語義，而不是樣式佈局。雖然你可以用CSS 自定義樣式，但別為了排版而強行套用。
• alt 文字仍重要：即使有<figcaption></figcaption> ，也別忘了<img alt="如何使用HTML圖和Figcaption元素將字幕與圖像或媒體關聯？" >的alt屬性。它們的作用不同： alt是圖像本身不可見時的替代文本，而figcaption 是附加說明。
• 位置靈活： <figcaption></figcaption>可以放在<figure></figure>內部的頂部或底部，取決於你想讓它出現在媒體上方還是下方。

基本上就這些

總的來說， <figure></figure>和<figcaption></figcaption>是HTML 中非常實用的一組標籤，用來為媒體內容添加說明。它們不僅讓結構更清晰，也有助於無障礙訪問和搜索引擎識別內容意圖。用的時候注意語義和場景，別過度使用就行。

以上是如何使用HTML圖和Figcaption元素將字幕與圖像或媒體關聯？的詳細內容。更多資訊請關注PHP中文網其他相關文章！