Is it semantic for a <figure>
element to contain nothing but a <figcaption>
? It does validate...
<figure>
<img src="example.jpg">
<figcaption>Image and caption</figcaption>
</figure>
<figure>
<figcaption>Caption only</figcaption>
</figure>
In this context, it'd have ramifications for CSS styling:
figure figcaption { color: red; }
A figure can be used with or without a figcaption . However, without a caption, or an alternate means of providing an accessible name (e.g. aria-label ) a figure may not provide much value in conveying its semantics alone. In some cases, it may not convey any semantics at all if its given no accessible name.
There can only be one figcaption within the figure element.
The figure and figcaption elements are 2 of the new elements in HTML5. Together they provide the promise of being able to mark-up, with meaning, the structure and relationship between a piece of content and associated content that acts as a descriptive label.
An img
is not required in a figure
element, it just happens to be common, and most examples that use figcaption
also have an image.
http://dev.w3.org/html5/spec/single-page.html#the-figure-element
The
<figure>
element can thus be used to annotate illustrations, diagrams, photos, code listings, etc, that are referred to from the main content of the document, but that could, without affecting the flow of the document, be moved away from that primary content, e.g. to the side of the page, to dedicated pages, or to an appendix.http://dev.w3.org/html5/spec/single-page.html#the-figcaption-element
The
<figcaption>
element represents a caption or legend for the rest of the contents of the figcaption element's parent figure element, if any.
Note the "if any" part, which leads me to believe that content other than the figcaption
may not exist and it will still be valid. However, as Alochi notes, it suggests a misuse of the element since there is no content for the caption to describe.
There is an example in the current specification example of non-image content being accompanied by a figcaption, so I think it's fair to assume it's perfectly OK to not have an image:
Here, a part of a poem is marked up using figure.
<figure> <p>'Twas brillig, and the slithy toves<br> Did gyre and gimble in the wabe;<br> All mimsy were the borogoves,<br> And the mome raths outgrabe.</p> <figcaption> <cite>Jabberwocky</cite> (first verse). Lewis Carroll, 1832-> 98 </figcaption> </figure>
As Michael Malinovskij answered, A figure element should contain "flow content" as well as a figcaption.
The HTML5 spec has this to say about flow content
As a general rule, elements whose content model allows any flow content or phrasing content should have at least one child node that is palpable content and that does not have the hidden attribute specified.
This requirement is not a hard requirement, however, as there are many cases where an element can be empty legitimately, for example when it is used as a placeholder which will later be filled in by a script, or when the element is part of a template and would on most pages be filled in but on some pages is not relevant.
So not having anything other than the figcaption is valid, however unless you intend to fill in content later, it probably isn't conveying a useful or correct meaning, which could be characterised as not semantic.
Permitted contents for figure:
(c) w3c/figure
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