<figcaption>- Media content title

Basic Concept of the <figcaption> Tag

The <figcaption> is a semantic tag introduced in HTML5, specifically designed to provide a title or descriptive text for a <figure> element. This tag is typically used in conjunction with <figure> to form a complete "media content + description" structure.

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

Syntax Rules for <figcaption>

The <figcaption> is a paired tag, requiring both opening and closing tags. According to HTML5 specifications:

1. Must be a direct child of <figure>
2. Can be placed as either the first or last child element within <figure>
3. A <figure> can contain only one <figcaption>

Incorrect examples:

<!-- Error: Not inside a figure -->
<figcaption>Standalone description</figcaption>

<!-- Error: Multiple figcaptions -->
<figure>
  <figcaption>Title 1</figcaption>
  <img src="pic.jpg">
  <figcaption>Title 2</figcaption>
</figure>

Impact of Position on Styling

The position of <figcaption> affects default styles and layout:

Front-positioned example:

<figure>
  <figcaption style="background: #f0f0f0; padding: 10px;">
    Figure 2: Front-positioned title
  </figcaption>
  <img src="chart.png" alt="Data chart">
</figure>

Rear-positioned example:

<figure style="border: 1px solid #ddd;">
  <img src="diagram.svg" alt="Flowchart">
  <figcaption style="font-style: italic; text-align: center;">
    Figure 3: Rear-positioned description
  </figcaption>
</figure>

Integration with Different Media Types

Used with Images

<figure class="photo-frame">
  <img src="product.jpg" alt="New product display" width="400">
  <figcaption class="photo-caption">
    <strong>2023 Fall Collection</strong> | Photographer: John Doe
  </figcaption>
</figure>

Used with Code Blocks

<figure>
  <pre><code>
function greet(name) {
  return `Hello, ${name}!`;
}
  </code></pre>
  <figcaption>Code 1: JavaScript greeting function</figcaption>
</figure>

Used with Videos

<figure>
  <video controls width="600">
    <source src="tutorial.mp4" type="video/mp4">
  </video>
  <figcaption>
    Video Tutorial: How to use new features | Duration: 5m23s
  </figcaption>
</figure>

Styling Customization Techniques

CSS can be used to flexibly control the presentation of <figcaption>:

/* Basic styles */
figcaption {
  font-size: 0.9em;
  color: #666;
  padding: 8px 0;
}

/* Special styles for image captions */
figure.photo figcaption {
  background: rgba(0,0,0,0.7);
  color: white;
  padding: 10px;
  position: absolute;
  bottom: 0;
  width: 100%;
}

/* Code block caption styles */
figure.code figcaption {
  background: #f5f5f5;
  border-top: 1px solid #ddd;
  font-family: monospace;
  padding: 5px 10px;
}

Application in Responsive Design

Optimize captions for different screen sizes using media queries:

<figure class="responsive-figure">
  <img src="data-visualization.png" alt="Data visualization">
  <figcaption class="responsive-caption">
    <span class="full-caption">Figure 4: 2023 Quarterly Sales Data Trend Analysis (Unit: 10K CNY)</span>
    <span class="short-caption">Sales Trend Chart</span>
  </figcaption>
</figure>

<style>
  .short-caption { display: none; }
  
  @media (max-width: 600px) {
    .full-caption { display: none; }
    .short-caption { display: inline; }
    figcaption { font-size: 0.8rem; }
  }
</style>

Accessibility Considerations

To enhance accessibility:

1. Ensure <figcaption> and associated content follow a logical DOM order
2. Avoid conveying information solely through visual styling
3. Provide ARIA attributes for complex descriptions

<figure aria-labelledby="fig1-desc">
  <img src="infographic.png" alt="Infographic">
  <figcaption id="fig1-desc">
    Figure 5: User growth data
    <span class="sr-only">. From January to June 2023, new user growth rate was 35%</span>
  </figcaption>
</figure>

<style>
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
</style>

Integration with Tables

<figcaption> can also provide descriptions for data tables:

<figure>
  <figcaption>Table 1: 2023 Sales Data Summary</figcaption>
  <table>
    <thead>
      <tr>
        <th>Quarter</th>
        <th>Sales</th>
        <th>Growth Rate</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Q1</td>
        <td>¥1,200,000</td>
        <td>12%</td>
      </tr>
      <!-- More data rows -->
    </tbody>
  </table>
</figure>

Dynamic Content Interaction Example

Implement interactive captions using JavaScript:

<figure id="interactive-fig">
  <img src="gallery1.jpg" alt="Gallery image" id="gallery-img">
  <figcaption id="img-caption">Image 1/5: Cityscape</figcaption>
  <button onclick="nextImage()">Next</button>
</figure>

<script>
  const images = [
    { src: "gallery1.jpg", caption: "Image 1/5: Cityscape" },
    { src: "gallery2.jpg", caption: "Image 2/5: Natural landscape" },
    // More image data
  ];
  
  let currentIndex = 0;
  
  function nextImage() {
    currentIndex = (currentIndex + 1) % images.length;
    document.getElementById('gallery-img').src = images[currentIndex].src;
    document.getElementById('img-caption').textContent = 
      images[currentIndex].caption;
  }
</script>

Special Handling for Print Styles

Optimize <figcaption> display for print media:

@media print {
  figure {
    page-break-inside: avoid;
  }
  
  figcaption {
    color: black;
    font-weight: bold;
    border-bottom: 1pt solid #999;
  }
  
  figure img {
    max-width: 100% !important;
  }
}