Structure of website columns and navigation I have made this HTML5 structure for a new website I am working on. I'd like to know if there is a more elegant approach to doing it.




Is the wrapper for the two column considered bad practice?
Should the secondary navigation on the left be an article or a div?




&lt;body&gt;
    &lt;header class="main"&gt;
        &lt;p&gt;header&lt;/p&gt;
    &lt;/header&gt;
    &lt;div class="wrapper"&gt;
        &lt;!-- Column left --&gt;  
        &lt;section class="column_left"&gt;
            &lt;header&gt;
                &lt;article&gt;
                    &lt;h1&gt;H1 title&lt;/h1&gt;
                    &lt;p&gt;Lorem ipsum dolor sit amen lorem ipsum dolor sit amen&lt;/p&gt;
                &lt;/article&gt;
            &lt;/header&gt;

            &lt;nav class="main"&gt;
                &lt;ul&gt;
                    &lt;li&gt;- main navigation&lt;/li&gt;
                    &lt;li&gt;- main navigation&lt;/li&gt;
                    &lt;li&gt;- main navigation&lt;/li&gt;
                &lt;/ul&gt;
            &lt;/nav&gt;

            &lt;div class="uploadyourphoto"&gt;
                &lt;p&gt;button call to action&lt;/p&gt;
            &lt;/div&gt;

            &lt;article class="secondarynav"&gt;
                &lt;h2&gt;Title h2 secondary menu&lt;/h2&gt;
                &lt;ul&gt;
                    &lt;li&gt;navigation&lt;/li&gt;
                    &lt;li&gt;navigation&lt;/li&gt;
                    &lt;li&gt;navigation&lt;/li&gt;
                &lt;/ul&gt;
            &lt;/article&gt;

            &lt;article class="secondarynav"&gt;
                &lt;h2&gt;Title h2 secondary menu&lt;/h2&gt;
                &lt;ul&gt;
                    &lt;li&gt;navigation&lt;/li&gt;
                    &lt;li&gt;navigation&lt;/li&gt;
                    &lt;li&gt;navigation&lt;/li&gt;
                &lt;/ul&gt;
            &lt;/article&gt;
        &lt;/section&gt;

        &lt;!-- Content --&gt;  
        &lt;section class="main"&gt;

            &lt;header class="slideshow"&gt;
                &lt;p&gt;slideshow widget&lt;/p&gt;
            &lt;/header&gt;   

            &lt;article class="review"&gt;
                &lt;p&gt;review widget&lt;/p&gt;
            &lt;/article&gt;   

            &lt;article class="product_grid"&gt;
                &lt;h2&gt;product grid title&lt;/h2&gt;
                &lt;p&gt;Text text text lorem ipsum dolor sit amen &lt;/p&gt;
                &lt;article class="products"&gt;
                    &lt;ul&gt;
                        &lt;li&gt;product 1&lt;/li&gt;
                        &lt;li&gt;product 2&lt;/li&gt;
                        &lt;li&gt;product 3&lt;/li&gt;
                    &lt;/ul&gt;
                &lt;/article&gt;
            &lt;/article&gt;&lt;  

            &lt;article class="product_grid"&gt;
                &lt;h2&gt;product grid title&lt;/h2&gt;
                &lt;p&gt;Text text text lorem ipsum dolor sit amen &lt;/p&gt;
                &lt;article class="products"&gt;
                    &lt;ul&gt;
                        &lt;li&gt;product 1&lt;/li&gt;
                        &lt;li&gt;product 2&lt;/li&gt;
                        &lt;li&gt;product 3&lt;/li&gt;
                    &lt;/ul&gt;
                &lt;/article&gt;
            &lt;/article&gt;
        &lt;/section&gt;
    &lt;/div&gt;

    &lt;div class="clearfix"&gt;/div&gt;

    &lt;!-- footer --&gt;
    &lt;footer&gt;
        &lt;div&gt;footer&lt;/div&gt;
    &lt;/footer&gt;
&lt;/body&gt;
Don't worry about wrapping your content too much if the style cannot be achieved without it. If it can, the extra wrap may be overkill.
Your markup relies a lot on the &lt;article&gt; where it may not be necessary. For instance, you put one &lt;article&gt; tag into another, which is odd. You also put and &lt;article&gt; tag into the &lt;header&gt;, which is also odd.


If you want simple containers, I would recommend you stick with &lt;div&gt;s with semantic class attributes. They have been around for a while and used for wrapping other tags. They are the tried and true method and their lack of semantic meaning will not confuse the reader or crawler.