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

using HTML5, would it be semantically correct to place an <article> element within a <li> element. A situation where this would prove useful is a list of recent or popular articles on a blog. Consider the following:

<section id="popular">
  <div class="blurb">
    <h2>Popular Articles</h2>
    <p>The most popular posts from my blog.</p>
  </div>
  <ul>
    <li>
      <article>
        <h3>Article</h3>
        <p>An excerpt from the article.</p>
      </article>
    </li>
    <li>
      <article>
        <h3>Article</h3>
        <p>An excerpt from the article.</p>
      </article>
    </li>
    <li>
      <article>
        <h3>Article</h3>
        <p>An excerpt from the article.</p>
      </article>
    </li>
  </ul>
</section>

Which would appear as follows:

Popular Articles

The most popular posts from my blog.

  • Article

    An excerpt from the article.

  • Article

    An excerpt from the article.

  • Article

    An excerpt from the article.

To me, this seems an excellent way of marking up the information. My only question is if it is correct to nest the <article> element inside the <li> element in this way.

Answers


There is nothing semantically incorrect about it, but it is not really necessary. The <ul> and <li> elements aren't really adding anything here, unless you are taking advantage of their default styling. Simply putting the <article> tags directly within the <section id="popular"> should be sufficient, and it reduces the complexity of your page as well as its size.

To determine whether something is semantically correct and useful in HTML, ask yourself a few questions. Are you using each element for its intended purpose? For instance, it's not semantically correct if you use an <a> element for a button, as <a> is for hyperlinks, <button> is for buttons. Do you need each element you are using in order to convey all of the semantic information about your content (sections, headings, links, etc)? Is there anything meaningful that you intend to convey that isn't expressed by use of appropriate elements? Having lots of extra meaningless elements usually isn't harmful, but it adds clutter, and it may mean that there are semantic distinctions you are conveying visually but not encoding in a way that a screen reader or automated bot or browser that presented the information in a different format could make sense of.


Need Your Help

How would i go about shortening this code? And to cancel the previous click on click of new section?

jquery code-review

My code below basically changes the image for people in a team sector, but as you can see theres alot of repeated code; is there a way to shorten it?

How can I know the default ciphersuite a server provides using Java

java sockets ssl network-programming

If I am using Java to initiate SSL handshake with a server, Java has a set of enabled ciphersuites that will be offered during the handshake. This list will influence the server's choice. If I want...