Here we go with another post rounding up your HTML5 questions and sharing the answers with the world. We cover a wide range of topics this time, inlcluding ARIA, storage, offline capabilities, and document outlines, so read on to find the answers.
We also want to know what areas of HTML5 you’d like us to cover in future articles, so let us know!
Older browsers and XHTML
Brett Prichard asked:
If I were to use one of the new tags in HTML5, (i.e.,
<video>or<header>) what would happen when the page is rendered by an older browser?The other question I have is will there be an XHTML equivalent? XHTML 2.0 breaks off compatibility with HTMLs 1-4, but will it be compatible with HTML5? I prefer to code in XHTML.
Thank you for reading.
To answer your first question: nothing special. The content nested within the element is displayed. (In the case of video, the fallback content is shown.)
Regarding your second question, I wrote about the XHTML serialisation of HTML5 a while ago.
— Thanks, Bruce
ARIA
Joseph Chapman asked:
My colleagues and I wish to switch our doctype to the streamlined
<!doctype html>and implement several things we learnt from Jeremy Keith last Wednesday, primarily ARIA.We know that support is good as long as we add an extra DTD, but we can’t find the appropriate doctype declaration to stick on the end of
...html>Any ideas? We are really keen to kick this off and use a new piece of technology that will help springboard our site to a new level of accessibility.Any answers appreciated.
Thanks for your help.
It’s okay to add ARIA to HTML5 now without using a different doctype. I suggest you give this part of the spec a read.
I believe a task force has been created to more closely align ARIA to HTML5. We plan to cover ARIA more in a future post.
Hope this helps
— Rich
Attribute Minification
Nick Leon asked:
Hey there HTML5Doctor,
I consider myself a strong POSH developer. One of the requirements for valid XHTML is that “attribute minimization” is not allowed. HTML permits “attribute minimization”, where boolean attributes can have their value omitted entirely, e.g.,
<option selected>. All XML attributes must have explicit quoted values, so in XML this would be written as<option selected="selected">.I was wondering where HTML5 stands with attribute minimization. I noticed in some of your example code, you provided the minimized form of the attribute, e.g.,
<audio src="elvis.ogg" controls autobuffer></audio>. Is this valid in HTML5? Would this be the valid version for XHTML5:
<audio src="elvis.ogg" controls="1" autobuffer="0"></audio>?
Those are both valid HTML5 structures (however, controls=”1″ isn’t legal; you need to say controls=”controls”).
In HTML5, you can format attributes as you please. In XHTML5 (the XML serialisation), you need to obey the XML rules.
— Cheers, Bruce
Offline storage
Kevin Searle asked:
I’m having a hard time wrapping my head around the offline storage capabilities of the HTML 5 spec. Can you consider an “HTML 5 Offline Storage 101″ article?
Just to clarify, do you mean “storage” or “offline”? They’re two very different things.
Storage relates to variables, like cookie jars but a lot bigger.
Offline applications are about detecting connectivity and possibly running your app without a connection to the Web.
We (i.e., Remy) will be writing about both of these topics, but it’s useful to know which is more in demand than the other.
In the meantime, feel free to check out the demos I’ve written at HTML5 Demos (covering offline, storage, and web databases).
— Remy
Nav Title (in the document outline)
D Ross asked:
Working on my new site and checked it with the outliner. I’m getting an “untitled section” showing up because I don’t have a headline inside my “nav” element.
Is this correct? Do I really need to title my main nav?
If so, is adding an
<h5>or something similar with the words “main navigation” good enough? If so, is hiding it withdisplay: noneokay?Thanks,
DRoss
Yes, “untitled section” is fine. I know it’s been suggested to the developer of the outliner that it should say “navigation” or something similar, but I’m not sure when or whether that will happen. (You’ll see the same thing with <aside> too if there’s no heading nested directly beneath the element).
Thanks,
— Rich
The details element
Bart asked:
Hello Doctors!
I’d like to ask you a little help with understanding the “details” element.
As the W3 spec says: “The details element represents a disclosure widget from which the user can obtain additional information or controls”.
I’m not sure if I get it right, but I think I can use this element to put details about a post (such as date and time) and controls, including “answer”, “save” and “repost”.
Please tell me if I’m wrong.
Regards, Bart
PS. I love the HTML5doctor blog, it’s so important to explain how to use HTML5. Keep up the great work!
This question triggered a flurry of responses from several of us doctors, so we’ve added them all here for you.
Answer 1
The spec says <details> is not appropriate for footnotes, and you could argue that post details are footnotes. Also, the <details> element has the option to show or hide its content, which suggests to me that it’s not appropriate for the post details.
You could possibly use a <section> or a <footer> for the post details, but I’m not clear on what you mean by “controls”.
For the date/time, you can use the <time> element:
<time class="published updated" datetime="2009-09-23">September 23rd, 2009</time>Other doctors might have other opinions, but I hope this helps.
— Tom
Answer 2
Just to follow up on Tom’s reply: the user viewing your content can control whether or not they see the details.
The <details> element is an interactive element that is collapsed by default, so that only the heading is visible. The heading should be marked up in a <dt> element (if absent, it will read “Details”).
The control that the user agent should render (when fully supporting the <details> element) is a small triangular button to the left that, when clicked, toggles the visibility of the element’s contents.
If the <details> element should be open by default, it should have its open attribute set.
I would use <details> for any content that still allows the surrounding content to make sense while not necessarily needing to be seen. So in your example, I would put the metadata in the <details>, but not the “user controls” to reply, save, etc., since the user should always be able to see that they can perform these actions.
While the browser vendors haven’t implemented the interactive aspect of details, I, for one, will be emulating this using JavaScript.
I hope that helps (too!).
— Remy
Answer 3
You can also use pubdate as an attribute of <time>:
<time pubdate datetime="2009-09-23">September 23rd, 2009</time>pubdate is useful when you have two different times in the post. For example, for a future event:
<article>
<header>
<h1>Gig: Hixie and the Pixies, <time datetime="2010-01-01">Jan 1st 2010</time>, Royal Albert Hall</h1>
<p>Published <time datetime="2009-09-21" pubdate>Sept 21, 2009</time></p>
</header>
<p>With Lachy on kazoo, Henri on Sousaphone, Pilgers on the triangle, and Hixie conducting</p>
</article>I feel a post about the <time> element coming on…
— Bruce
More to come
That wraps up this round of questions! We’d like to know what areas of HTML5 you’d like us to cover in future articles, so leave a comment below or send us an e-mail.
5 Responses on the article “Your Questions Answered #4”
Note that
<audio src="elvis.ogg" controls="1" autobuffer="0"></audio>isn’t conforming. Either<audio src="elvis.ogg" controls="" autobuffer=""></audio>or<audio src="elvis.ogg" controls="controls" autobuffer="autobuffer"></audio>would be.[…] This post was mentioned on Twitter by Bodaniel Jeanes and Alexey Simonenko, html5doctor. html5doctor said: Your Questions 4 about #html5 – http://html5doctor.com/your-questions-answered-4/ […]
@Ms2ger
– you’re right; my bad: I was obsessing over slashes and quotes. I’ve amended my reply. Thank you.
[…] This post was mentioned on Twitter by Scott Radcliff, Stephen Hay. Stephen Hay said: More HTML5 questions answered by the HTML5doctor: http://bit.ly/4qX8Bt […]
[…] Your Questions Answered #4 […]
Join the discussion.