효과적인 이미지 및 콘텐츠 표현을 위한 HTML figure 태그 활용

FIGURE 태그란?

<figure> 태그는 HTML5에서 도입되었습니다. 이미지, 그래픽, 동영상 컨텐츠와 설명을 그룹화하는 태그입니다. 사실 기능이 있다기 보다 <section>이나 <article> 태그처럼 이 컨텐츠는 어떤 컨텐츠이다 알려주는 겁니다. 검색엔진이 잘 찾아볼 수 있도록 구조화하기 위한 태그이고 SEO에 중요합니다.

 

활용법

<figure>
  <img src="image.jpg" alt="이미지">
  <figcaption>이미지 캡션</figcaption>
</figure>

• figure 태그는 열고 닫아야 하는 태그입니다
• 별다른 속성값이 없는 심플한 태그입니다

 

<figure>와 함께 다니는 태그

• <img>: 이미지를 삽입할 때 사용되는 태그
• <video>: 동영상을 삽입할 때 사용되는 태그
• <figcaption>: 콘텐츠의 설명(캡션)을 표시할 때 사용되는 태그