HTML5 <figure> 태그란?
HTML5에서는 <figure> 태그를 사용하여 이미지, 다이어그램, 코드 목록처럼 문서 본문에서 참조되는 독립형 콘텐츠(self-contained content)를 마크업할 수 있습니다. 이 태그로 감싼 콘텐츠는 본문 흐름과 분리되더라도 그 자체로 의미가 유지되므로, 시맨틱 웹 구조를 만들 때 매우 유용합니다.
또한 <figure> 태그 내부에 <figcaption> 태그를 함께 사용하면 해당 콘텐츠에 대한 설명(캡션)을 추가할 수 있습니다.
예제
다음 코드를 실행하면 <figure> 태그가 실제로 어떻게 동작하는지 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>HTML figure Tag</title>
</head>
<body>
<h2>Tutorialspoint Coding Ground</h2>
<figure>
<img src = "https://www.tutorialspoint.com/videotutorials/images/coding_ground_home.jpg"/>
</figure>
</body>
</html>
코드 설명
위 예제에서는 <figure> 태그로 하나의 이미지를 감싸고 있습니다. 브라우저는 이 요소를 일반 이미지와 달리 '독립된 콘텐츠 블록'으로 인식합니다. 여기에 아래와 같이 <figcaption>을 추가하면 이미지 아래에 캡션이 표시됩니다.
<figure> <img src = "image.jpg" alt = "예시 이미지"/> <figcaption>이미지에 대한 설명이 들어갑니다.</figcaption> </figure>