问题
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.
回答1:
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.
回答2:
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 caption and 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 h1.
回答3:
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 h1 or 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.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element
来源：https://stackoverflow.com/questions/41938014/proper-heading-for-a-table