Some doubts about how create a semantically correct posts list (of a blog) structure in HTML5?

Question

I am very new to HTML5 and I need to implement an article container (for example, I need to create the classic structure for the WordPress articles where the user see a series of articles one below another), but I have some doubts about the semantic use of the new HTML5 components.

To do this I thought something like this:

<section>
    <h1>My Posts:</h1>
    <article>
        <header>
            <time datetime="2010-11-10" pubdate>10/11/2010</time>
            <h2>FIRST POST TITLE</h2>
        </header>
        <p>
            POSTS CONTENT
        </p>

        <footer>
            <address><a href="mailto:nonesiste@non.st">MY NAME</a></address>
        </footer>
    </article>

    <article>
        <header>
            <time datetime="2010-11-01" pubdate>01/11/2010</time>
            <h1>SECOND POST TITLE</h1>
        </header>
        <p>
            POSTS CONTENT
        </p>

        <footer>
            <address><a href="mailto:nonesiste@non.st">MY NAME</a></address>
        </footer>
    </article>
</section>

So I have reasoned in the following way:

• All the shown posts are contained in an external <section> element (because following the HTML5 specification a <section> represents a generic section of a document, in this case an area where posts are shown), the <sections> have its <h1> title.
• Every post is represented by a specific <article> element (should be semantically correct).
• Every article element represents a specific post and contains a <header> element that contains the date of publication and the post title. I used a <header> element to contain these information because this element is used to represent "a group of introductory or navigational aids".
• Then I have a classic <p> to contain the article textual content (but I can also wrap it into a div or is it better use a new <section> if the text is long and detailed?)
• Finally I have put the e-mail contact into a <footer> element because it is an information about the container (the <article> element).

Is this a valid structure for my problem? Is it semantically correct in HTML5?

Answer 1

This looks largely great to me. headers and footers were changed a while ago to allow them to be used in sections and articles.

However, the p element should be used for a single paragraph. In all likelihood, your articles will have more than a single paragraph, and WordPress will generally generate these for you based on line breaks. If you need to wrap all of your article contents into an element, a div will be sufficient. If your article is long and has several sections, you could use these instead.

The address element threw me off a bit first, as not many people use it, but its purpose is to describe the contact address of the author of the document (or part of the document), so your usage is absolutely correct.

For bonus points you can consider implementing the hCard standard for formatting the email: http://microformats.org/wiki/hcard

Basically, aside from the use of the paragraph element to wrap the entire article, this is absolutely fine! You've shown a lot of thoughts behind your decisions, which is quite rare these days.

Answer 2

Your markup is fine.

(Note that for the first article you used h2 and for the second one h1. While both ways are possible, why not stick to one variant?)

is it better use a new section if the text is long and detailed?

Don’t include the whole text in a section! But when you use sub-headings in the article, you are "encouraged" to use explicit section elements to group the heading and its content.