figure

HTML5에서 도입

설명

The HTML Figure Element (<figure>) represents self-contained content, frequently with a caption. While it is related to the main flow, its position is independent of the main flow. Usually this is an image, an illustration, a diagram, a code snippet, or a schema that is referenced in the main text, but that can be moved to another page or to an appendix without affecting the main flow.

HTML Figure Element(<figure>)는 독립적인 컨텐츠들(이미지, 동영상, 코드리스트 등)을 종종 캡션과 함께 표시한다.
figure가 main flow와 관계가 있어도 그 위치는 main flow와 독립적이다. 보통 이미지, 일러스트레이션, 다이어그램, 코드정보, 또는 개요를 다른페이지로 이동하거나 main flow에 영향을 주지않고 main text에 첨부시킬때 선호한다. 

참고 :
• Being a sectioning root, the outline of the content of the <figure> element is excluded from the main outline of the document.
• A caption can be associated with the <figure> element by inserting a <figcaption> inside it (as the first or the last child).

참고 :
• 루트를 분할하므로, <figure>요소의 내용들은 문서의 주 형식에서 배제된다.
• <figure>요소에 관련된 캡션은 <figcation> 요소로 <figure>내부에서 정의될 수 있다.

Usage Context

Permitted content	A <figcaption> element, followed by Flow content; or flow content followed by a <figcaption> element
Tag omission	None, both the start tag and the end tag are mandatory
Permitted parent elements	Any element that accepts flow elements.
Normative document	HTML5, section 4.5.11

속성

이 엘리먼트는 전역속성을 지원한다.

예제

<!-- Just a figure -->
<figure>
	<img src="picture.jpg" alt="An awesome picture">
</figure>

<!-- Figure with figcaption -->
<figure>
	<img src="picture.jpg" alt="An awesome picture">
		
	<figcaption>Caption for the awesome picture</figcaption>
</figure>

DOM Interface

This element implements the HTMLElement interface.

이 요소는 HTMLElement 인터페이슬르 구현한다.

호환성

Desktop

기능	구글크롬	파이어폭스Gecko)	인터넷 익스플로러	Opera	Safari
기본적인 지원	지원	4.0 (2.0)	9.0	11.0	4.0

Mobile

기능	안드로이드	파이어폭스 모바일(Gecko)	인터넷 익스플로러 모바일	오페라 모바일	사파리 모바일
기본적인 지원		4.0 (2.0)

참고

• The <figcaption> element.