A matter of semantics. If I have a HTML page that is basically one big table, what element do I use for a header?
Ordinarily, you'd use a
h1 for the heading of the page, and a
caption for the table's heading. But what if the table is the only thing on the page? Including both looks a bit silly. So do I use a
h1 and forget about the
caption, or vice versa?
Are there formal (W3C or WHATWG) recommendations about this? If so, I can't find them.
PS For the sake of this question, let's assume that the table is filled with tabular data, OK.
A table caption can contain free-form content. You could include a description of the table within the
caption element, leaving the title for a heading element, and it wouldn't look silly at all.
The spec for the
caption element contains an example:
In the abstract, this table is not clear. However, with a caption giving the table's number (for reference in the main prose) and explaining its use, it makes more sense:
<caption> <p>Table 1. <p>This table shows the total score obtained from rolling two six-sided dice. The first row represents the value of the first die, the first column the value of the second die. The total is given in the cell that corresponds to the values of the two dice. </caption>
If the table is self-explanatory, you can leave out the caption, but I still recommend having a document-level heading. Headings are a crucial part of the document outline while
caption does not play a role (and, notably, neither does the
title element, even though it represents the document title). Even though no real-world implementations of the outline exist anyway, you can't go wrong with having a document-level heading.
I think one concern should always be how it ends up getting presented to screen-reader users.
It seems that the
caption element gets exposed by some platform accessibility APIs in a special way (e.g., in the IAccessible2 API as
IA2_ROLE_CAPTION with a
IA2_RELATION_LABEL_FOR) but not in all of them (for example, Apple’s AX API doesn’t seem to do anything so special with it).
In comparison, I think
h1 and all other headings always get exposed with a
heading role. And screen readers consistently expose all headings in a way to facilitate navigation within documents.
So I think maybe for screen-reader users, between
h1: In the context the question describes, if a document’s going to have one and not the other, it’s probably best that it be the
There are not really standards too what to use in a situation like this. You're best off just picking the one that looks better and feels more appropriate for the page. Like you said both look silly so just use the one that fits better. Even then you can always customize in CSS what the
caption look like so it isn't an end-all be-all type deal.
Elements tend to be used for certain things, and some do have certain purposes, but visual things like
h1 are not standardized.