HTML figure 태그로 이미지+설명+출처까지 완벽하게 정리하기

HTML figure 태그 – 콘텐츠와 설명을 세트로 묶는 법

웹페이지를 만들다 보면 단순히 이미지만 넣는 경우가 많습니다. 그런데 이미지를 넣다 보면 이런 생각이 들죠.
“이 이미지가 뭘 의미하는지 설명도 같이 넣고 싶은데?”
예를 들어 차트를 보여주고 출처를 적거나, 유머짤을 보여주면서 부연 설명을 하고 싶을 때 말입니다.

이럴 때 사용하는 태그가 바로 figure입니다.
단순히 이미지를 보여주는 것에서 끝나는 것이 아니라, 의미까지 전달하는 시맨틱 태그죠.

많은 사람들이 figure를 “그냥 이미지에 캡션 붙이는 거 아닌가요?”라고 생각합니다.
하지만 정확히 말하면 설명이 필요한 모든 콘텐츠를 묶어주는 태그입니다.
이미지, 차트, 코드, 심지어 유머짤까지도 <figure> 안에 넣을 수 있습니다.

Step 1. figure의 기본 구조

기본 구조는 아주 간단합니다.
이미지나 콘텐츠 + 설명을 figure와 figcaption으로 묶습니다.

<figure>
   <img src="이미지주소" alt="설명">
   <figcaption>이 이미지는 HTML을 설명하는 비버입니다</figcaption>
</figure>

figcaption은 figure 안에서만 사용해야 합니다.
위치를 자유롭게 조절할 수 있지만 보통은 아래에 설명을 붙입니다.

Step 2. 단순 이미지 캡션과의 차이

그냥 <img>를 쓰고 아래에 <p>로 설명을 달 수도 있습니다.
하지만 이건 “단순 시각적 배치”일 뿐입니다.

반면 figure를 사용하면 브라우저나 검색엔진이
“이건 설명과 콘텐츠가 하나의 묶음이구나”라고 정확히 이해합니다.
접근성(스크린리더)에서도 “이건 설명이 붙은 이미지입니다”라고 알려줍니다.

<img src="image.jpg" alt="설명">
<p>그냥 이미지 설명입니다</p>

이건 그냥 보이는 것뿐입니다.
의미 전달까지 하려면 아래처럼 해야 합니다.

<figure>
  <img src="image.jpg" alt="설명">
  <figcaption>정식 이미지 설명입니다</figcaption>
</figure>

Step 3. 다양한 활용 예제

figure는 이미지뿐 아니라 다양한 콘텐츠에 사용할 수 있습니다.

• 1. 차트 + 출처

차트를 보여주면서 출처를 명확하게 알려줄 때 활용합니다.

• 2. 코드 설명

코드를 보여주면서 무슨 코드인지 설명할 때도 사용합니다.

<p>이건 문단입니다</p>
  

• 3. 유머짤 + 부연설명

단순히 웃긴 이미지도 figure를 쓰면 더 직관적으로 표현할 수 있습니다.

Step 4. 언제 figure를 써야 할까?

단순한 이미지만 보여줄 때는 <img>만 써도 됩니다.
하지만 설명까지 전달하고 싶을 때는 반드시 figure를 사용하세요.

이렇게 하면 검색엔진도, 스크린리더도 설명과 콘텐츠의 관계를 정확하게 이해합니다.

정리하며

다음 포스팅에서는 HTML picture 태그를 다뤄보겠습니다.