HTML5 <section>'s inside <article> and header

Question

I'm trying to make a semantic HTML5 code and not sure if it will be right. Visualy I have an article/post divided in 3 cols:

IMAGE (200px) | H1+ Summary + More Link (350px) | Additional Section with 2 headers H2 (150px)

In CSS I'll float:left - figure, .post-summary, .post-aside.

Here is Ver.1:

<article>
        <figure>
        <a href="#"><img src="images/temp/entry_01.jpg" alt=""></a>
        <figcaption>Title for Case Study</figcaption>
        </figure>

        <div class="post-summary">          
            <section>
                <h1>MAIN Article Title</h1>
                <p>Lorem ipsum...</p>
                <a href="#">read more</a>
            </section>              
        </div>

        <div class="post-aside">
            <section>
                <h2>The Charges:</h2>
                <p>Lorem ipsum...</p>
            </section>

            <section>
                <h2>The Verdict:</h2>
                <p>Lorem ipsum...</p>
            </section>
        </div>
</article>

Ver. 2

<article>
        <figure>
        <a href="#"><img src="images/temp/entry_01.jpg" alt=""></a>
        <figcaption>Title for Case Study</figcaption>
        </figure>

        <section class="post-summary">
            <h1>MAIN Article Title</h1>
            <p>Lorem ipsum...</p>
            <a href="#">read more</a>
        </section>                          

        <section class="post-aside">
            <h2>The Charges:</h2>
            <p>Lorem ipsum text ...</p>

            <h2>The Verdict:</h2>
            <p>Lorem ipsum text...</p>
        </section>

</article>  

Which one is right?

Indeliberate

Answer 1

Depends on what you want..

div — the "generic flow container" we all know and love. It’s a block-level element with no additional semantic meaning.

section — a "generic document or application section". A section normally has a heading (title) and maybe a footer too. It’s a chunk of related content, like a subsection of a long article, a major part of the page (eg the news section on the homepage), or a page in a webapp’s tabbed interface.

http://boblet.tumblr.com/post/130610820/html5-structure1 Link to article

I would use it this way (your v2):

<div> <!-- Main article div -->
    <article> <!-- First article -->
        <section><!-- Header, about the author... --></section> 
        <section><!-- related info .. --></section> 
        <section><!-- conclusion --></section> 
    </article>

    <article>
        <section></section>
        <section></section>
        <section></section>
    </article>
</div>

Vincenza

thanks, I thougth that <h1> should be as first-level in DOM of <article> to be the most important Header of this article – Indeliberate

It's just a mocup. Didn't see any question about the relevance of header tags. – Vincenza

:) bc I wanted to ask, but forgot. Sry – Indeliberate

In HTML there is a saying that order should NEVER be skipped. <h1></h1> <h2></h2> <h3></h3>. But in HTML5 the first header element is set as the article header. Regardless of the header level. – Vincenza

in HTML4 I knew it, but in html5 didn't. Thanks for help – Indeliberate

I'd use a header tag instead of a section for the header, about the author part. – Imphal

The header goes inside the section tag. – Vincenza

Answer 2

That's not right... both of them, and the answer too... DON'T USE DIV ! USE SECTION INSTEAD !

Commonalty

Why not use div? Every component of the HTML is allowed. It's up to the developer to figure out, what component is the correct to use. You can create a list with out using the list attribute - But you should use the list if you can. It's the same with divs, sections and articles. – Vincenza