Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

A table in a figure - use caption or figcaption?

With the advent of HTML5, I'm starting to use figure to enclose images and tables, among other things. Up until now I've used the table's caption element to label the table. However, figcaption can be used to label the figure's content. It seems that in the case of a table within a figure, there are two elements that serve more or less the same purpose.

On one hand, caption is specific to describing the table's purpose; on the other hand figcaption is a little broader, yet would apply to the table as well as other figure content.

Would it be appropriate to use figcaption to label tables in figures, if for nothing else than consistency with other figures containing different elements?

like image 530
Grant Palin Avatar asked May 17 '12 18:05

Grant Palin


People also ask

Do tables need a caption?

Every figure and table should have a caption. Here are some tips on using captions: A figure caption is centered under the figure; a table caption is centered above the table (if a caption is more than one line, make it left justified). A Figure and its caption should appear on the same page.

What is Figcaption tag used for?

<figcaption>: The Figure Caption element The <figcaption> HTML element represents a caption or legend describing the rest of the contents of its parent <figure> element.

Where can you use Figcaption?

The <figcaption> element can be placed as the first or last child of the <figure> element.

What is a caption for a table?

A caption functions like a heading for a table. Most screen readers announce the content of captions. Captions help users to find a table and understand what it's about and decide if they want to read it. If the user uses “Tables Mode”, captions are the primary mechanism to identify tables.


1 Answers

From the WHATWG spec:

When a table element is the only content in a figure element other than the figcaption, the caption element should be omitted in favor of the figcaption.

And while they currently match, here's a corresponding link to the W3C Editor's Draft, just in case.

like image 91
Su' Avatar answered Oct 02 '22 08:10

Su'