Can I use <section> tag inside unordered list?
I know, that <section> represent a generic section of document. Usually we find heading inside.
So... I have list of products. Usually about 20 per page. Each element have:
heading,
short description (max 255 chars),
thumbnail, some details, button.
So each list item is something like section, "is a thematic grouping of content, typically with a heading".
Of course I don't use, <section> to styling purpose.
I think, <section> also could be here a wrapper for a list, and each element of list <article>.
What is your opinion?
Using a <section> tag inside an <li> tag validates (you can try this using the “Text Field” option on http://html5.validator.nu/), and the spec doesn’t seem to suggest you shouldn’t use it in this 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> tag is meant for “self-contained compositions”. I’ve never been entirely clear what that means outside of several blog posts being listed on a single page, but I think product summaries sound like a decent fit for that too. So your second idea of a <section> containing the entire list, and an <article> for each product, probably sounds best.
A List of DOs…
DO use section for each individual section of a tab switcher or content slider (if an unordered list isn’t needed)
DO use section to divide a lengthy “terms and conditions” (or similar) page into numbered sections
DO nest section elements if necessary (as you might do with the “terms and conditions” page)
A List of DON’Ts…
DON’T use section to divide content from the header and footer; use div instead (see the doctor)
DON’T use section to wrap a tab switcher for DOM manipulation or styling
DON’T use section for sidebar or other tangentially-related content boxes; use aside instead
DON’T use section just to add a border or drop shadow around something; use div instead
DON’T use section for the wrapper when implementing faux columns; again, use div instead
DON’T use section to nest elements when trying to avoid IE6′s float double-margin bug (or a similar layout-related issue); again, use div
DON’T use section to hold an individual author bio on a blog post or news article; use aside instead
Stolen from When to Use the HTML5 “section” Element
