Figure html là gì

post-promotion-placement#checkSidebarAdDisplayCondition" data-controller="scroll-position sticky-ad post-promotion-placement ">
Sam B. Jul 29, 2014
Read Time: 3 mins url-selector#selectionChanged"> English Español Bahasa Indonesia Pусский giờ đồng hồ Việt

The tag was introduced with HTML5 quite some time ago, though you may still be unfamiliar with what it does, or how it can be used in lots of different situations. In this tutorial, you"ll learn the difference between và other comparable tags, & how you can begin using it to enhance the way you group items in your markup.

Bạn đang xem: Figure html là gì

This is a beginner màn chơi tutorial, but will also serve as a useful refresher for others.

Typical Uses for 

Let’s first see what the HTML5 Doctor has khổng lồ say on the matter:

The figure element represents a unit of content, optionally with a caption, that is self-contained, that is typically referenced as a single unit from the main flow of the document, & that can be moved away from the main flow of the document without affecting the document’s meaning. -Richard Clark

So, the figure element specifies self-contained content, such as illustrations & photos. This means that you"ll always be using the figure tag lớn house something else.

One common misconception is that figure can only be used for images. In fact, it can be used lớn group any number of different things together, including, but not limited to, images, video, audio, và code blocks.

Defining Page Structure

The figure is a sectioning root, which means that it effectively isolates its content from its ancestor"s structure. Whatever"s inside the figure doesn"t contribute khổng lồ the document outline outside it. It behaves as a structural element of the page and can therefore contain its own headings, beginning with an  and working down the hierarchy through 

 and so on, but this has no bearing on the hierarchy outside:

The hierarchy within the figure has no bearing on its ancestor"s outline

Elements such as this are often used lớn introduce external content to the document, lượt thích a quote for example. is another example of a sectioning root element.


Here"s a typical example of how the figure tag can be used to display an image.

Xem thêm: Makerdao - Decentralized Autonomous Organization (Dao)

Now, you may be thinking, "Why bother wrapping my img tag in additional markup?" That"s a fair question, but it begins lớn make sense once you realise that a  can contain more than one child element, such as a caption.

There"s also a tag for a figure caption, or rather, figcaption. Taking this into account, you"d be able khổng lồ use it in the following manner.

What"s up? I am a caption!

Multiple Images

Using just a series of img elements lớn display images together works fine, though each individual image would standalone as its own block of code, completely unrelated to any others. In cases where images nội dung a relationship of some kind figure comes to lớn the rescue. These three images are related và share a single summary in the figcaption.

Three different images, grouped together as a figure, & being captioned with figcaption.Using for Code BlocksThe figure element"s talent for grouping commonly-themed elements doesn"t over there. Perhaps you want to group some inline code, along with a caption, in a tutorial for example, then you could use figure and figcaption in the following way:

Life is good, said HTML5 to XHTML.

In this code block, we see HTML5 speaking lớn XHTML.

Xem thêm: Balance Payment Là Gì - Cán Cân Thanh Toán Quốc Tế (Balance Of Payments

figure can be used in this way with code, pre, & samp, making it easy lớn group code blocks.

Wrapping Up

That"s it! You"ve learned how lớn use the figure element, along with figcaption and other elements lớn group multiple items together. How vì you use the figure element at the moment? Will that change as a result of reading this quick tip? Tell us in the comments!