To offer a quick recap, hgroup was removed from the W3C specification only (not the WHATWG spec) by Hixie at the request of Steve Faulkner. The co-chairs requested the issue be reverted following multiple requests from the likes of Tab and Tantek. The current status at the time of writing is that hgroup is in the spec.

It seems that the future of hgroup will be decided during the HTML5 spec last call review which is expected to start on or around May 22nd 2011.

One of the main reasons for this element being removed was because some people felt that it was only in the spec was to keep the outline algorithm happy and that it didn’t really offer much else in the way of semantics. It has also been suggested that people were still struggling to understand how to implement it correctly. If, however, you need your memory jogging then we suggest reading our post on hgroup from last year.

Far be it from us to get involved in the political wrangling (and knob waving) of the W3C, therefore when news of this broke we doctors fired a few emails between each other discussing what was going on and what we thought should be the next logical step. The outcome from these emails showed that there was no clear majority. Some of the doctors, myself included, thought that the element was a handy addition to the spec and should be something that we fought to keep. Others, like Bruce, have made no qualms about their dislike for this particular element.

Regardless, we decided to see if we could solve this issue by offering up alternative solutions. Below are a few of the suggestions (and issues) that came out of the conversation. We understand that some of these suggestions come with their own issues and the consequences maybe haven’t been fully thought through, but the aim of this is to start a conversion, not provide a final answer.

<article>
  <header>
    <hgroup>
      <h1>Title goes here</h1>
      <h2>Subtitle of article</h2>
    </hgroup>
    <p><time datetime="2010-03-20">20th March, 2010</time></p>
  </header>                
  <p>Lorem Ipsum dolor set amet...</p>
</article>

Subtitle within header

<article>
  <header>
    <h1>Title</h1>
    <p>subtitle</p>
  </header>
  <p>Lorem Ipsum dolor set amet...</p>
</article>

The method suggested above is probably the closest example to what we currently have with regards to hgroup. Within this code example we have an heading level and p tag within the header element.

Although this might seem fairly straight forward, it does become more complicated if we have further elements within the header; additional p tags, spans etc.

Highest ranking heading takes precedence

<article>
  <header>
    <h4>Intro subtitle</h1>
    <h1>Title goes here</h1>
    <h3>by John Smith</h3>
    <p><time datetime="2010-03-20">20th March, 2010</time></p>
    <nav>
      <h2>Chapters</h2>
      <ul>...</ul>
    </nav>
  </header>                
  <p>Lorem Ipsum dolor set amet...</p>
</article>

Taking the previous example a bit further, here we have multiple headings within header and the machine could recognise that the h1 is the highest ranking and should be used in the outline. Other headings are excluded, with the exception of the h2 within nav as it is a sectioning content element and therefore still affects outline.

This allows the developer to have multiple subtitles of varying importance without affecting the outline. The drawback of this is the use of headings isn’t very intuitive when lower ranking headings can appear anywhere within header. Thankfully we still have ideas for other alternatives.

Span subtitle within header

<article>
  <header>
    <h1>Title <span>Subtitle</span></h1>
  </header>
  <p>Lorem Ipsum dolor set amet...</p>
</article>

This next technique is probably similar to something that you might have used before when coding up a page in HTML4, providing something of a natural progression, paving the cowpaths if you will. As the span is within the heading element it makes it clear that it is associated with the heading.

Some of the doctors are not convinced this is the correct way to progress and therefore looked for another alternative.

Introducing the subtitle

<article>
  <header>
    <h1>Title <span subtitle>Subtitle</span></h1>
  </header>
  <p>Lorem Ipsum dolor set amet...</p>
</article>

This example is almost identical to the example provided above. The only difference here is that we’ve added a subtitle attribute to help assistive software make the connection between heading and subtitle. Again, some Doctors are not completely comfortable with nesting a subtitle within a heading element.

It was also suggested combining this example and the first to come up with a better outcome. Whereby a developer would include a heading and p tag, marked up with the subtitle attribute, within the header element.

