<figure>

HTML <figure> 요소는 독립적인 콘텐츠를 표현합니다. <figcaption> 요소를 사용해 설명을 붙일 수 있습니다. 피규어, 설명, 콘텐츠는 하나의 단위로 참조됩니다.

시도해보기

콘텐츠 카테고리	플로우 콘텐츠, 구획 루트, 뚜렷한 콘텐츠.
가능한 콘텐츠	`<figcaption>`과 뒤따르는 플로우 콘텐츠. 혹은 플로우 콘텐츠를 뒤따르는 `<figcaption>`. 혹은 플로우 콘텐츠.
태그 생략	불가능, 시작과 끝에 태그를 추가하는것은 필수입니다.
가능한 부모 요소	플로우 콘텐츠를 허용하는 모든 요소.
가능한 ARIA 역할	`group` (en-US), `presentation` (en-US)
DOM 인터페이스	`HTMLElement`

특성

이 요소는 전역 특성만 포함합니다.

사용 일람

보통 <figure>는 주 문서 플로우가 참조하지만, 다른 부분이나 부록으로 이동해도 문제 없는 이미지, 삽화, 도표, 코드 조각 등을 맡습니다.
<figure>는 구획 루트이므로 <figure> 요소의 콘텐츠는 문서의 주 개요에서 제외됩니다.
안에 (처음이나 마지막 자식으로) <figcaption>을 넣어서 설명을 덧붙일 수 있습니다. 제일 처음 <figcaption>을 설명으로 사용합니다.

예제

이미지

html

<!-- Just an image -->
<figure>
  <img
    src="https://developer.mozilla.org/static/img/favicon144.png"
    alt="A robotic monster over the letters MDN." />
</figure>

<!-- Image with a caption -->
<figure>
  <img
    src="https://developer.mozilla.org/static/img/favicon144.png"
    alt="A robotic monster over the letters MDN." />
  <figcaption>MDN Logo</figcaption>
</figure>

코드 조각

html

<figure>
  <figcaption><code>navigator</code>를 이용하여 브라우저 정보 얻기</figcaption>
  <pre>
function NavigatorExample() {
  var txt;
  txt = "Browser CodeName: " + navigator.appCodeName;
  txt+= "Browser Name: " + navigator.appName;
  txt+= "Browser Version: " + navigator.appVersion ;
  txt+= "Cookies Enabled: " + navigator.cookieEnabled;
  txt+= "Platform: " + navigator.platform;
  txt+= "User-agent header: " + navigator.userAgent;
}
  </pre>
</figure>

인용문

html

<figure>
  <figcaption><cite>Edsger Dijkstra:</cite></figcaption>
  <blockquote>
    If debugging is the process of removing software bugs, then programming must
    be the process of putting them in.
  </blockquote>
</figure>

시

html

<figure>
  <p style="white-space:pre">
    Bid me discourse, I will enchant thine ear, Or like a fairy trip upon the
    green, Or, like a nymph, with long dishevell'd hair, Dance on the sands, and
    yet no footing seen: Love is a spirit all compact of fire, Not gross to
    sink, but light, and will aspire.
  </p>
  <figcaption><cite>Venus and Adonis</cite>, by William Shakespeare</figcaption>
</figure>

명세

Specification
HTML Standard # the-figure-element

브라우저 호환성

BCD tables only load in the browser

같이 보기

<figcaption>