HTML5, <section> inside an unordered list

Question

Can I use the <section> inside an unordered list?

I know that <section> is a general section of a document. Usually we find the title inside.

So ... I have a list of products. Usually about 20 per page. Each item has:

• heading

• short description (max. 255 characters),

• thumbnail, some details, button.

So, each item in the list is something like a section, "is a thematic grouping of content, typically with a heading" .

Of course, I do not use the <section> target for styling.

I think <section> can also be a wrapper for a list here, and each element of a list is <article> .

What is your opinion?

Answer 1

The <section> tag inside the <li> checks (you can try this using the "Text Box" option at http://html5.validator.nu/ ), and spec doesn't seem to suggest you use it that way (see http://dev.w3.org/html5/spec-author-view/the-section-element.html#the-section-element ), so that seems fine to me.

The <article> is for "stand-alone compositions . " Ive never been completely clear what that means outside of several blog posts that are listed on one page, but I think the product summary sounds like a decent fit for that. So your second <section> idea, which contains the entire list, and the <article> for each product, probably sounds best.

Answer 2

DOs list ...

Use the DO section for each individual section of the tab switcher or content slider (if an unordered list is not needed)
DO use a section to separate long “terms and conditions” (or similar) of a page into numbered sections
If necessary, use the elements in the section of the DO jack (as you can do on the Terms and Conditions page)

DONT List ...

The section on using DONT to separate content from the header and footer; use div instead (see doctor)
The section on using DONT to migrate a tab switcher for DOM manipulation or styling
DONT for the sidebar or other tangentially linked content boxes; use DONT instead; use only to add a border or shadow around something; use div instead
DONT use a shell when implementing fake columns; again, use div instead
DONT to insert elements when trying to avoid a two-field error in IE6 (or a similar layout problem); again, use div
DONT to contain a separate biography of the author in a blog or news article; use instead

Stolen from When to Use HTML5 Element