Correct HTML5 Format

[ello]

Hi there,

I've been researching the correct layout for html5 web pages, and I'm a little unsure on how something like this should look:

<div class="main-container">
        <div class="main wrapper clearfix">
                <div class="canvas gu6">
                        <div class="example-grid">
                                <div class="row">
                                        <div class="col gu1"> <img src="img/1.jpg">
                                                <div class="description">
                                                        <h2>Test</h2>
                                                        <p>Test, Test, Test.</p>
                                                </div>
                                        </div>
                                </div>
                        </div>
                </div>
        </div>
</div>

This is my main content, and it's bascially a basic grid layout. Should the above code be formatted like so?

<div class="main-container">
    <div class="main wrapper clearfix">
        <div class="canvas gu6">
            <div class="example-grid">
                <div class="row">
                    <div class="col gu1"> <img src="img/1.jpg">
                        <section>
                            <div class="description">
                                <header>
                                    <h2>Test</h2>
                                </header>
                                <p>Test, Test, Test.</p>
                            </div>
                        </section>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

I'm a little confused as many places advise on different virants of sections and headers etc...

[JorgeM]

There isnt really a "correct" layout (just some recommendations) as you may be thinking with regard to HTML5. For example, with regard to the new elements such as section, or header.. they were created to give the elements meaning (semantics), rather than creating a div, assigning an ID of "section", then styling it like a section. Or creating a div, assigning an ID of "footer" and doing the same.

The problem with these new HTML5 elements and IE (pre IE9) is that you can't style them yet without a hack (HTML5Shiv). Other than that those elements do nothing on their own. Again, its for the sematics.

[ello]

Riiight, o.k. Cheers for the advice. I'll stick with what I have now, plan for the new elements then update it to HTML5 when they become a little more adaptable.

Cheers Jorge M.

[JorgeM]

You could start to make the move over the HTML5 without using new elements. For example, start using the HTML5 doctype. update the HTML and HEAD elements. You could incorporate some of the HTML5 elements that are currently supported...

[dany12]

Use paul irishes boiler plate and you will have less browser issues and have a base where to start and extend your imagination. good luck