Structured illustrations and their titles in HTML5 using <figure> and <figcaption> are very effective. <figure> is used to encapsulate independent content such as pictures, charts, etc., while <figcaption> provides it with a title, which combines the two to improve semantics and accessibility; it is commonly found in illustrations or data visualization scenarios in blogs, technical articles and reports; the default style can be customized through CSS to optimize layout and aesthetics, while enhancing the experience and SEO effects of screen reader users.

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.

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:

 <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:

• 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="Using `` and `` in HTML5 for illustrations." > 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="Using `` and `` in HTML5 for illustrations." > 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.

The above is the detailed content of Using `` and `` in HTML5 for illustrations.. For more information, please follow other related articles on the PHP Chinese website!