html5 - Is it semantically correct to nest an <article> element within a <li> element? -

using html5, semantically correct place <article> element within <li> element. situation prove useful list of recent or popular articles on blog. consider following:

<section id="popular">   <div class="blurb">     <h2>popular articles</h2>     <p>the popular posts blog.</p>   </div>   <ul>     <li>       <article>         <h3>article</h3>         <p>an excerpt article.</p>       </article>     </li>     <li>       <article>         <h3>article</h3>         <p>an excerpt article.</p>       </article>     </li>     <li>       <article>         <h3>article</h3>         <p>an excerpt article.</p>       </article>     </li>   </ul> </section> 

which appear follows:

popular articles

the popular posts blog.

• article

  an excerpt article.

• article

  an excerpt article.

• article

  an excerpt article.

to me, seems excellent way of marking information. question if correct nest <article> element inside <li> element in way.

there nothing semantically incorrect it, not necessary. <ul> , <li> elements aren't adding here, unless taking advantage of default styling. putting <article> tags directly within <section id="popular"> should sufficient, , reduces complexity of page size.

to determine whether semantically correct , useful in html, ask few questions. using each element intended purpose? instance, it's not semantically correct if use <a> element button, <a> hyperlinks, <button> buttons. need each element using in order convey of semantic information content (sections, headings, links, etc)? there meaningful intend convey isn't expressed use of appropriate elements? having lots of meaningless elements isn't harmful, adds clutter, , may mean there semantic distinctions conveying visually not encoding in way screen reader or automated bot or browser presented information in different format make sense of.