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

**DoubleDee** · Jan 11, 2012 20:14

While minding my own business in another thread, oddz pointed out that my code would be better suited as an Unordered List versus Div's.

It even caused him to say...

I don't mean to go deathshadow on you or anything but using divs for a list is not semantic.

(Sounds pretty serious?!)

So, here is a larger slice of my code...

HTML Code:

<body>
	<div id="pageWrapper" class="clearfix">
		<div id="pageInner">
			<!-- BODY HEADER -->
			<?php	require_once(WEB_ROOT . 'components/body_header.inc.php');	?>

			<!-- MIDDLE COLUMN -->
			<div id="pageMidCol_2">

				<!-- ARTICLE LISTING -->
				<div id="boxArticleIndex">
					<h2>Small-Business Articles</h2>

					<!-- Summary #1 -->
					<div class="articleSummary">
						<h3>Postage Meters Can Save You Money</h3>
						<div class="image">
							<a href="<?php echo BASE_URL; ?>articles/postage-meters-can-save-you-money">
								<img src="<?php echo BASE_URL; ?>images/PostageMeter.png" width="170"
									alt="Picture: Postage Meter.  Credit: John Doe, Wikimedia Commons."
									title="Picture: Postage Meter.  Credit: John Doe, Wikimedia Commons." />
							</a>
						</div>
						<div class="date">Published: December 31, 2011</div>
						<p>When Office Managers are looking for places to save money, postage probably isn't the first thing that comes to mind.  However, just a few trips per week to the Post Office can cost your small-business more in lost productivity and money than you think!</p>
						<p><a href="<?php echo BASE_URL; ?>articles/postage-meters-can-save-you-money">Learn how Postage Meters can save you Time & Money</a> and help your business focus on more important issues like growing your business!</p>
					</div>

					<!-- Summary #2 -->
					<div class="articleSummary">
						<h3>Consider Becoming an S-Corporation</h3>
						<div class="image">
							<a href="<?php echo BASE_URL; ?>articles/consider-becoming-an-s-corporation">
								<img src="<?php echo BASE_URL; ?>images/S-Corp.png" width="100"
									alt="Picture: S-Corp.  Credit: John Doe, Wikimedia Commons."
									title="Picture: S-Corp.  Credit: John Doe, Wikimedia Commons." />
							</a>
						</div>
						<div class="date">Published: December 31, 2011</div>
						<p>When most people think of "corporations" they think of mega-companies like Wal-mart, Microsoft, General Motors, Citibank, and so.  However the reality is that all it takes is one person to become a "corporation", and now might be the right time for your small-business to consider making the switch.</p>
						<p>Incorporating your small-business isn't nearly as difficult or as expensive as you might think, and it offers benefits that may not be so obvious.  <a href="<?php echo BASE_URL; ?>articles/consider-becoming-an-s-corporation">Learn how S-Corporations provide financial benefits and legal protection</a> that you need!</p>
					</div>

I think oddz may be on to something here, but who knows?!

What do you think could be done to take my code to the next level?

Thanks,

Debbie

Off Topic:

P.S. Is "going deathshadow" on someone a verb or verbal phrase similar to "Googling" something?!

**Stevie D** · Jan 12, 2012 07:25

Nope, I don't see anything there that I would code as a <ul>. It's true that you've got a lot of nested <div>s, and it may be that with smarter CSS and descendent selectors you could get rid of one or two of them, or maybe leave out some classes or IDs (without seeing the whole page, it's difficult to know how necessary they all are), but realistically each <div> looks like it is serving a purpose so I don't see anything major wrong with the structure.

**oddz** · Jan 12, 2012 11:23

Are you kidding it is a clear list of related items. I mean… having to do this it seems pretty clear to me:

HTML Code:

<div class="articleSummary">...</div>
<div class="articleSummary">...</div>
<div class="articleSummary">...</div>
<div class="articleSummary">...</div>
<div class="articleSummary">...</div>
...

**Sega** · Jan 12, 2012 11:32

I think I might be doing the same thing.

is this wrong

**xhtmlcoder** · Jan 12, 2012 12:01

The DIV is a generic style container on the whole thus is fairly neutral since DIV elements define content block-level but impose no other presentational idioms on the content.

Personally I cannot see any list appearing - just from the sample itself - though they do seem to be standalone articles with associated headings, which is what they are at the moment.

**oddz** · Jan 12, 2012 16:58

I'm surprised I'm the only one who believes that should be a list considering it is a list of aggregated content.

