I've searched and have not come up with any useful answers, so here goes:
Is an HTML5 <header>
tag unnecessary if there is only a single <hx>
tag inside it? For instance, I have the following HTML5 markup:
<article>
<header>
<h1>Heading Title</h1>
</header>
...
</article>
From an HTML5 semantics point of view, when there is only one <hx>
tag inside the <header>
and nothing else, is the <header>
tag unnecessary/redundant, and should I just do this instead:
<article>
<h1>Heading Title</h1>
...
</article>
From the first Note section on the W3C's header
spec which ajp15243 mentioned above, emphasis mine:
A header element is intended to usually contain the section's heading (an h1–h6 element), but this is not required. The header element can also be used to wrap a section's table of contents, a search form, or any relevant logos.
If all you have is a single (as per your example) <h1></h1>
, the <header>
tag is not required for your document to be properly-formed and semantically correct.
You might find that having the <header>
element as a wrapper aids you in styling the h1
later with CSS, but as far as the HTML alone in this case, you're semantically fine either with or without <header>
.
Yes, it’s unnecessary in this specific case. Which means, you may use a header
(it wouldn’t be wrong) but it’s also not required.
header
(together with footer
and address
) is used to markup a section’s content that is not considered to be the main content of that section. A section can be a sectioning root (like body
) or a sectioning content (like article
) element.
So when your header would contain more than a heading element (for example, a subtitle), you should use a header
element, because otherwise it wouldn’t be clear if this content is part of the header or the main content. But in case of a single heading element, it’s clear by definition: the first heading element in a section is the heading for this section.
来源:https://stackoverflow.com/questions/25313228/is-an-html5-header-tag-unnecessary-if-there-is-only-a-single-hx-tag-inside-i