figcaption 요소란 무엇인가?
HTML의 <figcaption> 요소는 <figure> 요소에 캡션(설명문)을 추가할 때 사용합니다. 주로 이미지, 차트, 코드 블록, 삽화 등에 대한 설명을 붙이는 용도로 활용되며, 특히 사진 아래에 캡션을 달 때 가장 널리 사용됩니다.
캡션은 해당 콘텐츠를 직접 참조하거나 보충 설명을 제공하는 짧은 텍스트로 작성하는 것이 좋습니다. 검색 엔진 최적화(SEO)와 웹 접근성 측면에서도 이미지에 대한 맥락을 제공하기 때문에 유용합니다.
기본 사용 예제
다음은 <figure> 요소 안에서 이미지와 함께 <figcaption>을 사용하는 기본적인 코드 예시입니다:
<figure>
<img src="path-to-image.jpg" alt="이미지 설명" />
<figcaption>사진에 대한 캡션</figcaption>
</figure>주요 사용 규칙
<figcaption>을 사용할 때는 다음 사항을 기억하세요:
- 위치 제한: <figcaption>은 반드시 <figure> 요소의 자식으로만 사용할 수 있습니다.
- 단 하나만 허용: 하나의 <figure> 안에는 <figcaption>을 하나만 포함할 수 있습니다.
- 배치 위치: 일반적으로 캡션은 콘텐츠 아래에 배치하지만, 필요에 따라 위나 첫 번째 자식으로 배치할 수도 있습니다.
정리
<figcaption>은 시맨틱 HTML의 중요한 요소 중 하나로, 이미지나 미디어 콘텐츠에 의미 있는 설명을 추가하여 문서 구조를 더 명확하게 만들어 줍니다. 단순히 스타일링된 <p> 태그 대신 이 요소를 사용하면 웹 표준 준수와 접근성 향상이라는 두 가지 장점을 모두 얻을 수 있습니다.