8

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?

PeeHaa
  • 71,436
  • 58
  • 190
  • 262
Mr Sooul
  • 659
  • 2
  • 9
  • 19

2 Answers2

6

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.

Paul D. Waite
  • 96,640
  • 56
  • 199
  • 270
  • In HTML5 validator we can even put whole page in `
    ` tag, but it's not a point. Yes, product summary fit... Hmm... I will consider this...
     – Mr Sooul Aug 24 '11 at 10:12
  • I see your point re validation, it’s just a good first thing to check. Don’t worry too much about the semantic considerations — they’re necessarily fuzzy. – Paul D. Waite Aug 24 '11 at 11:46
0

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

Pedro Lobito
  • 94,083
  • 31
  • 258
  • 268
  • 3
    Not sure I’d put much stock into that article. It seems to think that when the spec says “ A Web site’s home page could be split into sections for an introduction, news items...” that it’s saying each news item should be a `
    ` instead of an `
    `, when it seems to actually mean that a `
    ` would contain all the news items, each of which would presumably be marked up as an `
    `.
     – Paul D. Waite Aug 24 '11 at 10:10