Tell me more ×
Code Review Stack Exchange is a question and answer site for peer programmer code reviews. It's 100% free, no registration required.
up vote 4 down vote favorite

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 do it.

Here is the Wireframe: http://i45.tinypic.com/2qiclci.jpg

1) Is the wrapper for the two column considered bad practice?

2) Should the secondary navigation on the left be an article or a div?

Any other feedback are appreciated. Thanks for your time.

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

            <nav class="main">
                <ul>
                    <li>- main navigation</li>
                    <li>- main navigation</li>
                    <li>- main navigation</li>
                </ul>
            </nav>

            <div class="uploadyourphoto">
                <p>button call to action</p>
            </div>

            <article class="secondarynav">
                <h2>Title h2 secondary menu</h2>
                <ul>
                    <li>navigation</li>
                    <li>navigation</li>
                    <li>navigation</li>
                </ul>
            </article>

            <article class="secondarynav">
                <h2>Title h2 secondary menu</h2>
                <ul>
                    <li>navigation</li>
                    <li>navigation</li>
                    <li>navigation</li>
                </ul>
            </article>
        </section>

        <!-- Content -->  
        <section class="main">

            <header class="slideshow">
                <p>slideshow widget</p>
            </header>   

            <article class="review">
                <p>review widget</p>
            </article>   

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

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

    <div class="clearfix">/div>

    <!-- footer -->
    <footer>
        <div>footer</div>
    </footer>
</body>
share|improve this question
 
When you say Should the secondary navigation on the left should be a as well instead of an article or a div? are you referring to the wireframe instead of an article or a div? –  Ryan Gates Feb 1 at 14:43
 
Do you have a page/example with real content? It's hard to tell what kind of content will be filled in. For example, is the "H1 title" the site or page heading? Is .main the site navigation? Is .secondarynav some kind of "See also" or is it a sub-menu of the global nav? –  unor Feb 2 at 7:21
 
Hi, I used the same class .main for the main HEADER, NAV and SECTION (the main section is the right column, my content). The H1 and paragraph are in the left column in all the pages and the H1 is the page title. The ".secondarynav" is similar to "see also"... it's a menu but not very important. –  lucaguglielmi Feb 4 at 9:01

3 Answers

up vote 1 down vote

1) 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.

2) Your markup relies a lot on the <article> where it may not be necessary. For instance, you put one <article> tag into another, which is odd. You also put and <article> tag into the <header>, which is also odd.

If you want simple containers, I would recommend you stick with <div>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.

share|improve this answer
up vote 1 down vote

I'd keep the wrapper. That way you can apply margin, padding, etc. to it and style the entire page instead of replicating the css for the two columns.

I don't quite understand your second question

share|improve this answer
up vote 1 down vote

Using classes/ids like column_left isn't a very semantic approach; HTML structure doesn't have any concept of "positioning" and, assuming you care about HTML readers other than a desktop browser (like screen readers or mobile devices), the idea of "left" just doesn't apply.

Instead, try describing what the content is. Instead of class="column_left", you could use id="sub-content" or id="related". Just choose something that describes the "what" without referring to appearance or positioning.

In regards to your use of article elements, the HTML5 spec says:

The article element represents a complete, or self-contained, composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.

Key emphasis added to illustrate that article is meant to be used to say "this is some real content", distinguishing it from containers and markup added to "frame" the content (like sidebars).

Also, your use of section elements is not in-keeping with the specification. The HTML5 specification says:

The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.

It specifically warns:

The section element is not a generic container element. When an element is needed for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element’s contents would be listed explicitly in the document’s outline.

So, the idea of a "main" section probably isn't right. Sections are meant to be ways partition a large article into headed-sections, in very much the way a Wikipedia article is laid out. You could easily say you have a "main" article, but a "main" section doesn't make as much sense, and you'd be better off replacing yours with simple div elements.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.