콘텐츠에 의미를 더하는 figure와 figcaption

사실 사용하지 않는 사람들은 잘 사용하지 않아서 잘 모르는 태그일 수 있다.
보통 아래처럼 <div>로 묶어서 처리하는 경우가 많다.

<div>
  <img src="image.jpg" alt="이미지" />
  <p>내용</p>
</div>

<figure>와 <figcaption>은 콘텐츠와 그에 대한 설명을 하나의 단위로 묶어주는 시맨틱 태그이다.

figure 태그

<figure> 태그는 본문과 관련은 있지만 독립적으로 존재할 수 있는 콘텐츠를 묶는 컨테이너이다.
이미지, 영상, 코드 블록, 표 등 다양한 콘텐츠를 감쌀 수 있다.

<figure>
  <img src="cat.jpg" alt="고양이 사진" />
</figure>

figcaption 태그

<figcaption> 태그는 <figure> 내부 콘텐츠에 대한 설명(캡션)을 제공한다.
반드시 <figure> 안에 위치해야 하며, 첫 번째 또는 마지막 자식으로 작성한다.

<figure>
  <img src="cat.jpg" alt="고양이 사진" />
  <figcaption>햇살 아래 낮잠을 자는 고양이</figcaption>
</figure>

img 단독 vs figure + figcaption

<!-- img 단독 사용 -->
<div>
  <img src="chart.png" alt="2026년 매출 그래프" />
  <p>2026년 분기별 매출 현황이다.</p>
</div>
 
<!-- figure + figcaption 사용 -->
<figure>
  <img src="chart.png" alt="2026년 매출 그래프" />
  <figcaption>2026년 분기별 매출 현황이다.</figcaption>
</figure>

<div>로 묶으면 이미지와 설명이 시각적으로는 묶여 있지만, 브라우저는 둘의 관계를 알 수 없다.
<figure>로 묶으면 이미지와 설명이 하나의 콘텐츠 단위임을 명확히 표현할 수 있다.