Can a <figure> element contain only a <figcaption> without an image?
Asked Answered
E

3

9

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; }
Emarie answered 5/12, 2012 at 17:43 Comment(0)
A
10

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>
Arminius answered 5/12, 2012 at 19:26 Comment(0)
B
5

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.

Beefsteak answered 5/12, 2012 at 19:28 Comment(3)
Oh right, I got too caught up in the "without an image" part. A lone figcaption with no content makes no sense, right?Arminius
@WesleyMurch - It's hard to see when it would make sense, yes.Beefsteak
It's odd that the spec says "a caption for the rest of the contents of the figcaption element's parent figure element, if any"... sounds like it's been considered and it's fair game to not have content other than a figcaption. I cannot see how that would make sense though.Arminius
C
2

Permitted contents for figure:

  • one figcaption element, followed by flow content
  • flow content followed by an optional figcaption element

(c) w3c/figure

Confirmation answered 5/12, 2012 at 17:49 Comment(1)
The "followed by flow content" part is greyed out on the W3C — curious if it's so clear-cut...Emarie

© 2022 - 2024 — McMap. All rights reserved.