title: Is it semantically correct to nest an <article> element within a <li> element?
body: <p>using HTML5, would it be semantically correct to place an <code>&lt;article&gt;</code> element within a <code>&lt;li&gt;</code> element. A situation where this would prove useful is a list of recent or popular articles on a blog. Consider the following:</p>
  
  <pre><code>&lt;section id="popular"&gt;
    &lt;div class="blurb"&gt;
      &lt;h2&gt;Popular Articles&lt;/h2&gt;
      &lt;p&gt;The most popular posts from my blog.&lt;/p&gt;
    &lt;/div&gt;
    &lt;ul&gt;
      &lt;li&gt;
        &lt;article&gt;
          &lt;h3&gt;Article&lt;/h3&gt;
          &lt;p&gt;An excerpt from the article.&lt;/p&gt;
        &lt;/article&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;article&gt;
          &lt;h3&gt;Article&lt;/h3&gt;
          &lt;p&gt;An excerpt from the article.&lt;/p&gt;
        &lt;/article&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;article&gt;
          &lt;h3&gt;Article&lt;/h3&gt;
          &lt;p&gt;An excerpt from the article.&lt;/p&gt;
        &lt;/article&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>Which would appear as follows:</p>
  
  <p></p>
  
    
      <h2>Popular Articles</h2>
      <p>The most popular posts from my blog.</p>
    
  
    <ul>
      <li>
        
          <h2>Article</h2>
          <p>An excerpt from the article.</p>
        
      </li>
      <li>
        
          <h2>Article</h2>
          <p>An excerpt from the article.</p>
        
      </li>
      <li>
        
          <h2>Article</h2>
          <p>An excerpt from the article.</p>
        
      </li>
    </ul>
  
  <p></p>
  
  <p>To me, this seems an excellent way of marking up the information. My only question is if it is correct to nest the <code>&lt;article&gt;</code> element inside the <code>&lt;li&gt;</code> element in this way.</p>