Is this worthy of an Unordered List or a Div??

[oddz]

this:

The examples seemed unnecessarily wordy to show your point. I'd have to know why you used doubled up DIVs instead of aggregating them in one.

That was merely an example for a generic case.

[imaginekitty]

No, this:

Well to that I say if a list item was only meant to have text it would be an inline rather than block element.

You're replying to a statement I didn't make.

[oddz]

You said:

A list-item to me is one element, I suppose. Beyond that they seem to get less meaningful to me. That's just me though.

I replied stating if that was the way a list item was *meant* to function than it would be an inline element rather than block. Though considering a list item is a block element having multiple block elements nested inside is perfectly acceptable in terms of the specs.

What you are really saying is this is acceptable:

<ul>
  <li>Eggs</li>
  <li>Cheese</li>
  <li>Milk</li>
  <li>Papadums</li>
  <li>Tickle-me Elmo</li>
  <li>Dr Who Remote Control Dalek</li>
</ul>

However, this is forbidden?

<ul>
  <li><h3>Eggs</h3> <img src="..."></li>
  <li><h3>Cheese</h3> <img src="..."></li>
  <li><h3>Milk</h3> <img src="..."></li>
  <li><h3>Papadums</h3> <img src="..."></li>
  <li><h3>Tickle-me Elmo</h3> <img src="..."></li>
  <li><h3>Dr Who Remote Control Dalek</h3> <img src="..."></li>
</ul>

Which doesn't make much sense considering either way you look at it with or without other elements like the image it is still a list.

[imaginekitty]

You implied that I said only text belongs in the LI. That wasn't my point. An image and caption can be acceptable.

Lists of sentences in a list of paragraphs in a list of articles ... etc. My point was the more you aggregate the less the list means.

I wouldn't aggregate the books on a shelf at the library into one long book. We're getting uncomfortably close to doing that.

Just my opinion.

[DoubleDee]

Certainly better than abusing a list for it. It would probably also look stupid with CSS disabled -- another sign that you may not be doing it right.

I think that my Articles Listing page look very good with CSS off.

See the attached and judge for yourself...

Attachment 58762

Though I understand I'm one of the few developers who writes his ENTIRE HTML to within 5% of the final version before I even think layout or CSS...

That's a great practice and while I like your suggestions!!


Debbie

[DoubleDee]

Using a list is not abusive considering the content is a LIST of aggregated content. Who cares what it looks like with CSS disabled considering structure should have as little as possible to do with appearance.

Apparently the SP HTML reference is incorrect:


That seems awfully close to what is being done. In that there is a collection of items but specially a collection of links used for navigation. No where does it say that the collection of links can't have other content associated with it like a paragraph or image.

Oddz does make a good point...


Debbie

[deathshadow60]

Which doesn't make much sense

It makes PERFECT sense since by using headings you are basically saying list TWICE... since the heading indicates the start of a subsection, and you have multiple sibling subsections (in the case of your example, subsections of the h2 preceeding it) -- using a list is applying extra meaning that isn't needed and can in fact make it confusing -- CSS off confusing, screen reader confusion, etc.

It's why the moment you have heading tags, they're no longer list items. Just because it's a "list" of things does NOT automatically mean it belongs in a UL or OL -- if you already have tags breaking it into sections semantically!

NOT that there's sufficient content in the IMG example for those to even BE headings in the first place.

[xhtmlcoder]

They are basically like I mentioned before in the example they were standalone they have their own; heading, images and multiple paragraphs including links to another article of so an inline list would probably be overkill.

Let's look at SP reference; even though it's not official, it talks about lists within pages not about articles that are standalone. Probably the wildest it gets being navigation even then it's more or less limited to two to three words or a brief sentence that may constitute a list.

[Max Height]

Which doesn't make much sense considering either way you look at it with or without other elements like the image it is still a list.

Although I sort of agreed with you initially, because I too see the op's content as a list of article summaries, I disagree with you regarding putting <hx>'s in a list of any sort (ol, ul, dl). Putting a heading in a <li> might still pass the w3c validator, and that make's it "technically" acceptable, but on principle and my interpretation of html semantics, I wouldn't put a <hx> in a list.

