We’re back with our first roundup of your questions for 2010. In this article, we’ll be covering a range of topics including sections and sectioning, the
<img> element, scaling video, and a proposal for a
Headers and sidebars
I have 2 questions:
1. If I have my main navigation above the masterhead would best practise be having the nav tag inside of a header tag with the h1 and h2 in a hgroup? Or should the nav and header tag be separate?
2. I am building a blog in HTML5. It has a blog-like sidebar with articles, contact info and about info in it. Would the best tag to wrap this in be section or aside?
Thank you so much for your time,
<nav> within your
<header> is fine and valid. However, if it makes more sense to leave it outside, then you can do that too. You don’t need to put the
<hgroup> inside the
Regarding your second question, I would use
<aside> (as we’ve done on the HTML5 doctor site) and then use multiple sections within that. Also see Bruce’s article on Designing a blog with HTML5.
Hope that helps.
As you are, according to the slogan, “helping [me] implement HTML5 today,” I thought to bother you people with a spec. related question.
What should an UA do with an image without specified width and height attributes?
The dimension attributes part of the specification keeps stating “if specified” for every rule but doesn’t give any “if not specified”.
The part of the specification defining the img element itself does not state anything of importance about the dimension attributes apart from how the attributes in the DOM should be created by the UA.
Interesting is to note that they have omitted these attributes in all their img element examples.
In the dimension attribute section they go state the following.
– The dimension attributes are not intended to be used to stretch the image.
So we can only use them to make images smaller? This is odd as well so let’s say by stretch they mean to say both expending and shrinking in size. In this case the attributes can only be used for two cases:
1. To state the exact width and height of the image. Something that seems redundant unless not using those attributes means the UA can display the image at any size (which it might, as nothing about this is defined in the spec.).
2. To give a 0 in both attributes. By this I am telling the UA that the image is not to be seen by the user.
Am I missing something or is the specification missing this?
Looking forward to getting your prescription ;)
Kind Regards, Martijn
If no dimension attributes are specified, the browser will leave no space for the image, and once the image has been loaded (after the rest of the page), it will then need to reflow the entire page, as that’s the first time it knows the size of the image. This can cause the content you’re reading scrolling off the page.
If you give the size of the image as attributes in the HTML, the browser will leave space and render the image there once it’s loaded without reflowing the page. On a mobile phone, reflowing the page unnecessarily drains the battery, and users can get vertigo from the page’s text jumping around to accommodate images.
Section and Sectioning
What do you mean when you are talking about “sectioning”? And why don’t header and footer require sectioning?
I think about section and sectioning like about part of something defined. News, comment, page content, sidebar, *header*, and *footer*. Is it bad representation?
Sectioning relates to the headings in some block of related content and defining what is related to what in a hierarchy of headings (
<h6>). The outlining algorithm can produce a table of contents from the nested
Headers and footers themselves do not change the outline; a header or footer may contain no headings. If a header or footer does contain a heading, then that heading does come into the outline. See our article on the section element.
Scaling the Video
Not sure if this question is an appropriate one, but any help would be really appreciated.
I’m going about updating my video website, chutney.ie, and would love to implement HTML5. I am interested in replicating the scaling effect/style used on the Mozilla welcome page.
Not being overly knowledgeable in this area, I would love to know how to begin — is this effect a Flash based animation, or something that can be achieved with HTML alone?
Again, any nudge in the right direction would be great.
I’m not sure how Mozilla did it, but you can use some of the Webkit and Mozilla transforms on the
<video> element. For example, you can cause the video to grow on hover — see this example in Chrome, Safari, or Opera. You can also use the
onClick event to create the same effect.
You can also combine
<canvas> to provide some interesting results (laying the
<canvas> over the
<video>). For more on the
<video> element and what it can do, please read the Introduction to HTML5 Video on dev Opera written by Bruce Lawson and Patrick Lauke.
We need a
John wrote in and proposed a field element:
Hey there. First off thanks for the site. I was excited to find it. I spent a little time on the W3C site and honestly couldn’t figure out how to submit suggestions there. So going to submit mine to you guys and maybe you can pass it on (if it is good) or point me to someone that can help. Ok to the point:
We are getting nice new tags to with HTML5 (nav, footer, etc) to help us create more semantic code. I think what we really need is a
fieldtag — after all what are fieldsets sets of?
Everyone wraps up their labels and inputs with some element. Some of us do this with UL, some people do it with DT/DD, some with DIVs and some people out there insist that a form is tabular data.
We are all just bastardizing these elements because there is no clear semantic wrapper for field elements of a form.
I think you get the point. I’m trying to keep this email short. If you think there is anything to this argument, I have a more detailed summary (with example code) at:
I would love to hear your thoughts on this.
While a field element would be nice — it would stop the argument over how best to mark-up forms — you have to ask yourself whether or not it actually adds any semantic or functional value to an HTML document. Yes, wrapping inputs and their labels in a field would make things easier to read and drop the need for the
for attribute on the label (since the relationship can be assumed), but doing so would not be backwards compatible. In theory, we could continue to add
for until there is a suitable time to drop it, but again I question the value of such a tag.
The purpose of wrapping form input/label pairs is generally to ease styling. My personal stance is that unless there are case studies showing how such an element can add more value to HTML forms, this proposal won’t make it very far.
Got a question for us?
That wraps up this round of questions. If you’ve got a query about the HTML5 spec or how to implement it, you can get in touch with us and we’ll do our best to help.