**Max Height** · Jan 12, 2012 18:02

I see a list of article summaries.

I'm sort of with oddz on this one except I might use a definition list <dl> in this case instead of a <ul>

I would put the contents of the <h3>s in the <dt> and the rest of the content relating to the <h3> in a <dd>

**xhtmlcoder** · Jan 13, 2012 05:10

It is a collection of article (summaries) which could easily be placed in a table but there is nothing to strongly suggest it is an inline list of items and all CSS names must be discounted. Only in the loosest sense it becomes an inventory.

**TechnoBear** · Jan 13, 2012 05:40

For what it's worth, it doesn't look like a list of any sort to me, either. I'm a great fan of definition lists, but even I wouldn't use one here.

**oddz** · Jan 13, 2012 10:34

I would still use a list but the crowd has spoken.

As for a definition list that generally leads to more problems than it solves considering all content for a single entry isn't contained within a single element. That decision *may bit you in the *ass when it comes to achieving certain design goals. Not to mention a true heading tag could not be used when one is using a definition list if in fact the title/heading for an article would be contained in a dt. That can have some negative SEO implications.

**Max Height** · Jan 13, 2012 15:08

Originally Posted by oddz

I would still use a list but the crowd has spoken.

I would hardly call the opinions of a handful of people in this thread a "crowd" or necessarily a representative view of what is actually thought out there on the cyberweb. You would have to poll multiple websites and get a fairly large response for the opinions to be valid statistically.

I guess the markup you would use depends on the final layout and styling you need. If I wanted to put a border around each article and its heading I probably wouldn't use a <dl> and I would probably us a <ul> or <div>s similar to the op. At the end of the day, as long as the markup passes the w3c validator with a strict doctype then it really doesn't matter a rat's clacker whether some sort of list is used or not. Well, it doesn't matter to me at least

**DoubleDee** · Jan 13, 2012 19:28

Originally Posted by TechnoBear

For what it's worth, it doesn't look like a list of any sort to me, either. I'm a great fan of definition lists, but even I wouldn't use one here.

So how could I improve my markup?

Or does it look okay the way it is?

Debbie

**imaginekitty** · Jan 13, 2012 20:36

Originally Posted by oddz

I'm surprised I'm the only one who believes that should be a list considering it is a list of aggregated content.

I see what you're saying but where do you draw the line? Is everything with a repeated pattern a list of something? Is a bunch of paragraphs a list <p>? Aggregation lends itself to DIV or <article> in this case.

**imaginekitty** · Jan 13, 2012 20:37

Originally Posted by DoubleDee

So how could I improve my markup?

Or does it look okay the way it is?

Can you possibly show the actual layout or maybe a link? There may be extraneous DIVs. Are they all necessary?

**DoubleDee** · Jan 13, 2012 21:07

Originally Posted by imaginekitty

Can you possibly show the actual layout or maybe a link? There may be extraneous DIVs. Are they all necessary?

Just focus on everything below...

Code:

<!-- ARTICLE LISTING -->

Paul O' helped me with my page layout, so that is rock-solid!

The code below the above comment is mine, so that is certainly prone to errors or "newbie-ness"!

Thanks,

Debbie

**oddz** · Jan 14, 2012 13:46

Originally Posted by imaginekitty

I see what you're saying but where do you draw the line? Is everything with a repeated pattern a list of something? Is a bunch of paragraphs a list <p>? Aggregation lends itself to DIV or <article> in this case.

When dealing with a master page that aggregates content with a link to disclose a detail page for a single entity. The other scenario is a list of featured, most recent, etc items shown as an aside or something.

Another reason for using a list instead of nested divisions is easily targeting the container for each item without picking up any other divisions inside the container. Granted this can be completely avoided using a child selector but unless you have completely phased out IE6 it is worth a mention.

HTML Code:

<ul class="stories">
<li><div>A div used for something important</div></li>
<li><div>A div used for something important</div></li>
<li><div>A div used for something important</div></li>
<li><div>A div used for something important</div></li>
</ul>

Code CSS:

ul.stories li {
   ...
}

Now look at the next scenario:

HTML Code:

<div class="stories">
<div><div>A div used for something important</div></div>
<div><div>A div used for something important</div></div>
<div><div>A div used for something important</div></div>
<div><div>A div used for something important</div></div>
</div>

Code CSS:

div.stories div { /* this will also affect the div with the info */
   ...
}

