Is this worthy of an Unordered List or a Div?

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?!) :eek:

So, here is a larger slice of my 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?! :wink:

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.

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


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

I think I might be doing the same thing. :frowning: is this wrong :frowning:

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.

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

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.

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.

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.

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 :slight_smile:

So how could I improve my markup?

Or does it look okay the way it is?

Debbie

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.

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…

<!-- ARTICLE LISTING -->

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

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

Thanks,

Debbie

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.


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


ul.stories li {
   ...
}

Now look at the next scenario:


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


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:


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

So Your left with:


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


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.

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

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

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.

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