<figure>- Media content combination

<figure> is a semantic tag introduced in HTML5, used to wrap independent media content (such as images, charts, code blocks, etc.) and its associated caption (<figcaption>). It enhances content readability and accessibility through a structured approach.

Basic Usage of <figure>

<figure> is a container element that typically includes media content (e.g., <img>, <video>, <code>, etc.) and an optional <figcaption> title. Here’s a classic example:

<figure>
  <img src="sunset.jpg" alt="Beach sunset">
  <figcaption>Figure 1: Sunset at Maldivian Beach</figcaption>
</figure>

Browsers will display <figcaption> below the media content by default. You can adjust the caption position using CSS:

figure {
  border: 1px solid #ddd;
  padding: 10px;
  max-width: 500px;
}
figcaption {
  font-style: italic;
  text-align: center;
}

Supported Content Types

Image Combinations

The most common use is wrapping images and captions:

<figure>
  <img src="architecture.jpg" alt="Modern architecture">
  <figcaption>Exterior design of Shanghai Tower</figcaption>
</figure>

Code Examples

Ideal for displaying code snippets:

<figure>
  <pre><code>
function greet() {
  console.log("Hello World!");
}
  </code></pre>
  <figcaption>Listing 1: Basic JavaScript Function</figcaption>
</figure>

Multimedia Content

Can combine elements like video and audio:

<figure>
  <video controls width="400">
    <source src="demo.mp4" type="video/mp4">
  </video>
  <figcaption>Video Demo: Product Tutorial</figcaption>
</figure>

Chart Data

Works with SVG or Canvas for data visualization:

<figure>
  <svg width="200" height="100">
    <rect width="200" height="100" fill="#4CAF50" />
  </svg>
  <figcaption>Figure 2: Green Rectangle (SVG Example)</figcaption>
</figure>

Advanced Use Cases

Multi-Content Combinations

A single <figure> can contain multiple media objects:

<figure>
  <img src="view1.jpg" alt="View 1">
  <img src="view2.jpg" alt="View 2">
  <figcaption>Figure 3: Dual-Perspective Comparison</figcaption>
</figure>

Responsive Design

Combine with CSS Grid for complex layouts:

<figure class="gallery">
  <img src="photo1.jpg" alt="">
  <img src="photo2.jpg" alt="">
  <img src="photo3.jpg" alt="">
  <figcaption>Figure 4: Photo Wall Display</figcaption>
</figure>

<style>
  .gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
</style>

Interactive Enhancements

Add interactivity with JavaScript:

<figure id="zoom-figure">
  <img src="product.jpg" alt="Product close-up">
  <figcaption>Click to zoom</figcaption>
</figure>

<script>
  document.getElementById('zoom-figure').addEventListener('click', function() {
    this.classList.toggle('zoomed');
  });
</script>

<style>
  #zoom-figure { cursor: zoom-in; }
  #zoom-figure.zoomed { 
    transform: scale(1.5);
    cursor: zoom-out;
  }
</style>

Accessibility Key Points

1. Alt Text: Ensure embedded <img> has descriptive alt attributes.
2. Caption Association: <figcaption> should clearly describe the content.
3. Keyboard Navigation: Interactive content must support keyboard operation.

<figure>
  <img src="chart.png" alt="2023 Quarterly Sales Trend: Q1 20%, Q2 35%, Q3 25%, Q4 20%">
  <figcaption>Figure 5: Annual Sales Data Visualization</figcaption>
</figure>

Comparison with Other Tags

Practical Applications

Blog Post Illustrations

<article>
  <h2>Photography Tips</h2>
  <figure>
    <img src="long-exposure.jpg" alt="Long-exposure nightscape">
    <figcaption>City nightscape captured with 30-second exposure</figcaption>
  </figure>
  <p>Main content...</p>
</article>

Product Display Page

<div class="product">
  <figure>
    <img src="product-360.gif" alt="Product 360-degree view">
    <figcaption>Figure 6: Hover to view product details</figcaption>
  </figure>
  <button>Add to Cart</button>
</div>

Browser Compatibility Note

All modern browsers support <figure>, including:

• Chrome 8+
• Firefox 4+
• Safari 5.1+
• Edge 12+
• Opera 11+

For IE9 and below, add the following CSS declaration:

figure { 
  display: block;
  margin: 1em 40px;
}

Semantic Advantages

1. SEO Optimization: Helps search engines understand content structure.
2. Reading Mode: Recognized as independent content units by readers.
3. Style Isolation: Easier to apply specific styles to media content.

<figure class="highlight">
  <img src="infographic.png" alt="Infographic">
  <figcaption>Figure 7: Annual Data Statistics Infographic</figcaption>
</figure>

<style>
  .highlight {
    background: #f8f9fa;
    padding: 20px;
    border-left: 4px solid #4285f4;
  }
</style>