使用<figure>和<figcaption>在HTML5中結(jié)構(gòu)化圖示及其標(biāo)題非常有效。 <figure>用于封裝獨立內(nèi)容如圖片、圖表等，而<figcaption>則為其提供標(biāo)題，兩者結(jié)合提升語義性和可訪問性；常見于博客、技術(shù)文章和報告中的插圖或數(shù)據(jù)可視化場景；默認樣式可通過CSS自定義以優(yōu)化布局與美觀，同時增強屏幕閱讀器用戶的體驗及SEO效果。

Using <figure></figure> and <figcaption></figcaption> in HTML5 is a great way to structure illustrations, diagrams, or images along with their captions. These tags help make your content more semantic and accessible, which is especially useful for screen readers and SEO.

` and `<figcaption>` in HTML5 for illustrations." />

What Are <figure></figure> and <figcaption></figcaption>?

The <figure></figure> tag is used to encapsulate self-contained content like images, charts, or diagrams. It's typically used in conjunction with the <figcaption></figcaption> element, which provides a caption or title for the content inside <figure></figure>. Together, they help browsers and assistive technologies understand the relationship between an image and its description.

For example:

` and `<figcaption>` in HTML5 for illustrations." />

<figure>
  <img src="/static/imghw/default1.png"  data-src="chart.png"  class="lazy" alt="Sales growth chart">
  <figcaption>Sales Growth from Q1 to Q4</figcaption>
</figure>

This structure makes it clear that "Sales Growth from Q1 to Q4" is the caption for the chart image.

When Should You Use Them?

You should use <figure> and <figcaption> when:

` and `<figcaption>` in HTML5 for illustrations." />

• An image or diagram has a visible caption.
• The content can stand alone from the main flow of the document.
• You want to improve accessibility and semantic meaning.

They’re commonly used in blogs, documentation pages, and educational websites where visuals are accompanied by explanations.

Some common scenarios include:

• Blog posts with illustrative images
• Technical articles with code diagrams
• Reports with data visualizations

Avoid using <figure> for purely decorative images or layout purposes — that’s what CSS is for.

How to Style <figure> and <figcaption>

By default, browsers apply some basic styling to <figure>, like removing margins and making it a block-level element. But you can customize this easily with CSS.

Here’s a simple example:

figure {
  margin: 1em 0;
  text-align: center;
}

figcaption {
  font-style: italic;
  color: #666;
  margin-top: 0.5em;
}

With this CSS, all figures will be centered and have a small vertical space around them, while captions will appear in italics and a lighter color.

A few tips when styling:

• Always include alt text in <img alt="在HTML5中使用``和``" > tags inside <figure></figure>
• Consider responsiveness — wrap images in <figure></figure> for easier mobile layout
• Don’t forget about spacing — captions shouldn't stick too close to the image

Also, remember that <figure></figure> can contain other elements like <video></video>, <audio></audio>, or even multiple <img alt="在HTML5中使用``和``" > tags if needed.

Accessibility Benefits

Using <figure></figure> and <figcaption></figcaption> improves the experience for users who rely on screen readers. These tools can identify the relationship between the figure and its caption, allowing users to better understand the context.

In addition:

• Screen readers may announce the presence of a caption
• Search engines can better index visual content with proper structure
• Your markup becomes cleaner and easier to maintain

It might not seem like much, but these small improvements add up over time.

---

That’s basically how <figure></figure> and <figcaption></figcaption> work together. They're not complicated, but they do make a difference in clarity and accessibility.

以上是在HTML5中使用``和``的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！