Figure & Figcaption

<h2>Figure & Figcaption Semantic Elements</h2>
<div class="container">
  <!-- Example 1: Simple Image with Caption -->
  <div class="example-section">
    <h3>1. Image with Caption</h3>
    <figure>
      <img
        src="https://picsum.photos/500/300?image=30"
        alt="A stunning mountain landscape at sunset"
        width="500"
        height="300"
        />
        <figcaption>Fig. 1 - Majestic mountain peaks bathed in golden sunset light, showcasing nature's beauty.</figcaption>
      </figure>
    </div>
    <!-- Example 2: Code Snippet with Figure -->
    <div class="example-section">
      <h3>2. Code Example with Caption</h3>
      <figure>
        <pre><code>function greet(name) {
          return `Hello, ${name}!`;
          }
          console.log(greet("World"));</code></pre>
          <figcaption>Fig. 2 - A simple JavaScript function demonstrating template literals and function declaration.</figcaption>
        </figure>
      </div>
      <!-- Example 3: Diagram or Chart -->
      <div class="example-section">
        <h3>3. Diagram with Caption</h3>
        <figure>
          <svg width="500" height="300" viewBox="0 0 500 300">
            <rect x="50" y="50" width="100" height="100" fill="#3b82f6" stroke="#1e293b" stroke-width="2"/>
            <circle cx="300" cy="100" r="50" fill="#10b981" stroke="#1e293b" stroke-width="2"/>
            <polygon points="450,150 400,250 500,250" fill="#f59e0b" stroke="#1e293b" stroke-width="2"/>
            <text x="100" y="105" font-size="14" fill="white" text-anchor="middle">Rectangle</text>
            <text x="300" y="110" font-size="14" fill="white" text-anchor="middle">Circle</text>
            <text x="450" y="170" font-size="14" fill="white" text-anchor="middle">Triangle</text>
          </svg>
          <figcaption>Fig. 3 - Basic geometric shapes: rectangle, circle, and triangle with different colors.</figcaption>
        </figure>
      </div>
      <!-- Example 4: Quote as Figure -->
      <div class="example-section">
        <h3>4. Blockquote with Attribution</h3>
        <figure>
          <blockquote>
            "The only way to do great work is to love what you do." - Steve Jobs
          </blockquote>
          <figcaption>A famous quote about passion and excellence in work.</figcaption>
        </figure>
      </div>
      <!-- Example 5: Multiple Images in Figure -->
      <div class="example-section">
        <h3>5. Related Images with Single Caption</h3>
        <figure>
          <div class="image-grid">
            <img
              src="https://picsum.photos/400/300?image=40"
              alt="Forest with tall trees"
              width="400"
              height="300"
              />
              <img
                src="https://picsum.photos/400/300?image=41"
                alt="Desert landscape at sunrise"
                width="400"
                height="300"
                />
              </div>
              <figcaption>Fig. 5 - Contrasting ecosystems: a dense forest and an expansive desert landscape.</figcaption>
            </figure>
          </div>
          <!-- Example 6: Video with Caption -->
          <div class="example-section">
            <h3>6. Video with Caption</h3>
            <figure>
              <video width="500" height="300" controls>
                <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
                Your browser does not support the video tag.
              </video>
              <figcaption>Fig. 6 - A sample video demonstrating the HTML5 video element with controls.</figcaption>
            </figure>
          </div>
        </div>