Semantic HTML of an articles list

Question

In a typical index of articles (like a blog without excerpt) like this image:

those items should be a list (<ul><li>) or just divs?

And also, they should be figure/figcaption? Because would make some sense, but also... picture is part of an artcile not the main content, so maybe title/description is not the caption of the image, but the caption of the article.

what do you think?

EDIT: a live example - https://news.google.com/?hl=en

Answer 1

I’d use an article for each snippet (i.e. a news teaser).

Each article contains an h1 element for the heading, an img element for the image, and p element(s) for the text.

As you probably want to link to a full version, you could enclose all elements in one a element (which is allowed in HTML5), or the heading etc. only.

So it could look like:

<article>
  <h1><a href="" title=""><!-- news title --></a></h1>
  <img src="" alt="" />
  <p><!-- news description --></p>
</article>

Only use figure if this image itself should have a separate caption. The news description (here contained in p) usually isn’t the caption for that image.

You may change the order of the article children. Thanks to the way sectioning elements work, the heading doesn’t have to be the first element.

You may use an ul, but it’s not necessary. ol, however, should only be used if the order is really meaningful for understanding the content (i.e. a different order would change the meaning of the document). Typical example: if the items are ranked by relevance (e.g. most relevant teaser at the top), you should use ol.

---

Regarding your question if the teaser should be an article:

Don’t confuse article (HTML5 element) with the term "article" (English language). article has a separate definition that doesn’t necessarily have something to do with the understanding of the term "article".

The teaser should also be an article – the teaser article and the fulltext article are different articles, although they refer to the same entity.

Answer 2

The answers here leave a lot to be desired. The HTML spec has an example of blog post markup with comments inside.

https://www.w3.org/TR/2013/CR-html5-20130806/sections.html#the-article-element

While the accepted answer has copy/pasted the description of how the <article> element is used it does not answer the question asked at all.

Here is the answer from W3.ORG

If you can use a native HTML element [HTML51] or attribute with the semantics and behavior you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so.

Here is the logic I am proceeding with after researching: I have a list of reviews. Each review is ordered by helpful votes. Therefore the first level will be an ordered list since reviews will be ordered by their helpful votes. Otherwise an unordered list would suffice such as the nested comments:

<ol>
    <li class="review" role="article"> <!-- reviews ordered by votes-->
        <header>
            <h2>Review title</h2>
        </header>
        <p>Review body</p>
        <section class="comments">
            <ul>
                <li class="comment" role="article"> <!-- comments with votes-->

                </li>
            </ul>
        </section>
    </li>
</ol>

An insightful answer by @Terrill Thompson explains that screen readers are helped by semantic list markup. So yes, a list of <article>'s does make sense. As things become complex he mentions how confusing it can be. This is where ARIA, role and tabindex attributes should absolutely be added and tested.

That answer has a comment directing users to a conversation at W3.ORG. By definition it appears that <article> would not be part of a list where it should be "stand alone content". However the question here, myself and probably you reading this require a deeper answer where article applies to a true list of articles.

Such as:

• List of blog articles with excerpts
• Search results
• Reviews
• Comments

Answer 3

This is an opinion question so it comes down to preference. Based on your image, I would use a <ul> <li> though I could get the same result using divs.

Answer 4

If each item represents an article, then each should be represented using <article> elements.

If you feel that it's an ordered or unordered list of articles, then you could use <ol> or <ul> elements respectively.

I would recommend keeping the markup as simple as possible and as complex as necessary, so something along the lines of:

<div>
  <article>
    <img>
    <div>…</div>
  </article>
  <article>
    <img>
    <div>…</div>
  </article>
  …
</div>

Answer 5

As other people said, I think that each article should be marked with an article tag.

I also suggest to surround the whole list with an aside tag. So If you have one main article in the page (surrounded with main), it will not be affected by the other articles.

Here is a nice article about aside.