The only solution other than applying the same class to each division would be this:

Code CSS:

div.stories > div { /* This will not work properly in IE6 though... */
   ...
}

So Your left with:

HTML Code:

<div class="stories">
<div class="story"><div>A div used for something important</div></div> <!-- this mark-up sucks and is no different than using a list and applying the same class to each item - fail -->
<div class="story"><div>A div used for something important</div></div>
<div class="story"><div>A div used for something important</div></div>
<div class="story"><div>A div used for something important</div></div>
</div>

Code CSS:

div.stories .story {
   ...
}

It is much more common to have divisions within each item than lists. So ul li { } can be used pretty safely.

That said I don't think using nested divisions are necessarily wrong for aggregated content but I do believe using a list is more semantic – if we are getting picky.

**imaginekitty** · Jan 14, 2012 15:04

Originally Posted by oddz

... That said I don't think using nested divisions are necessarily wrong for aggregated content but I do believe using a list is more semantic – if we are getting picky.

I can't offer a complete answer because I'm recovering from surgery and can't sit at the computer. I'm stuck typing on my phone.

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.

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.

**oddz** · Jan 14, 2012 15:39

Originally Posted by imaginekitty

I can't offer a complete answer because I'm recovering from surgery and can't sit at the computer. I'm stuck typing on my phone.

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.

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.

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

**imaginekitty** · Jan 14, 2012 15:45

Originally Posted by oddz

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.

**deathshadow60** · Jan 14, 2012 18:02

A good rule of thumb is to ask "does this already have a semantic meaning?" without the extra tags with meaning around them. You have numbered heading tags saying that they are the start of a new subsection. You have paragraph tags which are pretty much clearly the content of those sections...

So why would you put more tags with meaning around them? It's redundant. That's where I draw the line on list items -- if you are going to have headings, they already have semantic meaning, don't add more meaning around it.

Which again, is also my problem with HTML 5's new SECTION, HEADING, NAV and FOOTER tags... which result in wrapping extra meaning for nothing around tags and elements that should already be semantic; used to be stacking semantic meanings was considered a bad thing. As Dan often said, the people who did endless nested tables for nothing, now just do endless nested DIV for nothing -- in a way I'm glad he never got to see the "endless nested HTML 5 tags for nothing" repeating the same idiocy.

It's WHY we use DIV to group tags as sections -- as DIV does NOT imply any semantic meaning to what it's wrapping. You want a clear section you don't need section, you need a heading to say you're starting a section or a HR to indicate a change in topic without a heading or as a major section/topic break. (and if need be, hide them for screen with CSS -- so they're still there for all the other media targets as needed).

**DoubleDee** · Jan 14, 2012 22:57

Originally Posted by deathshadow60

A good rule of thumb is to ask "does this already have a semantic meaning?" without the extra tags with meaning around them. You have numbered heading tags saying that they are the start of a new subsection. You have paragraph tags which are pretty much clearly the content of those sections...

So why would you put more tags with meaning around them? It's redundant. That's where I draw the line on list items -- if you are going to have headings, they already have semantic meaning, don't add more meaning around it.

It's WHY we use DIV to group tags as sections -- as DIV does NOT imply any semantic meaning to what it's wrapping. You want a clear section you don't need section, you need a heading to say you're starting a section or a HR to indicate a change in topic without a heading or as a major section/topic break. (and if need be, hide them for screen with CSS -- so they're still there for all the other media targets as needed).

So I hear you saying what I have is okay...

Debbie

**deathshadow60** · Jan 15, 2012 00:55

Originally Posted by DoubleDee

So I hear you saying what I have is okay...

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.

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...

**imaginekitty** · Jan 15, 2012 11:57

Originally Posted by deathshadow60

... It would probably also look stupid with CSS disabled -- another sign that you may not be doing it right. ...

That's it! I knew there was a code smell caused by using/abusing lists for this but I couldn't put my finger on it.

**oddz** · Jan 15, 2012 12:19

Originally Posted by deathshadow60

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.

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...

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:

The ul element, the name for which is an abbreviation of unordered list, is used to [b]group a collection of items together in a list, but in a way that doesn’t suggest an order of precedence or importance. The ul might be used for anything from a simple shopping list to a collection of links.

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.

**imaginekitty** · Jan 15, 2012 12:57

Oddz, I'd like to see a reply to post #19 before continuing.

User Tag List

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

Thread Tools

Display

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

Bookmarks

Bookmarks

Posting Permissions