HTML5 <figure>와 <figcaption> – 이미지와 캡션을 올바르게 쓰는 방법

 

 

안녕하세요 😊
웹에서 이미지를 넣을 때, 단순히 <img> 태그만 사용하는 경우가 많습니다.
하지만 HTML5에서는 이미지와 그 설명(캡션)을 구조적으로 묶어 표현할 수 있는
<figure>와 <figcaption> 태그를 제공합니다.

 

이 태그들을 올바르게 사용하면

• 접근성(Accessibility) 강화
• SEO(검색엔진 최적화) 개선
• 코드 가독성 향상
  등의 효과를 얻을 수 있습니다.

---

📍 1. <figure>란?

• 이미지, 코드 스니펫, 차트 등 독립적인 콘텐츠 블록을 나타내는 태그
• 문서의 주 흐름에서 분리되어도 의미가 유지됨
• 내부에 <figcaption>을 함께 쓸 수 있음

기본 예제

<figure>
  <img src="sunset.jpg" alt="해질녘 바다 풍경">
</figure>

---

📍 2. <figcaption>란?

• <figure> 내부 콘텐츠에 대한 **설명(캡션)**을 제공하는 태그
• <figure> 내부에서 첫 번째나 마지막 위치에 배치 가능

예제

<figure>
  <img src="sunset.jpg" alt="해질녘 바다 풍경">
  <figcaption>서해안에서 촬영한 아름다운 노을</figcaption>
</figure>

---

📍 3. 시각 + 접근성 모두 챙기는 방법

• alt 속성 → 화면 낭독기(스크린리더)가 이미지를 설명
• <figcaption> → 이미지 설명을 시각적으로 보여줌
• 두 가지를 함께 쓰면 시각적·비시각적 사용자 모두에게 유용

---

📍 4. 스타일링 예제

figure {
  margin: 0;
  text-align: center;
}

figcaption {
  font-size: 0.9rem;
  color: #555;
  margin-top: 8px;
}

---

📍 5. 실무 활용 예시 – 코드 스니펫

<figure>
  <pre><code>console.log("Hello World");</code></pre>
  <figcaption>JavaScript 콘솔 출력 예제</figcaption>
</figure>

• 이미지뿐 아니라 차트, 코드, 도표에도 활용 가능

---

📍 6. SEO와 접근성 효과

• 검색 엔진은 <figcaption> 내용을 이미지 관련 키워드로 인식
• 스크린리더는 <figcaption>을 이미지와 연계해 읽어줌
• 이미지 검색에서 더 높은 노출 가능

---

✅ 마무리

<figure>와 <figcaption>은 단순한 태그 같지만
웹 표준·접근성·SEO를 동시에 챙길 수 있는 강력한 도구입니다.
앞으로 이미지를 넣을 때는 <figure>로 묶고,
설명은 <figcaption>으로 함께 제공해보세요. 😊