The next few chapters will all explain essential elements for displaying media (images, audio, video, …). Though not required—nothing is “required” in HTML—it’s recommended to nest all such elements inside a <figure> element.
If you’ve ever written a formal document (for school, university, business), you know what a figure is. It’s a …
- Self-contained piece of content
- To which other content can refer
- And which can move around (it doesn’t break the document if it’s not in a specific location)
It’s similar to the division between <head> and <body>, which started this whole course. A figure is like the head: it provides metadata about its content.
- Perhaps the content is an image, then the figure can provide a caption for it.
- Perhaps the content is a piece of code. You want to refer to that code at a later point, so you wrap it inside a figure, and add an anchor inside (remember, from last chapter?).
Providing such data through attributes, or less specific tags, would both be harder and ruin your semantics.
A figure is not needed if the content doesn’t fulfill any of the rules above.
Some of my websites have a big header image at the top of every page. This isn’t a figure, as nothing refers to that content and it’s not moving around. So that is a simple image and nothing more.
Using a figure
It’s a very simple element. Use <figure> to create on, use <figcaption> inside for the caption.
Just like before, this course goes from the biggest element to the smallest. That’s why I’m telling you about figures now. In the coming chapters, I’ll introduce all sorts of elements that go inside of it. Now that you already know it exists, you can start building good habits immediately.
Want to support me?
Buy one of my projects. You get something nice, I get something nice.
Donate through a popular platform using the link below.
Simply giving feedback or spreading the word is also worth a lot.