Question

I’m trying to understand the HTML5 elements. I have basic html layout below which I want to migrate to html5 layout. Please have a look at it, and let me know if i’m using it correctly. I’m not sure if I’m using <section> and <article> correctly.

HTML:

<div id = "wrapper" >

<div id = "left" >
    <div class = "left-box"> ...    </div>
    <div class = "left-box"> ...    </div>
</div>

<div id = "center" >
    <div class = "center-box"> ...  </div>
    <div class = "center-box"> ...  </div>
</div>

<div id = "right">
    <div class = "right-box"> ...   </div>
    <div class = "right-box"> ...   </div>
</div>

</div>

HTML5:

<aside id="left">
    <article class="left-box"> ... </article>
    <article class="left-box"> ... </article>
</aside>

<section id="center">           
    <article class="center-box"> ... </article>  
    <article class="center-box"> ... </article>
</section>

<aside id="right">
    <article class="right-box"> ... </article>
    <article class="right-box"> ... </article>
</aside>

PS. As I’m using a div <wrapper> to wrap everything, how i use that in html5? Thanks

Answer 1

HTML5:

<section id="wrapper">
    <aside id="left">
        <article class="left-box"> ... </article>
        <article class="left-box"> ... </article>
    </aside>

    <section id="center">           
        <article class="center-box"> ... </article>  
        <article class="center-box"> ... </article>
    </section>

    <aside id="right">
        <article class="right-box"> ... </article>
        <article class="right-box"> ... </article>
    </aside>
</section>

This is okay. Remember that html5 elements are just semantic, this means they have to tell their meaning. You have a section with in that section something aside on the left and on the right with between a section with f.e. id content. It’s really not that much of a difference.

Instead of setting a wrapper you can also apply these styles directly to “body”, but I would not recommend this for the time being (older browsers might give some problems). Also keep in mind that older browsers will probably not recognize these section-tags.

Article is used for… well… articles. So I don’t know what you are trying to add in these center-box’es, but use section if they are not articles. It’s all in the name… f.e. when you have address data you use the address-tag.