使用figure和figcaption標籤能正確地將媒體內(nèi)容與標題語義化關(guān)聯(lián)，提升可訪問性、SEO和結(jié)構(gòu)；1. figure用於包含獨立內(nèi)容如圖片、圖表或代碼片段；2. figcaption為其提供標題，可置於內(nèi)部首位或末位；3. 適用於有標題的媒體、正文中引用的圖表或可移除而不影響文意的內(nèi)容；4. 使用時需保留圖片alt屬性，避免僅用於樣式佈局，允許多媒體組合但每figure僅一個figcaption；5. 默認無視覺樣式，需CSS控制外觀，但增強HTML語義性。

The figure and figcaption HTML tags are useful for semantically grouping images, diagrams, code snippets, or other media with their associated captions. Using them correctly improves accessibility, SEO, and the overall structure of your content.

What the figure and figcaption tags do

The <figure></figure> element represents self-contained content that can be moved away from the main content—like illustrations, photos, diagrams, or code examples—without affecting the document's flow. It's typically referenced inline but can stand alone.

The <figcaption></figcaption> element provides a caption or legend for the content inside <figure></figure> . It's optional, but when used, it should be the first or last child of <figure></figure> .

Together, they help screen readers and search engines understand the relationship between media and their descriptions.

When to use figure and figcaption

Use these tags when:

• An image, chart, or code block has a caption.
• The content is referenced from the main text (eg, “See Figure 1”).
• The media is self-contained and could be removed without breaking the meaning of the surrounding text.

Common use cases:

• Photos with descriptive captions
• Charts or graphs with titles
• Code snippets with explanations
• Illustrations in articles

How to use them: Basic syntax

Here's a simple example with an image:

 <figure>
  <img src="/static/imghw/default1.png"  data-src="chart.png"  class="lazy" alt="Sales growth from 2020 to 2023">
  <figcaption>Sales growth over the past three years.</figcaption>
</figure>

And with a code snippet:

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

You can also place <figcaption> before the content if you want the caption above:

 <figure>
  <figcaption>Directory structure of a basic web project.</figcaption>
  <pre class="brush:php;toolbar:false">
project/
├── index.html
├── css/
│ └── style.css
└── js/
    └── main.js
  

Key points to remember

• Always use alt text on images even inside <figure></figure> . The alt attribute describes the image for accessibility, while <figcaption></figcaption> adds context.
• Don't use <figure></figure> just for styling . It's a semantic element, not a wrapper for floating images.
• Multiple elements can go in one <figure></figure> , like an image and a chart together with a single caption.
• Only one <figcaption></figcaption> per <figure></figure> , but it can contain multiple sentences or even paragraphs if needed.

These tags don't change visual appearance by default—styling is up to CSS—but they make your HTML more meaningful.

Basically, if it looks like a figure in a textbook with a caption underneath (or above), <figure></figure> and <figcaption></figcaption> are probably the right choice.

以上是如何使用HTML圖和圖形標籤的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！