Your Questions Answered #7

by .

Doctor treating a patient illustration Here we are again with another round of patient questions about HTML5. In this article, we’ll be covering AJAX, the eternal question of <div> or <section>, our old friend Internet Explorer, how to mark up multiple blocks of content in a sidebar, and using <header> with <hgroup>.

HTML and AJAX

Arie asked:

I’m still learning about html5 and javascript, I’m wondering how html5 makes doing a lot of the things currently done in ajax and javascript more simple. Is it by providing things like the canvas that unify ideas?

Certain parts of HTML5 will indeed simplify or reduce the need for JavaScript. One such area of improvement is Web Forms 2.0, which will handle client-side form validation in the browser and provide new input types (like <input type="email"> that checks for a valid email address). Of course, you’ll still need to validate your forms on the server, but at least the browser will catch the most obvious mistakes before the user actually submits the form.

Other parts of HTML5, like Web SQL Databases and <canvas>, are essentially JavaScript APIs. They may not cut down on your need for JavaScript, but they do provide a consistent interface to some powerful functionality and will enable your application or site to do more things within (or outside of) the browser.

Cheers, Rich

<div> or <section>?

Paul asked:

Hello

I see you are using divs on your website, I thought divs should be replaced by more semantic tags such as sections or article. what did I miss?

Thanks

Hi Paul,

Just like with HTML4, you shouldn’t use <div>s or <span>s where another, more precise element would fit the bill. But for grouping arbitrary content, <div>s and <span>s remain the way to go.

Thanks, Bruce

HTML5 and IE6

Adam asked:

Greetings HTML5 Doctor,

Is it at all possible to have a HTML5 layout while 30% of our users are running IE6? We are an IT company and our website is very large so having separate versions is completely impractical. HTML5 would allow us to move on and keep our markup a lot simpler but with no concrete guarantees regarding universal support is HTML5 ever going to get off the ground within 5 years while not having to resort to javascript solutions?

Simply change the doctype and you’ll be writing HTML5! If you want to use new elements, however, you’ll need to use JavaScript to support them (for all versions of IE up to IE8). The best place to start? Read Remy’s article on How to get HTML5 working in IE and Firefox 2.

I think we’re in a position to do something about this. By using the new doctype, block-level links, and new form input types (that degrade gracefully), we can start promoting HTML5 right now.

Cheers, Rich

Multiple blocks in a sidebar

Bart asked:

On my page (revora.net) I have a sidebar with content that I deem appropriate for the aside element. The sidebar contains several blocks of content. I’ve currently made the whole bar aside and made the blocks div. Is this correct, or should I do it the other way around?

It sounds like your first approach is correct. The <div>s might be <section>s or maybe <nav> elements though, depending on their content. I suggest you read our article (and the comments) on the <aside> element.

Thanks, Tom

Header with <hgroup>

Diego asked:

Hi,

This structure is right?

<section id="choose-tip">
   <header>
       <hgroup>
           <h1>Foo Bar</h1>
           <h2>Baz Bat Qux</h2>
       </hgroup>
   </header>
   <p>lorem ipsum</p>
</section>

What I mean is, if I have a HEADER with just 2 H(n) I need to put these into a HGROUP ? Or… I can remove the HEADER and leave just a HGROUP? What’s the better solutions for it?

Thanks for all,

Diego Tres

What you have is correct. Basically, in the document outline, you will only see “Foo Bar” as the heading for that section. “Baz Bat Qux” will be hidden from the outline.

You don’t have to use a <header> within your <section> or an <hgroup> within your <header>. Similarly, you don’t have to use a <header> around your <hgroup>.

To summarise, the best solution (if you don’t require the <h2> to appear in the document outline) is what you’ve already got.

Cheers, Rich

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.

14 Responses on the article “Your Questions Answered #7”

Ian Devlin says

The HTML5 and IE6 answer is slightly misleading, in my opinion, as part of having a HTML5 layout MEANS using new elements, otherwise what’s the point? I know you do say this, but I feel it should have been stressed a bit more is all.

Corey Burns says

I’m still very confused on section and divs on where to use them. My confusion lies in section should not be used where styling is needed. Everything is styled somewhat.

So on a standard portfolio site a tagline, intro text, short blibs (ie about me) and others of that nature would be using a section? The rest divs?

Tab Atkins says

@Ian Devlin: The answer was spot-on. You *can* use the new elements in IE6. You just need to run the javascript IE shim to make them work properly.

@Corey Burns: You’re never *restricted* from using styling with any element. The idea is that you shouldn’t use <section> to group content *only* for styling purposes. That is, if styling or scripting is the *sole* reason you’re adding a wrapper to your content, just use a <div>. But if the content you’re wrapping constitutes a coherent section of the document, and maybe has a heading, go ahead and use <section>, and style away.

Basically the warning just exists to keep you from thinking that you should replace all the <div>s in your site with <section>s because they’re “more semantic”. <section> has a specific meaning and shouldn’t be overused; we kept <div> around precisely so that it could continue to soak up those extra times when you need a wrapper element for non-semantic reasons.

Ian Devlin says

@Tab yes I’m aware of that, I meant that it should have been stressed a bit more, that’s all.

Corey Burns says

@Tab Thanks! That definitely clears it up =)

Arnout Kazemier says

@question1
If I remember correctly, canvas, webworkers etc is no longer part of the HTML5 specification. Its now seperated..

Shelley says

I wouldn’t count on Web SQL, folks. This is a stalled spec, and there’s a good chance will end up as a note, only.

Arnout, the Canvas element is in HTML5, but the 2D API that runs it is a separate spec.

Web workers, sockets, postMessage — all of these are part of the Web Apps group now, and are not HTML5.

And the use of Ajax and the client-side form validation are NOT complementary technologies. You won’t use the built-in client validation with Ajax.

Richard Clark says

@Tab, thanks for your input on clearing those points up.

@arnout, I think Shelly has answered your comment but you’re right they are separate specs.

@Shelly, when I’m talking about these things as part of HTML5 I tend to think of it as an umbrella term to cover a number of the javascript API’s etc. We should probably do an article on what’s in and out of what spec.

With regard to the answer for question 1 I wasn’t referring specifically to AJAX but rather that some of the new input types etc will avoid a lot of the heavy lifting that is currently carried out with JavaScript.

Hope that clears things up.

Join the discussion.

Some HTML is ok

You can use these tags:
<a href="" title="">
<abbr title="">
<b>
<blockquote cite="">
<cite>
<del datetime="">
<em>
<i>
<q cite="">
<strong>

You can also use <code>, and remember to use &lt; and &gt; for brackets.