Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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; }
like image 731
Baumr Avatar asked Dec 05 '12 17:12

Baumr


People also ask

Can you use Figcaption without figure?

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.

How many times can you use a Figcaption element within a figure?

There can only be one figcaption within the figure element.

What is the purpose of the figure and Figcaption elements?

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.


3 Answers

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>
like image 188
Wesley Murch Avatar answered Oct 17 '22 04:10

Wesley Murch


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.

like image 45
Alohci Avatar answered Oct 17 '22 04:10

Alohci


Permitted contents for figure:

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

(c) w3c/figure

like image 2
Michael Malinovskij Avatar answered Oct 17 '22 05:10

Michael Malinovskij