[Trouble Shootings #12] HTML - <figure> 태그는 언제 써야 할까요.

오늘 회사에서 옆 자리 동료가 이미지 관련 태그를 감싸는 태그로 <figure> 태그를 사용한 것을 보았습니다.

 

저는 이때까지 그냥 <div> 태그로 <img /> 태그를 감쌌는데

 

오랜만에 기억 속에서 잊혀졌던 <figure> 태그를 봤습니다.

 

저는 <figure> 태그는 그 안에 <img /> 태그와 <figcaption> 태그를 넣었던 걸로 알고 있었습니다.

 

img에 대한 설명으로 figcaption 태그를 추가하는 것입니다.

 

근데 단순한 아이콘이나 작은 이미지에도 모두 figure 태그로 감싸도 되는 것일까 하는 의문이 들었습니다.

 

조금 구글링 해보니 figure 태그가 semantic tag 로써 활용된다는 것입니다.

 

그래서 저는 계속 궁금증과 의문을 가지면서 구글링을 더 많이 했습니다.

 

최종적으로 figure 태그는 메인 기능과는 독립적으로 옵션적인 기능으로써 활용된다고 합니다.

 

다시 말해서 문서의 흐름에서 제거해도 된다는 것입니다.

 

따라서 navBar 같은 곳에 이미지나 아이콘이 들어가는 부분에는

 

figure 태그로 해당 img 태그를 감싸는 것이 올바르지 않다는 것입니다.

 

보통 아티클에서 사진, 코드, 일러스트레이트, 인용문 등을 인용할 때 figure 태그를 사용하면서

 

해당 이미지에 설명을 추가하고 싶을 때 figcaption 태그를 child로써 추가하면 되는 것으로

 

이해하면 좋을 것 같습니다.

---

[레퍼런스 1] - Use <figure> element for icons? html5 (StackOverflow)

[레퍼런스 2] - The figure & figcaption elements (html5 doctor)