HTML figure·figcaption 태그: 그림과 캡션 묶는 방법

HTML의 <figure>는 그림·도표·코드 등 독립적으로 이해할 수 있는 콘텐츠를 하나의 단위로 묶고, <figcaption>은 그 단위의 캡션을 표시합니다. figcaption은 figure의 첫 번째 또는 마지막 자식으로 한 번 배치하며, 캡션이 필요하지 않으면 생략할 수 있습니다.

figure는 이미지 전용 요소인가요?

사진뿐 아니라 삽화, 차트, 코드 예제, 인용문 등 본문에서 하나의 자료로 참조할 수 있는 내용에 사용할 수 있습니다. 단순한 스타일링 상자가 필요하다면 div를 사용하고, 관련 구역 전체를 figure로 감싸는 방식은 피합니다. figure를 사용한다고 자료의 저작권이나 출처가 자동으로 확인되는 것도 아닙니다.

figcaption은 바로 부모인 figure의 나머지 내용을 설명합니다. figure 바깥에 홀로 두거나 같은 figure 안에 여러 캡션 요소를 넣지 않습니다. 위·아래 설명이 모두 필요하면 하나의 figcaption 안에 필요한 설명을 모아 구성합니다.

전체 예제: 캡션을 앞과 뒤에 배치하기

아래 코드를 figures.html로 저장해 브라우저에서 엽니다. 별도 이미지 파일 없이 실행되도록 SVG(확대 가능한 벡터 그래픽)로 간단한 도형을 직접 그렸습니다. 첫 자료는 캡션이 앞에, 둘째 자료는 뒤에 있습니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>figure 캡션 위치 비교</title>
  <style>
    figure { margin: 1rem 0; max-width: 20rem; }
    svg { display: block; width: 100%; height: auto; }
    figcaption { padding: 0.5rem 0; }
  </style>
</head>
<body>
  <h1>두 도형 비교</h1>
  <figure>
    <figcaption>그림 A. 파란 원</figcaption>
    <svg viewBox="0 0 240 120" role="img" aria-label="밝은 배경 중앙의 파란 원">
      <rect width="240" height="120" fill="#f0f3f5" />
      <circle cx="120" cy="60" r="36" fill="#176e96" />
    </svg>
  </figure>
  <figure>
    <svg viewBox="0 0 240 120" role="img" aria-label="밝은 배경 중앙의 주황 사각형">
      <rect width="240" height="120" fill="#f0f3f5" />
      <rect x="84" y="24" width="72" height="72" fill="#b35a12" />
    </svg>
    <figcaption>그림 B. 주황 사각형</figcaption>
  </figure>
</body>
</html>

화면에는 “그림 A. 파란 원” 아래에 원이, 사각형 아래에 “그림 B. 주황 사각형”이 나타납니다. 창을 좁혀도 SVG는 figure 너비에 맞게 줄어듭니다. 캡션 위치는 태그를 바깥으로 옮겨 바꾸는 것이 아니라 figure 안에서 첫째·마지막 위치를 바꾸어 비교합니다.

캡션과 이미지 대체 텍스트 구분하기

figcaption은 모든 독자에게 보이는 제목·해설·출처를 담을 수 있습니다. 이미지의 alt는 이미지를 볼 수 없는 경우에 필요한 대체 내용을 전달합니다. 캡션이 있다는 이유만으로 중요한 이미지의 alt를 무조건 비우거나, 모든 설명을 두 곳에 그대로 반복하지 않습니다.

예제의 SVG는 img가 아니므로 role과 aria-label로 도형의 내용을 제공합니다. 실제 사진 파일을 img로 넣을 때는 src와 alt를 지정하고 필요한 크기를 함께 적습니다. 차트가 수치 비교를 전달한다면 짧은 캡션만으로 충분한지 검토하고 본문이나 표에도 핵심 데이터를 제공합니다.

figure는 캡션이나 그림 번호를 자동으로 생성하지 않으며, 기본 여백도 브라우저·CSS에 따라 달라집니다. 번호가 필요하면 문서의 참조와 일치하도록 관리하세요. 자세한 요소 규칙은 MDN figure 문서와 MDN figcaption 문서를 참고합니다.