CODEWITHSUNDEEP
html
Roman
Roman

Reputation: 3749

Am I using the right HTML5 tags for my general site layout?

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

Upvotes: 1

Views: 1030

Answers (2)

Ian Devlin
Ian Devlin

Reputation: 18870

It's difficult to say whether it's semantically correct or not as we have no idea what the content of the aside, section and article elements are. These (and other) elements are to be used semantically, so the content is key.

Upvotes: 1

JNDPNT
JNDPNT

Reputation: 7465

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.

Upvotes: 2

Related Questions