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 has no rendering; its sole purpose is to hide subtitles from the outlining algorithm which browsers, third party sites (warning:broken) or bookmarklets may use to make document outlines/ tables of contents.
So if you have the following code
<header>
<hgroup>
<h1>bruceawson.co.uk</h1>
<h2>Gorgeousness in a gimp mask</h2>
</hgroup>
</header>
only the <h1> appears in the outline; the <h2> is suppressed. (The highest-ranking heading wins.) More on <hgroup> at HTML5Doctor.
The trouble with this is that there is a new magic element that does nothing except change the semantics of its contents in a way that is new (there has never been an outlining algorithm before) so it’s difficult to grasp.
There was discussion about minting a new <subtitle> or <tagline> element instead. This has the advantage that it”s much easier to grasp the purpose of it. However, these new elements would have no default rendering in legacy user agents and, the argument against continues, people are already marking up subtitles as headings, so this way paves a cowpath. (I have my doubts: I usually encounter constructions like <p class=tagline>Gorgeousness in a gimp mask</p> for subtitles).
Thinking out loud here, but I wonder if we need explicitly to group headings and subtitles, anyway. It seems to me that an outlining algorithm should just treat multiple headings (<h1>…<h6>) that are direct children of a header element to be a group of “main heading” and subtitle(s) automatically. So
<header>
<h1>brucelawson.co.uk</h1>
<h2>Gorgeousness in a gimp mask</h2>
</header>
would automatically “know” that the <h2> is the subtitle and not be shown in an outlining application.
This would only work for direct heading children of a <header>: here’s an example of multiple heading descendants in which the <h3> is not a subtitle:
<header>
<h1>brucelawson.co.uk</h1>
<h2>Gorgeousness in a gimp mask</h2>
<nav>
<h3>Main navigation</h3>
<a href="home.html">Home</a>
<a href="about.html">About</a>
</nav>
</header>
I can’t think of any use cases for multiple headings as children of a <header> that wouldn’t be main heading + subtitles.
Added later, after coffee: The outlining algo would only need to say: adjacent headings in a <header> are automatically considered to be a heading and subtitles, whether there be 2 or 22. Then, even if there were two headings for the <nav> inside the <header>, they would be automagically heading and subtitle.
My global tour continues, and I’ve moved from Tokyo to Australia, where I’m touring Sydney, Canberra, Melbourne, Perth and Brisbane with organiser and all-round-great-bloke Roger Hudson and The Mighty Steve Faulkner, for the Web Industry Professionals Association. We’re talking HTML5 and WAI-ARIA. (So far, there are a few places left for Perth and Brisbane: book here.)
I’m very much enjoying Aus. It feels like England done right: good weather, laid-back attitude and fabulous hot-pants (not me, obviously). The only downside is the vast pantheon of comically venomous creatures that lurk round every corner. In Canberra I was even warned about evil swooping magpies.
The tour so far has been great; sell-out crowds and really, really clued-up (“cluey”) attendees and great people like Russ Weakley, Ruth Ellison who I’ve long admired but never met.
The flight from Canberra to Melbourne yesterday was somewhat fraught; we took off two hours late due to what was variously reported as “mechanical trouble”, “bad weather in Melbourne” and “a catering mishap that was particularly unpleasant”. (At least it wasn’t exploding engines.) On arrival the doors wouldn’t open and the fuselage rocked as the ground staff attempted to bash the doors open with the airbridge. We arrived at the venue with only minutes to spare.
Now I’m having a weekend (shifted forward by a day as I fly to Perth on Sunday morning) in Melbourne with my old and dear friend Pippa. We’ve already seen a park full of flying foxes and are off to see Kangawallabats at the zoo tomorrow. Tonight I’m cooking us pork stirfry noodles and gyoza and there is a case of beer to drink.
There are times when even as a seasoned traveller you can feel pretty vulnerable. For example, breakfast: I’m happy to tuck into raw mackeral as an evening meal, but there’s something about it for breakfast that is so unexpected that it takes you aback.
I’ve had similar double-takes with Japanese toilets. I went to Satoshi and Akane’s house for a lovely meal and, as you do after lots of soup and beer, felt the natural urge to micturate. Although they have a lavish toilet control panel (all of them do) I couldn’t work out how to flush.
After asking my gracious hosts, I learned that it was activated by a sensor: just wave your hand near it and it’s flush. This is in contrast with the toilet in my hotel room, whose control panel had English language controls, and squirted water up my bum and around my bum at user-selectable strength (below), but didn’t seem to have a flush button.
I eventually located a traditional manual flush on the opposite side of the toilet bowl, and satisfactorily dismissed my ablutions.
Most Japanese toilets have heated seats, which is pleaant but odd when alone in a hotel room as you can’t help but wonder who has snuck in to poo while you were cleaning your teeth. Many flush for an inordinately long time automatically the instant you sit down; I’m told so that this means that people outside the door can’t to hear the sound of ladies urinating, as it’s masked by the flushing sound. I suppose that if you’re bashful about exposing the fact that ladies pee (they do, you know!) this would be a useful solution in a traditional thin-walled Japanese house in which sound would travel easily.
This theory might be borne out by the testimony of a lady attendee of the Web Directions East conference who told me that each ladies’ loo in the conference venue (consequent apologies for lack of photo) has a button marked “flushing sound” that played a loud recording of the sound of flushing, presumably to preserve ladies’ modesty but also conserve water.
Talking of water conservation, the apotheosis of lavatorial environmental responsibility was witnessed in my colleague Daniel’s apartment. On flushing the toilet (a laudably easily accomplished action, I might add), the tap on a small sink mounted above the cistern started automatically. I washed my hands and wondered how to turn the tap off. Then the brilliance of the design hit me: instead of re-filling a closed cistern, the washbasin drained the soapy water into the reservoir below, thereby flushing the toilet with the grey water that the previous visitor had washed his/ her hands in while simultaneously saving space in the compact Tokyo dwelling.
Genius. If I could work out a way to import them and sell them in the UK I’d make a million.
As I wearily stepped off a plane in which I’d been sandwiched between the two fattest Germans since Goering for ten chuckle-filled hours, my first sight outside the airport was the smiling visage of Web Directions organizer and all-round nice guy John Allsopp, who assisted me on the 70kms journey to my posh Ginza hotel.
Like two years ago when I travelled to Jakarta for the first time, I was weirded out by how familiar it felt: the elevated roads, skyscrapers and purposeful crowds reminded me of the four years in spent in Bangkok.
Just like two years ago, it was extra-strange when I realized that I had no language. I’m fluent in Thai, so it’s immensely frustrating not to be able to speak to people here.
Of course, after the superficial feeling of familiarity, the differences became apparent. The streets aren’t full of pot holes. The food is very different. There are ten bajilion vending machines where n Thailand there would be noodle vendors. The toilet in my hotel has more controls than the bridge of the starship enterprise. It’s not all different though: the women are, like Thai and Indonesian women, jaw-droppingly gorgeous.
The Japan-resident HTML5 Doctor, Oli, picked me up and we rode a pleasantly non-crowded train to Satoshi’s house, where I’m drinking a very welcome cold Kirin beer before dinner and writing this on John’s iPad.
I’ve wanted to visit Tokyo for twenty years and now I’m finally here. Yay!
It’s usually nice to receive feedback. But not always. Before Twitter became so popular an outlet for one’s ephemeral thoughts, I would occasionally receive emails berating me for having the temerity to publish personal blog posts and urging me to return to posting techy stuff. I would always answer these
Dear kindly correspondent, as you may have noticed, my site is not called freewebtips.co.uk, but brucelawson.co.uk – the unique portion of which is my name. This is not a co-incidence; it is because this is a personal site which I pay to register and I pay to host and therefore consider it my personal space upon which I can write personal posts if I so choose. Please do not read them if they offend you.
That seemed to work: I never heard from those people again, anyway.
This morning, someone had taken the trouble to write:
Im just getting into coding as i am myself a Graphic Designer. And i keep seeing your book advertised in most the places im learning from. I was suprised to see (with no offence meant) that your site is not the best looking around. Sorry i know thats probably not your general worry here, but personally i think for someone who seems quite well known you should have a much more attractive site!
When I launched this site in 2003, I was aware that I am graphic-design challenged. Being an old punk rocker, and admiring Jamie Reid‘s punk do-it-yourself aesthetic, I spent as long as two to three hours sticking bits of newspaper to paper and scanning it. In the intervening seven years, I’ve even added the Holy Grail of design, border-radius, and spent days and days reading the HTML5 spec to craft the best markup I could.
Should I now add all the other things that current web design mandates by law: hundreds of empty nested divs upon which to hang transitions, gradients, reflections and transforms that distract from the words, double the rendering time and drain mobile batteries?
Or point out that markup and semantics != visual design?
As professionals, we need to keep our jargon accurate. That’s why I hate hearing “HTML5” used as an umbrella term for any web technology, especially when people confuse HTML5 (mark-up and APIs) with CSS 3 (eye-candy). Repeat after me: HTML5 != CSS 3.
So we need a buzzword, as “HTML5 and related technologies” is unwieldy (and inaccurate). I prefer “NEWT” which stands for New Exciting Web Technologies and can thus safely encompass real-HTML5, CSS 3, SVG, XHR2, Geolocation, Web Sockets, WOFF, Web DB, IndexedDB, WebGL and the like.
Because new acronyms need a logo, the talented and generous Rob Winters made a cute newt.
