The figure tag displays a vertical 2d bar displaying certain values for sales. the figcaption tag displays the label "Sales".
What html5 tag for the divs inside the figure should I use?
<figure>
<div class="push-center roundedArea" style="background-color:#fff;height:22%;"></div>
<div class="push-center diagram" style="background-color:#ff99cc;height:11%;">3</div>
<div class="push-center diagram" style="background-color:#ff33cc;height:44%;">44</div>
<div class="push-center diagram" style="background-color:#ff66cc;height:23%;">36</div>
</figure>
<figcaption>
Sales
</figcaption>
The figure spec says that it should contain "flow content" with an optional figcaption element before or after the flow content. Flow content is basically anything on this list. TL;DR: You can put a lot of stuff in there, just make sure it makes semantic sense. Also, div elements are allowed inside figure elements.
<figure>: The Figure with Optional Caption element The <figure> HTML 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.
The <figure> tag in HTML is used to add self-contained content like illustrations, diagrams, photos, or codes listing in a document.
HTML allows the figcaption element to be either the first or the last element inside the figure and, without any CSS rules to the contrary, that will cause the caption to be at the top or the bottom of the figure, respectively.
The W3C Wiki figure
article explains some of the semantic uses of it, which are varied. The figure
spec says that it should contain "flow content" with an optional figcaption
element before or after the flow content. Flow content is basically anything on this list.
TL;DR: You can put a lot of stuff in there, just make sure it makes semantic sense.
Also, div
elements are allowed inside figure
elements (see the list in the above link).
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With