For attribute within header

<article>
  <header>
    <h1 id="title">Title</h1>
    <p for="title">Subtitle</p>
  </header>
  <p>Lorem Ipsum dolor set amet...</p>
</article>

Now for something totally different. The above example borrows an idea from forms using the for attribute. in HTML5, a number of elements which were previously required to be within a form element can now be located anywhere on the page and associated with a form using a form attribute pointing at the id of its form owner. This example extends borrows the idea an applying it to use with another attribute and element.

In our example the p tag is owned by the heading element. The interesting thing with this method, along with the forms, is that the subtitle wouldn’t necessarily have to be nested within the header, as assistive technology would still be able to associated which heading it belonged too.

What’s next and your suggestions

Issue 164 on the W3C tracker offers some further suggestions to how hgroup could be removed, modified or otherwise changed. Some of those are similar or the same as those we’ve mentioned above but now you’ve seen our suggestions and perhaps perused those in issue 164, so why not let us know your suggestions below in the comments.

This is a fairly big issue and one that a lot of people are still obviously undecided about, so here is your chance to seize an opportunity because, you never know, your suggestion could become standard practice.

The hgroup hokey cokey originally appeared on HTML5 Doctor on May 6, 2011.

While they’re essential reading material for our job, the W3C specifications are not exactly George R. R. Martin-level reading material. To make matters worse, the often-dry text (written for implementors, not authors) and…colourful illustrations come wrapped in a design straight out of 1999. While the W3C homepage got some lovin’ in 2009 from the dynamic duo of Happy Cog and Airbag Industries, the actual specifications are still only slightly above the baseline of browser defaults. So what’s a caring developer to do?

Ben Schwarz, a developer in Melbourne, Australia, took matters into his own hands with a userscript to give W3C specs some readability. Around the same time Mike™ Smith — the W3C team contact for HTML Working Group amongst other things — was looking for CSS help for HTML5: The Markup Language Reference, his cut-down reference version of the HTML5 spec. I was able to introduce Mike™ and Ben, and the result was HTML5 Edition for Web Authors. But this was only the start.

Ben then got on the WHATWG IRC channel:

Within 10 minutes of joining the WHATWG IRC channel Ian Hickson had granted me approval to continue with my own build of the spec, targeted for web developers.

After a lot of hard work, with input and encouragement from the web’s finest (including Dr Bruce), Ben has released HTML5 for Web Developers.

The focus of this specification is readability and ease of access. Unlike the full HTML specification, this “web developer edition” removes information that only browser vendors need know.

In addition to streamlining the content, it boasts all manner of freshly implemented buzzwords and technical trickery through the magicks of JavaScript and CSS:

• find-as-you-type search (type “/”)
• offline access
• alternate styles for mobile devices
• technical references pulled inline
• beautiful typography
• …and design

It’s been well received, with more than 20,000 uniques in the first 24 hours, and the Pied Piper of HTML5 remarking:

Enjoying the gorgeously readable presentation of http://developers.whatwg.org/ Nice work, @benschwarz.

The files to build HTML5 for Web Developers are on GitHub, so if you have any problems or suggestions add an issue. You can also fork the project and help out — I have!

The heavyweight specs

HTML5 — A vocabulary and associated APIs for HTML and XHTML by W3C

The HTML5 spec on the W3C site. It’s smaller than the other specs because several parts (including Microdata, Canvas 2D Context, and Web Messaging) have been turned into their own specifications.

I recommend this spec if you don’t follow HTML5 developments — e.g., if you’re not a reader of HTML5 Doctor. This is the specification being prepared for Last Call in May 2011, and it shouldn't change much from here on.

HTML — Living Standard by WHATWG

The HTML spec on the WHATWG site. It’s a superset of the HTML5 spec, including some things that the W3C has split into separate specs (see above). It also includes post-HTML5 features such as Web Video Text Tracks (WebVTT), but it doesn’t include non-HTML-specific specs like Web Storage, Web Sockets API, and Server-sent Events.

