I was checking the article 20+ Professional Examples of Websites Using HTML5 to see the good semantic uses of new HTML 5 tags and I found that this website http://bit.ly/bfgatc is using H2 before H1 in Header.
Is it ok in HTML5?
asked Dec 14, 2011 at 3:19
3 Answers
In my opinion, neither of those have any business being separate headers, and they definitely shouldn't be in an <hgroup>. They're one header, and should be inside a <header>, or maybe even in a <section>. They don't have separate levels; one's just styled bigger than the other. It's not semantically correct to use the two in either order.
So what I would recommend is, instead of:
<header>
<nav>...</nav>
<div>
<hgroup>
<h2>...</h2>
<h1>...</h1>
</hgroup>
</div>
</header>
would be:
<nav>...</nav>
<header>
<h1>I design user interfaces and strive for <strong>perfection.</strong></h1>
</header>
-
But if we go for your suggestion then Screen reader will not read as a heading. Commented Dec 14, 2011 at 3:27
-
@JitendraVyas: It's pretty flexible. I was just giving an example. Yes, it should be in an
<h1>.– Ry- ♦Commented Dec 14, 2011 at 3:30 -
"hgroup" is used to make two headings into one, to prevent a new document node from forming Commented Dec 14, 2011 at 3:57
-
-
2@JitendraVyas: No, it's not, it's what I'm saying. The spec says that it "represents a group of headings" - however, the heading in question is only one heading with very strong emphasis on the last word. Hence, it would be more semantic to use
<strong>, and it's also much cleaner.– Ry- ♦Commented Dec 14, 2011 at 4:08
The element has been removed from the HTML5 (W3C) specification. As Ryan said. It would be better to put it in a tag.
Why not? The spec for hgroup says:
The hgroup element is typically used to group a set of one or more h1-h6 elements — to group, for example, a section title and an accompanying subtitle.
It seems to clear to me that a section title would be a H1 for example, and the subtitle a H2.
To expand: In this situation, it doesn't really make sense, but in general, there is technically nothing wrong with this (although a bit weird).
answered Dec 14, 2011 at 3:22
-
1"a section title and an accompanying subtitle" is not the same thing as "an accompanying subtitle and a section title" here. The "and" is misleading, should be a "followed by". Though a SUBtitle can't precede a title. Here it should be a single heading or maybe a p+h1 Commented Dec 16, 2011 at 14:29
-
The above is just an example, not the only thing it can be used for. The first part is the most important - to group a set of one or more h1-h6 elements. Commented Dec 16, 2011 at 23:19
hgroupinheaderand there is only onh1andh2insidehgroupso all ids are unnecessary.