What does it mean for an element to be 'Self-Contained'

user_7559050 0
Viewed 2300

I'm very new to HTML. I'm following an online tutorial. I need to put some images on the page and I need to enclose these images in <figure> tags. The tutorial doesn't explain why I need to do this. In fact, it gives no information about the <figure> tag at all. So, I googled it and this is what I found:

The HTML (Figure With Optional Caption) element represents self-contained content, potentially with an optional caption, which is specified using the (<figcaption>) element. The figure, its caption, and its contents are referenced as a single unit.

Emphasis mine.

This explanation doesn't help me. Please could someone explain what is meant by 'self-contained content'? Isn't all content essentially 'self-contained'? If it wasn't then any adjustment to any element would affect every other element. Is 'self-contained content' some kind of reserved term with a special meaning in web design? I just don't understand what it means for content to be 'self-contained' in this context. As a consequence, I can't understand the point of the <figure></figure> tags.

Many thanks.

figure html
2 Answers

No. The meaning of "self-contained" comes from English, not a term with special meaning in web design.

"Self-contained" means independent of its surrounding context. The best way to think of the <figure> element is as analogous to a figure in a text book. Figures are, for reading convenience, often printed close to the text that explains the relevance of the figure's content to the chapter as a whole. But you can also just read the figure and understand what it's telling you without having to read the context in which it appears.

So you could move the all figures to elsewhere in the book, and you could open the book for the first time at the page which the figure was on, and you'd still be able to understand what the figure was telling you. And so long as where-ever the text needed to reference the figure it could do so, by for example saying "see figure 23b", it works as a figure.

Alohci_425850

self-contained means that the element's clearly defined its contents, for example <div> and <span> doesn't tell you about itself a lot like a <table>, <article>, etc... which are also known as HTML Semantic Elements

self-contained elements like table define a set of styles itself like display:table, and for its inner children (rows and cells for example)

other self-contained elements like <main> or <footer> are for clean-code and developer-friendly tag naming

For <article>, An article should make sense on its own, and it should be possible to read it independently from the rest of the web site.

Also, HTML semantics are good for SEO, like header tags <h1>, <h2>, ...

This article define how can these elements help to better define the page's content for search engines, What HTML5 Means For SEO.

As of the purpose of <figure> tags check these answers on the question What is the purpose of the 'figure' tag in html?

user_79642170
Related