<div dir="ltr"><div>Hello WHATWG People,</div><div><br></div><div><div>I'm doing some development work for a personal site and I'm trying to get my head around some best practices. My question today is about <b><HGROUP></b>. I know that the W3C canned it and that it lives on in the WhatWG spec, I also know that most browsers recognize the tag and it's usage. I know what it's for (technically) but I don't understand <i>why</i> I would use it in place of other tags - so as opposed to leaving this potentially useful tag alone, I would like to get my head around it - with your help!</div><div><br></div><div>I think the easiest way to do this would be go over the examples shown in the spec and how I'd mark them up instead, so let's do that! I'll also cover my thoughts so you know where I am coming from, so that you can help correct my thinking if that's where the problem lies. Please read the below in the tones of curiosity and eagerness to learn that it is intended - as we all know, tone is hard to convey in this format.</div><div><br></div><div>The examples I am referencing can be found at:</div><div><a href="https://html.spec.whatwg.org/multipage/semantics.html#the-hgroup-element">https://html.spec.whatwg.org/multipage/semantics.html#the-hgroup-element</a><br></div><div><br></div><div><b>Provided Example 1:</b></div><div><!-- Release the code --></div></div><blockquote style="margin:0px 0px 0px 40px;border:none;padding:0px"><div><div><hgroup></div></div><blockquote style="margin:0px 0px 0px 40px;border:none;padding:0px"><div><div><h1>The reality dysfunction</h1></div></div></blockquote></blockquote><blockquote style="margin:0px 0px 0px 40px;border:none;padding:0px"><blockquote style="margin:0px 0px 0px 40px;border:none;padding:0px"><div><h2>Space is not the only void</h2></div></blockquote></blockquote><blockquote style="margin:0px 0px 0px 40px;border:none;padding:0px"><div><div></hrgoup></div></div></blockquote><div><div><!-- Code's done --> <br></div></div><div><br></div><div>So, we use the above markup on a page and the result we want is this:</div><div><ol><li>The User Agent renders the headings as you would expect</li><li>The outline document ignores all but the highest level heading, in this case, the H1</li></ol>Okie dokie, I understand that. I can see what it does. But, I don't understand <i>why</i> you would mark it up like that. If you use a tag and then wrap it in another tag that will strip it of its primary purpose isn't that like wrapping an <image> in a special tag that will make it display only the alt text? If you don't want the baggage associated with a tag isn't that a sign that your using the wrong tag? I suspect I am missing something.</div><div><br></div><div>When I think of marking up that "Space is not the only void", I don't think heading. From the WHATWG Spec:</div><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left-width:1px;border-left-color:rgb(204,204,204);border-left-style:solid;padding-left:1ex"><i>Subsequent headings of equal or higher rank start new (implied) sections, headings of lower rank start implied subsections that are part of the previous one. In both cases, the element represents the heading of the implied section.</i><br></blockquote><div><a href="http://Subsequent headings of equal or higher rank start new (implied) sections, headings of lower rank start implied subsections that are part of the previous one. In both cases, the element represents the heading of the implied section.">4.3.11 Headings and Sections</a><br></div><div><br></div><div>"Space is not the only void" does not start or imply it's own section, which is why <hgroup> would be stripping it of this meaning. The phrase may be important as a component of the title, but it's not a heading of it's own right. So, we have a piece of information that we want to keep with the heading, as it is associated, but the item isn't important enough to appear in the document outline. Isn't this a job for our friend Mr <Header>?</div><div><br></div><div><div><!-- Release the code --></div><blockquote style="margin:0px 0px 0px 40px;border:none;padding:0px"><div><header></div><blockquote style="margin:0px 0px 0px 40px;border:none;padding:0px"><h1>The reality dysfunction</h1></blockquote></blockquote><blockquote style="margin:0px 0px 0px 40px;border:none;padding:0px"><blockquote style="margin:0px 0px 0px 40px;border:none;padding:0px"><p>Space is not the only void</p></blockquote></blockquote><blockquote style="margin:0px 0px 0px 40px;border:none;padding:0px"></header></blockquote><div><!-- Code's done --> <br></div></div><div><br></div><div>It's semantically clear that the two are parts of a larger header unit/title information and through some header specific CSS we can make that <p> look however we want, be it almost as big as the h1 or otherwise. Also, the outline is what we would expect. I know it's up to the developer to mark things up how they see fit, but it feels like the <h2> in the WHATWG comes from a desire to quickly style, not because it's the most appropriate tag.</div><div><br></div><div>I had started to go through the other examples, but my response was the same, so I'll spare you the repetition. :)</div><div><br></div><div>At the end of the day, I know I don't have to use <HGROUP> if I don't want to, but I hate leaving a tool in the box just because I didn't take the time to learn how to use it. It's in the spec so there are enough people who found a use for it. With what I've said above regarding my thoughts on marking up the provided examples, can anyone tell me when/where/why <HGROUP> would be the correct tag to use, please?</div><div><br></div><div>Thank you kindly for your time!</div><div><br></div><div>Cheers,</div><div>MattyJ</div><div><br></div><div>---</div><div>Matthew Jelenic</div><div><a href="mailto:Matthew.jelenic@gmail.com">Matthew.jelenic@gmail.com</a><br></div><div><br></div></div>