Is it a good practice to put <article>s inside <li>s?

Question

Typically on the front page of a blog, there are several recent blog posts, and each blog post is an <article>. And usually blog comments are markuped using <article>s, too.

My question is: Is it a good practice to put those <article>s inside <li>s? I used to do that because in my own interpretation those <article>s together are presented in a way of a certain amount/quantity. So when it comes to listing a certain amount/quantity of elements, <ul> and <ol> are the best choices.

However, maybe I need to reconsider my interpretation because putting <article>s inside <li>s seems to be a misuse of <li>. And I also want to take accessibility into account. I'm not sure if doing that causes confusions to assistive technologies or not.

Franks

I think this might help: #4226301 – Darryldarryn

Answer 1

The question really comes down to: What constitutes a list? If it's a list of articles, then it should be marked up as such using <li>. The advantage for screen reader users is that screen readers can use the semantic markup to communicate useful information. For example, informing the user that they've just landed on a "list of 5 items" helps them to understand how the content is organized, and how much of it there is.

That said, if each item in the list is very long or contains complex content with lots of nested elements, I agree @IanY that this could be confusing, as it then becomes difficult for users to keep track of where they are within the list.

When blocks of content are relatively large, if a sighted user isn't likely to look at that content and identify it as a list of items, then you shouldn't use <li>. If you use <article> and a heading to mark the article title, that provides a sufficient amount of semantics to facilitate navigation for screen reader users.

Oly

Thank you. I decided to figure out this thing by asking people in WAI Interest Group, and the response I got is these <article>s should not be regarded as a list of items. Too see the the response, please visit here. – Franks

Answer 2

An article would be appropriate if it is the complete blog post. I wouldn't use it for teasers. The article tag should be for content that can stand on its own.

Weixel

I don’t think @Ian is asking if <article> is correct for blog posts or not. He’s asking whether it’s appropriate to put it inside an <li> tag. – Suisse

Yeah. Although that's not my main question, @Ted did mentioned a interesting point. So which HTML5 element would you suggest for teasers in the front page of a blog? – Franks

Seeing things from another angle, a teaser is an independent item of content, too, isn't it? Maybe we should not use microdata itemtype="http://schema.org/BlogPosting" on it, but maybe it still deserves <article>? – Franks

article is totally fine for teasers. It’s still an independent item. – Khaki

Answer 3

putting <article>s inside <li>s seems to be a misuse of <li>.

How so?

I'm not sure if doing that causes confusions to assistive technologies or not.

Not as far as I know. I’d be surprised/disappointed in the assistive technology in question if it did.

Suisse

My original concern is that an <article> is usually very long, and putting a very long content inside <li> looks odd. Thanks for the info about assistive technologies. :) – Franks

@IanY. sure, I see what you mean. I haven’t used screen readers enough to know if long content inside <li>s is a problem. – Suisse