That is why I originally suggested using a <dl> if you want to go the list route in the markup (and there is no 100% correct answer on whether to use a list or not in the op's case). If I went the list route, I would use a <dl> and would put the contents of the <h3>'s in a <dt> and the rest of the summary in a <dd>

[DoubleDee]

It makes PERFECT sense since by using headings you are basically saying list TWICE... since the heading indicates the start of a subsection, and you have multiple sibling subsections (in the case of your example, subsections of the h2 preceeding it) -- using a list is applying extra meaning that isn't needed and can in fact make it confusing -- CSS off confusing, screen reader confusion, etc.

It's why the moment you have heading tags, they're no longer list items. Just because it's a "list" of things does NOT automatically mean it belongs in a UL or OL -- if you already have tags breaking it into sections semantically!

I agree with DeathShadow.

NOT that there's sufficient content in the IMG example for those to even BE headings in the first place.

Are you saying that my Article Title (e.g. "Consider Becoming an S-Corporation") for a given Article Summary is NOT worthy of being a Heading?!

I hope not, because that would be insane?!


Debbie

[deathshadow60]

I hope not, because that would be insane?!

I was referring to the example code oddz put up that had H3 followed by IMG tags inside LI, not your code.

<li><h3>Tickle-me Elmo</h3> <img src="..."></li>

There's no reason for that to even be a heading if all that's there is a IMG. MAYBE if there was a paragraph of text and some real content... but at that point it would have the heading, WITHOUT the list.

To say it again, a hefty part of semantics is not repeating oneself... If something already has a meaning, it's probably inappropriate to put any extra meaning around it.... a concept lost on the creators of the new HTML 5 tags.

[imaginekitty]

... a hefty part of semantics is not repeating oneself... If something already has a meaning, it's probably inappropriate to put any extra meaning around it....

I'll stand with you on that.

... a concept lost on the creators of the new HTML 5 tags.

Those meddling kids!!

[oddz]

I'm still failing to understand how using a heading inside a list item duplicates meaning. A list item is not heading, it is merely a list item which has very low priority in the structure of a document.

That said, placing meaning around something rather than basing it on some type of delimiter which may or may not exists is a very loose and none concrete way to do things imo. Not to mention lacking a wrapping item is very likely to cause issues when trying to achieve design goals. I mean… I have worked on enough sites to know when I'm kicking myself in the @ss in terms of achieving design goals for little gain because of avoiding a wrapper or two.

[deathshadow60]

I'm still failing to understand how using a heading inside a list item duplicates meaning.

LI tags divide into sections with semantic meaning -- list items... heading tags divide things into sections by the use of "this is the start of a new section" -- both have their own semantic meaning and putting one inside the other just doesn't make sense -- it's why we have DIV, to DIVide the page into sections (suck on that HTML 5 'section' tag) without changing or applying any extra semantic meaning... since each section would already be broken into subsections with meaning thanks to the headings, there's no reason to further break it up semantically. As a rule of thumb the moment there are headers, I stop using LI.

I mean, you have a book -- with chapters... Is each chapter a line-item? You have a set of newspaper articles -- is every article on the page a list item? OF COURSE NOT.

I also base it on the relationship -- things like articles are often unrelated; lists are for RELATED items. (just as TABLE is for data where the rows and columns have a semantic relationship).

I mean… I have worked on enough sites to know when I'm kicking myself in the @ss in terms of achieving design goals for little gain because of avoiding a wrapper or two.

I do agree on that point -- it's what's wrong with a lot of things like Holy Grail layout; all that hacking and instability and breaking when the new flavor of the month browser comes along, JUST to avoid one extra DIV... Thing is to me LI is just the WRONG wrapper for the job here... assuming it needs one at all; and if it DOES need one it would be strictly for presentational purposes, which is why the semantically neutral DIV makes the most sense.

Basically, it's already semantically broken up by the headings, you don't need to semantically break it up further so the only legitimate reason to add wrappers is NOT for semantics... as such a tag with a semantic meaning is the wrong one.

Kind-of the opposite of "If you are choosing tags based on their default appearance, you're choosing the wrong tags"... we have "If you're choosing a tag to add the same semantic meaning another tag is already giving you..."