I recommend this spec if you are interested in HTML5 (and beyond) and wish to be actively involved. While it’s more liable to change (especially the new bits), it’s also likely to include improvements that haven’t made it into HTML5. It’s also what browser makers are looking at. You can also get to it quickly with the link http://whatwg.org/html.

Web Applications 1.0

This is everything the WHATWG is working on, including non-HTML-specific material (see above). It’s introduced with a photo of a kitchen sink ;)

While this is pretty much the same as HTML — Living Standard, I don’t recommend it because it doesn’t have the ability to hide implementor details. However you’ll need it if you’re interested in Web Storage, Web Sockets API, and Server-sent Events. You can get to it quickly with the link http://whatwg.org/C.

Cut-down versions specifically for authors (us)

HTML5: The Markup Language Reference

A quick reference for authors describing the syntax, structure, and semantics of HTML5. It's intended to be as concise and readable as possible. From the legend and self-styled W3C HTML5 jackass himself, Mike™ Smith, who also gets bonus points for the initialism “H:TML”.

I recommend this as a quick reference or cheat sheet to remind yourself of the essentials (well, in addition to the HTML5 Doctor glossary, of course ;-). It doesn’t have the depth of guidance or the examples in the other specs (or the implementor details), but it has info links to HTML5 for Web Developers, so you can easily get more detailed information.

HTML5 (Edition for Web Authors)

HTML5 for Web Authors was Mike™ and Ben’s first collaboration. It removes the implementation details intended for browser makers and adds some style, and it’s more in line with W3C’s HTML5 in that it doesn’t include microdata. For the time being, it’s been superseded by HTML5 for Web Developers.

I recommend this for JavaScripters, as it includes more API information than HTML5 for Web Developers. Currently it’s not as up-to-date as HTML5 for Web Developers, but I expect it to receive some love in the future.

HTML5 for Web Developers

HTML5 for Web Developers also removes the implementation details intended for browser makers, but includes some parts like microdata that have been cut from W3C’s HTML5 spec. I’m very impressed with the functionality and design, and I expect it to keep improving.

I recommend this for anyone wanting a beautiful, readable version of HTML5. With local storage, it’s also perfect for adding to an iPad home screen. As it’s on GitHub, it’s also the only spec where you can easily contribute to the design and functionality.

There’s a bunch of other related Editor’s drafts linked to in the HTML Working Group sidebar which may interest you. Lachlan Hunt’s HTML 5 Reference — a learning rather than reference-focused version of the HTML5 spec — is unfortunately currently out-of-date and on ice, so I don’t recommend it.

In Summary

I think these specs all have their place. Personally I’ve been mainly using the HTML — Living Standard version, but expect to use HTML5 for Web Developers a lot now too. The differences between these different versions of HTML5 (except for H:TML) can be broken down into two groups: the extra modules they include, and whether they include the option to show/hide implementor details — the HTML5 and HTML specs both do.

One fear John Foliot expressed is that you might accidentally end up using something that was highly likely to change. The WHATWG HTML and Web Applications specs, however, have annotations indicating the status of each item in the margin.

Handy!

I’ll leave the last words to Ben himself, who, a day after launching, said:

I'm thrilled to have it out, see good community support, and I hope that it becomes a reference for people to use every day

HTML5 for Web Developers originally appeared on HTML5 Doctor on February 25, 2011.

The logo is a general-purpose visual identity for a broad set of open web technologies, including HTML5, CSS, SVG, WOFF, and others.

We’re pretty much at ease with lumping specs that aren’t strictly HTML5 in to the buzzword. For example, Web Workers or Web Sockets were developed by the same people that specced HTML5 and, like many aspects of HTML5, are simple APIs that developers are adopting to facilitate development of Web Applications using Open Web technologies. Geolocation was nothing to do with the WHATWG but, because it’s a modern, simple, useful API, it’s philosophically satisfying to call it “HTML5″, although inaccurate.

