16

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.

Angus Fretwell
  • 256
  • 1
  • 3
  • 7

2 Answers2

17

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.

Brian Campbell
  • 322,767
  • 57
  • 360
  • 340
  • 10
    Well I guess you could perceive the
      /
    • elements as being unnecessary but I feel that they do add some meaning to it as it is a 'list' of posts.
     – Angus Fretwell Dec 02 '10 at 05:47
  • 3
    There was discussion on the WHATWG mailing list last year about the validity of putting `
    `s inside a `
      ` (directly, with no `
    • `s). The consensus was that it would be beneficial for screen readers, was "not incorrect" semantically, and worked in major browsers. The discussion is gone from my inbox; I'd have to find it in the archive. Something to consider, though.
     – traq Feb 10 '14 at 16:41
0

If it displays correctly in all implementations, I don't have any idea why it would be incorrect... HTML5 is meant to be flexible. Also, the documentation states:

Contexts in which this element can be used: Where flow content is expected.

Which looks to be the context of most elements available.

Robert S Ciaccio
  • 2,675
  • 1
  • 19
  • 21
  • 3
    Thanks for confirming that it's valid HTML5, but is it [Semantic HTML](https://en.wikipedia.org/wiki/Semantic_HTML)? – ma11hew28 Aug 30 '15 at 13:15