What is the appropriate use of the Article element?

I want to change

<section>
  <header>...</header>
  <p class="tweet">This is a tweet preview. You can... <em>6 Hours ago</em></p>
</section>

into

<section>
  <header>..开发者_C百科.</header>
  <article class="tweet">
    <p>This is a tweet preview. You can... <time pubdate>6 Hours ago</time></p>
  </article>
</section>

But after reading some articles on the <article> tag, I'm not sure that this is the best move. What would be better practice?

The important thing to understand about articles and sections is that they are sectioning elements. Each follows a common pattern:

<sectioning_element>
    <heading_or_header>
    ... the body text and markup of the section
    <footer>
</sectioning_element>

The footer is optional. Sectioning elements should have a "natural" heading. That is, it should be easy to write an <h?> element at the start of the section/article, that describes and summarises the entire content of the section/article, such that other things on the page not inside the section/article would not be described by the heading.

It's not necessary to explicitly include the natural heading on the page, if for example, it was self evident what the heading would be and for stylistic reasons you didn't want to display it, but you should be able to say easily what it would have been had you chosen to include it.*

For example, a section might have a natural heading "cars for sale". It's extremely likely that from the content contained within the section, it would be patently obvious that the section was about cars being for sale, and that including the heading would be redundant information.

<section> tends to be used for grouping things. Their natural headers are typically plural. e.g. "Cars for Sale"

<article> is for units of content. Their natural headers are usually a title for the whole of the text that follows. e.g. "My New Car"

So, if you're not grouping some things, then there's no need, and it's not correct, to use another sectioning element in between the header and footer of the section and your correct mark-up would be

<article class="tweet">
  <header>...</header>
  <p>This is a tweet preview. You can... <em>6 Hours ago</em></p>
</article>

assuming you can find a natural heading to go inside the <header> element. If you can't, then the correct mark-up is simply

<p class="tweet">This is a tweet preview. You can... <em>6 Hours ago</em></p>

or

<div class="tweet">
     <p>This is a tweet preview. You can... <em>6 Hours ago</em></p>
</div>

* There's a case for including the natural heading anyway, and making it "display:none". Doing so will allow the section/article to be referenced cleanly by the document outline.

<article> content

represents a 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.

(from the html5 working spec)

in fact one of the examples illustrates nested <article> elements where the inner <article> is inside a <section>

Why don't you think it's a good move? It seems to me that a Tweet would fit perfectly in the W3C spec on what should be in an article. It would most likely depend on the context your sample code is in (which we can't tell from what you've provided).

It could also be put this way.

The semantics don't matter THAT much. You could very well do that if you wanted to and it would be fine. The thing with the article vs. section usage debate is that it's all subjective, to a point. I would recommend against how you're doing it in the second version though because it seems as though that just clutters the code more. What you could do is just replace the section tag with an article tag.

I went through quite a bit of head scratching to understand it because it seems to be confusing to quite a few but it really should be looked at a bit more literally. Here is an easy way to look at it:

Sections can contain elements from different topics. Articles should contain elements from the same topic.

For example:

<section>
    <section>
        <article id="article_ONE">
            <header>...</header>
            <p>Not directly related to article_TWO</p>
            <footer>...</footer>
        </article>
    </section>
    <section>
        <article id="article_TWO">
            <article>
                <header>...</header>
                <p>Part 1 of article TWO</p>
                <footer>...</footer>
            </article>
            <article>
                <header>...</header>
                <p>Part 2 of article TWO</p>
                <footer>...</footer>
            </article>
        </article>
    </section>
</section>