HTML

요소 완벽 가이드: 이미지와 콘텐츠를 시맨틱하게 마크업하기

HTML의 <figure> 요소는 문서 내에서 독립적인 콘텐츠를 의미 있게 감싸는 데 사용되는 시맨틱 태그입니다. 이 글에서는 <figure> 요소의 기본 개념과 실제 활용 방법을 알아보겠습니다.

<figure> 요소란?

<figure> 태그는 HTML에서 피규어(figure) 요소를 만들 때 사용합니다. 기본 구조는 다음과 같습니다.

<figure>
  <!-- 여기에 콘텐츠를 넣습니다 -->
</figure>

<figure> 요소의 용도

<figure> 요소는 삽화, 사진, 다이어그램, 코드 예제처럼 본문에서 독립적으로 참조 가능한 콘텐츠를 마크업하는 데 사용됩니다. 대표적인 예로 이미지를 감싸는 방법은 다음과 같습니다.

<figure>
  <img src="파일경로" alt="이미지 설명" />
</figure>

<figcaption>으로 캡션 추가하기

<figcaption> 요소는 <figure> 요소 안에 캡션(설명)을 추가할 때 사용하며, 특히 이미지와 함께 자주 활용됩니다.

<figure>
  <img src="이미지경로.jpg" alt="이미지 설명" />
  <figcaption>사진 캡션</figcaption>
</figure>

<figure>를 사용해야 하는 이유

<figure>와 <figcaption>을 함께 사용하면 다음과 같은 장점이 있습니다.

• 시맨틱한 구조: 스크린 리더 등 보조 기술이 콘텐츠의 의미를 더 정확하게 이해할 수 있습니다.
• 접근성 향상: 캡션이 이미지와 명확하게 연결되어 시각 장애인 사용자에게도 유용합니다.
• 독립성 보장: 해당 콘텐츠가 본문 흐름과 분리되어도 의미가 유지됩니다.
• 스타일링 편의성: CSS로 그룹 단위 스타일을 적용하기 쉽습니다.

이처럼 <figure> 요소는 단순히 이미지를 감싸는 것을 넘어, 웹 페이지의 구조적 의미와 접근성을 높이는 중요한 도구입니다. 이미지, 차트, 코드 예제 등 독립적인 콘텐츠를 다룰 때 적극적으로 활용해 보세요.