But lumping technologies like CSS 3, WOFF (simply a font format) or SVG is too much jargon-creep. HTML is about semantics and structuring data, not about styling, fonts or graphics. It’s not just about purity of jargon—this stuff matters. The 2001-era memo about separation of content, style and behaviour is even more important now that “HTML5″/ real-HTML5 / HTML gives us so much more power. While we understand that clients and technical journalists will use “HTML5″ as a buzzword, the W3C as the official standards body should be promoting clarity, not blurring the distinctions.

There is also the danger that other Open Standards might suffer from being excluded from the “HTML5″ buzzword—for example, W3C Widgets, which PPK has already suggested we refer to as “HTML5 apps” because of this not-”HTML5″ exclusion principle.

What can be done?

It’s not done until it’s done; the W3C says

W3C introduced this logo in January 2011 with the goal of building community support. W3C has not yet taken it up in any official capacity.

Quite rightly, the W3C has opened it up for debate. We suggest that the W3C rethink slightly, and have separate-but-related logos. For example, the current logo can represent markup and APIs that we accept may be legitimately referred to as “HTML5″, another logo for graphics – for example, SVG, and a third logo for styling that brings together CSS, WOFF and the like. (We note in passing that using a “3″ to represent CSS will quickly date when work on CSS 4 begins.)

They should be collectively referred to by some name like the “Open Web”, which should be the umbrella brand, because it remains as important as ever to set Open technologies apart from proprietary tech. We applaud the W3C’s move to brand Open tech and raise awareness of it amongst developers and the wider tech world.

This is just a strawman taxonomy to get people thinking. Have you got any better ideas?

Note, we haven’t addressed WHATWG’s recent change to using the name “HTML”. This is something that has been in the works for a long time, and better represents WHATWG’s actual process (and the process of implementers). We’ll cover this in a future post…

Addendum

Added just a few hours later:

The W3C have half-done the right thing by adding this clarification:

Is W3C saying that CSS3 is part of the HTML5 specification?
No. However, many HTML5 Web sites and applications do take advantage of CSS3 for styling and presentation.

But the CSS “styling” logo is still in the badge builder and the icon sets. It should be removed.

So two cheers for the clarification. Let’s see some commitment to complete clarity.

Two cheers for the W3C’s HTML5 logo originally appeared on HTML5 Doctor on January 21, 2011.

I understand why someone might think that, but it’s wrong. 2022 was misinterpreted as the year HTML 5 would be ready. That’s wrong. HTML 5 is ready today.

In an interview by Tech Republic, for a techie audience, Ian Hickson, the editor of the HTML 5 working draft, was asked to give a timeline of the HTML 5 recommendation.

One date should have come out of that interview, but another, much further away did instead: 2022 – the date of the final proposed recommendation, which actually translates to:

require at least two browsers to completely pass [HTML 5 test suites]

Let’s put this in context of another spec that has taken a very long time: CSS 2.1.

CSS 2.1 is CSS that I’m certain you’re familiar with. I’m certain you use it day to day without any thought as to whether it’s a completed spec.

It’s been in development for over 10 years, and it’s only just become a candidate recommendation (23rd April 2009).

That said, it doesn’t have two browsers completely supporting it. Only Internet Explorer 8 supports the full CSS 2.1 spec.

Did that stop you from using CSS 2.1? I suspect not. Will that stop us from using HTML 5? It certainly shouldn’t. HTML 5 is available and ready to be used today.

What is the important HTML 5 date?

October 2009.

This October is the last call for the HTML 5 working draft.

That means, that issues with the spec, enhancements, bugs, anything, it all needs to be in and submitted and written in to the spec for October this year (it can go through reiterations, the this is the main deadline).

The WHATWG is completely open for anyone to contribute their ideas and suggestions.

You can sign up to the mailing lists, look through the backlog of mailing list. You can communicate directly using IRC and there’s even a complete log of all the IRC history. All available from http://whatwg.org.

2022, or when will HTML 5 be ready? originally appeared on HTML5 Doctor on July 21, 2009.