The usage of '<figure>' and '<figcaption>' tags

Basic Concepts of <figure> and <figcaption> Tags

HTML5 introduced the <figure> and <figcaption> tags specifically for handling media content such as images, charts, photos, and code snippets, along with their captions. <figure> is a semantic container, while <figcaption> provides a title or description for the contained content. These tags are typically used together, but <figcaption> is not mandatory.

<figure>
  <img src="sunset.jpg" alt="Beach sunset">
  <figcaption>Figure 1: Sunset view at a Maldives beach</figcaption>
</figure>

Detailed Usage of the <figure> Tag

<figure> is a block-level element that can contain various types of content:

• Images (<img>)
• Code snippets (<pre><code>)
• Charts (SVG or Canvas)
• Videos (<video>)
• Audio (<audio>)
• Tables (<table>)

Multi-image Example:

<figure class="gallery">
  <img src="photo1.jpg" alt="Building exterior">
  <img src="photo2.jpg" alt="Interior design">
  <img src="photo3.jpg" alt="Landscape layout">
  <figcaption>Three-view display of the project design</figcaption>
</figure>

Code Snippet Example:

<figure>
  <pre><code>
function calculateArea(radius) {
  return Math.PI * radius * radius;
}
  </code></pre>
  <figcaption>Listing 1: JavaScript function to calculate the area of a circle</figcaption>
</figure>

Positioning and Styling of <figcaption>

<figcaption> can be placed anywhere inside <figure>, but it typically appears at the beginning or end. CSS can be used to flexibly control its styling and position:

<figure class="captioned-image">
  <figcaption style="text-align: center; font-style: italic;">
    Figure 2: CSS positioning example
  </figcaption>
  <img src="demo.png" alt="Styling demo">
</figure>

<style>
  figure.captioned-image {
    position: relative;
    border: 1px solid #ddd;
    padding: 10px;
  }
  figure.captioned-image figcaption {
    position: absolute;
    bottom: -25px;
    left: 0;
    width: 100%;
    background: rgba(0,0,0,0.7);
    color: white;
    padding: 5px;
  }
</style>

Complex Content Combination Example

<figure> can nest other HTML elements to create complex layouts:

<figure class="data-visualization">
  <svg width="400" height="200">
    <!-- SVG chart content -->
    <rect x="50" y="50" width="300" height="100" fill="#4CAF50"/>
  </svg>
  <div class="chart-legend">
    <span class="color-swatch" style="background:#4CAF50"></span>
    <span>2023 Sales</span>
  </div>
  <figcaption>Figure 3: Annual sales data visualization (unit: 10,000 yuan)</figcaption>
</figure>

Accessibility Considerations

1. When <figure> contains an image, the alt attribute should still be included.
2. <figcaption> should not duplicate the alt text content.
3. Screen readers will recognize the relationship between these two tags.

Incorrect Example:

<figure>
  <img src="chart.png" alt="Figure 4: 2023 quarterly sales trend">
  <figcaption>Figure 4: 2023 quarterly sales trend</figcaption>
</figure>

Correct Example:

<figure>
  <img src="chart.png" alt="Line chart showing quarterly sales data">
  <figcaption>Figure 4: 2023 quarterly sales trend</figcaption>
</figure>

Application in Responsive Design

Combine with CSS Grid or Flexbox to achieve responsive layouts:

<div class="figure-grid">
  <figure>
    <img src="product1.jpg" alt="Product A">
    <figcaption>Flagship Product A</figcaption>
  </figure>
  <figure>
    <img src="product2.jpg" alt="Product B">
    <figcaption>Entry-level Product B</figcaption>
  </figure>
  <!-- More products -->
</div>

<style>
  .figure-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
  }
  figure {
    margin: 0;
    transition: transform 0.3s;
  }
  figure:hover {
    transform: scale(1.03);
  }
</style>

Integration with the <picture> Element

Combine responsive images with semantic captions:

<figure>
  <picture>
    <source media="(min-width: 1200px)" srcset="large.jpg">
    <source media="(min-width: 768px)" srcset="medium.jpg">
    <img src="small.jpg" alt="Responsive image example">
  </picture>
  <figcaption>
    Figure 5: Automatically loads different image sizes based on viewport
    <small>(Try resizing the browser window to see the effect)</small>
  </figcaption>
</figure>

Practical Example in Technical Documentation

Displaying an API response example:

<figure>
  <figcaption>Listing 2: JSON response structure for user data</figcaption>
  <pre><code class="language-json">
{
  "id": 12345,
  "username": "example_user",
  "email": "user@example.com",
  "created_at": "2023-01-15T08:30:00Z"
}
  </code></pre>
</figure>

Integration with Tabular Data

Adding descriptive captions to data tables:

<figure>
  <table>
    <thead>
      <tr>
        <th>Month</th>
        <th>Sales</th>
        <th>Growth Rate</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>January</td>
        <td>¥120,000</td>
        <td>+8%</td>
      </tr>
      <!-- More data rows -->
    </tbody>
  </table>
  <figcaption>Table 1: Sales performance statistics for the first half of 2023</figcaption>
</figure>

Dynamic Content Interaction Example

Updating charts and captions dynamically via JavaScript:

<figure id="dynamic-chart">
  <canvas id="salesChart" width="600" height="400"></canvas>
  <figcaption id="chart-caption">Figure 6: Current quarter sales trend</figcaption>
</figure>

<script>
  function updateChart(quarter) {
    const caption = document.getElementById('chart-caption');
    caption.textContent = `Figure 6: ${quarter} quarter sales trend`;
    
    // In a real project, chart update logic would go here
    console.log(`Updating to ${quarter} quarter data`);
  }
  
  // Simulate quarter switching
  setTimeout(() => updateChart('Q2'), 2000);
  setTimeout(() => updateChart('Q3'), 4000);
</script>