If you've have prior experience with any of the content so far, here are a few optional extension exercises on working with figures, and working with tabular data.
The HTML <figure> element is used to represent self-contained content, typically related to the main flow of the document. This content could be a diagram, illustration, photo, tabular data, a code snippet, or any other standalone piece of content, usually accompanied by a caption provided by the <figcaption> element. The <figure> element helps in semantically organising content, making it easier for web browsers and assistive technologies to understand and present the content appropriately.
The <figcaption> element is optional but when used, it should be either the first or the last child of the <figure> element to properly associate the caption with the figure content. This element can thereby enhance the accessibility of visual content by providing context or explaining what the figure represents.
<aside> <img src="/icons/drafts_yellow.svg" alt="/icons/drafts_yellow.svg" width="40px" />
While a <figure> element can contain multiple image sources, it should only contain one <figcaption>element. (Multiple captions require multiple figures.)
</aside>
Here's an example of how to use the <figure> and <figcaption> elements:
<figure>
<img src="path/to/donut.jpg" alt="Delicious pink glazed doughnuts with sprinkles."
/>
<figcaption>Delicious pink glazed doughnuts with sprinkles viewed from above. 3D rendering picture by <a href="<https://stock.adobe.com/au/images/delicious-pink-glazed-doughnuts-with-sprinkles-view-from-above-3d-rendering-picture/237823505?prev_url=detail>">tykcartoon</a>
</figcaption>
</figure>
In this example, an image is included within a <figure> element, and a caption that describes the image is placed inside a <figcaption> element. (The alt attribute will not be visible, but the <figcaption> will be.) The <figcaption> can contain markup to enhance the presentation of the content (in this case, a link to the original source).
Instead of including the result here, I'll leave it up to you to try out the <figure> element.
The use of these elements together allows web developers to group images or illustrations with their respective captions effectively, making the content more understandable and accessible.
The following section outlines a range of HTML elements that work together to structure tabular data.
<aside> <img src="/icons/chat-user_orange.svg" alt="/icons/chat-user_orange.svg" width="40px" />
What is tabular data? 🤓
</aside>