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

article, html, semantics, structure

Solution

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>

Problem

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?

Original source