What is the most semantic way of marking up a looping blocks?

[cosmicx]

Hello Gurus,


I am new to HTML/CSS, while learning I am already practicing and applying what I’ve been reading.

And for now, I am developing a theme for a classifieds ads website.

Now my question is, which is the better way of marking up a looping blocks?

The looping blocks that I am referring to, is the block that contains the listing. The listing block holds the image for the listing, title, description and the name of the poster.

I am deciding right now whether to used <div> blocks or using <ul> blocks.

I thought of the <div> block like this:

<div><!—block 1-->
	<some more divs>
</div>

<div><!—block 2-->
	<some more divs>
</div>

While I thought of the <ul> block like this:

<ul>
     <li> 
	<div><!—block 2-->
	     <some more divs>
        </div>
     </li>

     <li>
          <div><!—block 2-->
	       <some more divs>
          </div
     </li>
</ul>

So, what do you guys think?

[J. H. Rasmussen]

I think it's about personal preference. Personally i would go with div's, but an unordered list(<ul>) would also be a good chose. An unordered list might be a bit easier to work with if you are new to web development.

Both coding examples in your post is correct, in the unordered list example you probably don't need the divs, since you could just add style to the list items(<li>).

[cosmicx]

@J. H. Rasmussen

Thank you for posting your feedback.

I am pretty new to Web Design, in my first markup, I really did used only divs in creating my blocks. I just asked this one, because I thought It might have some SEO impact or something.

And... I've checked out youtube, the way they did their video listing blocks page. They've used un-ordered list.

Talking about seo, this field is an alien thing to me. I am yet to learn this thing as soon as I will get my site done.

[J. H. Rasmussen]

From a SEO perspective, i don't think there is a big difference between your two examples. Only thing i can think of there might make a small difference, is how many bytes the code take up. Google use page speed as one of there "metrics" to determine how pages should be ranked. Some search engine crawlers may also have a limitation on how many KB they will download, and the more code they download, the less text they download.

But if you don't use the divs in the unordered list example, then i think both your code examples will take up pretty much the same amount of space.

[RedScooter]

I stick to what makes the most sense to me, and the search engines tend to follow. In this situation, classified ads to me are not really a list, so I would go with div tags rather than a ul. I don't think either choice would necessarily give you an edge, just seems like what makes the most sense. As J.H. mentioned, you would not need the extra "div" tags inside your "li"s if you choose to use the list approach. Try to use the least amount of HTML code you can and style with CSS rather than adding divs for spacing.

As a side note, if you would like search engines to better understand what each item is, you might want to look into http://schema.org/. Bing, Google, and Yahoo have all agreed on this standard - it is a way to describe to search engines what your blocks are. For example, classified ads would tend to be considered "offers" - by adding the extra code into your HTML you can help the search engines better understand the content, and when they understand it better, they tend to rank it better.

[cosmicx]

@RedScooter and @J. H. Rasmussen

Thank for for the inputs, I just tried to apply the ul with divs inside the li, since I saw it from youtube's page.

Do the both of you may share their tips in marking up a listing block for classifieds ads?

I can't seem to style my listing block without the div from the ul li.

Do you have any idea on how to style the listing block without using div and just the li tag with css styling?

Please refer to the image.



I've accomplished to do that one, using lots of div. One div for the image and another div for the listing title and other text.

Need your expert help in here.

[RedScooter]

It would help to see the actual code, but it looks as though with the layout you are using a div would be better. LIs really work better if they only contain text, and not all the additional info like the picture, separate caption/poster/price, etc. I think if you stick with the LIs you will be forced to keep adding DIVs, which is a pain and kind of wastes code. I would suggest trying divs instead:

<div class="sold">
     <img src="foo.jpg" width="100" height="60" alt="somename"/>
     <h3>Related Ads Listing Title Goes Here.</h3>
     <span class="poster">By: some user</span>
     <p>Price: 1,000</p>
     <p class="gone">SOLD</p>
</div>

<div class="available">
     <img src="foo.jpg" width="100" height="60" alt="somename"/>
     <h3>Brand new GTX680<br/>Unopened and Unpacked.</h3>
     <span class="poster">By: some user</span>
     <p>Price: 1,000</p>
</div>

css would be something like:

div.sold, div.available {
     float: left;
     padding: 10px;
     width: 300px;
}
div.sold {
     background: #aaffaa;
     border: 1px solid #55aa55;
}
div.available {
     background: #cccccc;
     border: 1px solid #888888;
}
div.sold img, div.available img {
     float: left;
     margin: 0;
}
div.sold h3, div.available h3 {
     float: left;
     clear: right;
     font: 12px verdana;
}
span.poster {
     float: left;
     clear: right;
     font: 9px verdana;
}
div.sold p, div.available p {
     float: left;
     padding: 5px;
     background: #000000;
     font: bold 11px verdana;
}
div.sold p.gone {
     float: right;
     padding: 5px;
     background: #00aa00;
     font: bold 11px verdana;   
}

The CSS is a rough guess, but the HTML is about as clean, simple, and semantic as I think you could get with that layout.

[cosmicx]

@RedScooter

@RedScooter

Thanks for the idea, I guess the code you've provided needs css tuning.

I've got further question for you, does SEO has certain impact on css file size and html file size, and .js file size?

Anyhow, your code looks like this one in my browser.


And... here how I marked up my blocks.

<div class="listing-block">
     <div class="listing-image-container pull-left">
          <img class="listing-image" src="assets/img/image-width-100px.png"></img>
     </div><!-- listing image-->
							
     <div class="listing-info pull-left">
          <span class="related-ads-title">
               <a href="#" class="listing-title" title="Pop!" data-content="Some Content">
	            <p class="related-ads-listing-title">Brand New GTX680 Unopened and Unpacked.</p>
	       </a>
	  </span>
	  <span class="related-ads-poster">By:&nbsp;<a href="#" rel="" class="pop" title="Pop!" data-content="And here's some amazing content. It's very engaging. right?">
          <strong>Some User</strong></a>
          </span>
	  <span class="related-ads-price label label-inverse">Price: 1,000</span>
     </div><!-- listing info-->
</div><!-- listing block -->

By the way, I've seen great source of resources for my web dev training at
planningwebsites dot com. I've bookmarked it for future reading.

[cosmicx]

I forgot to ask you about this design below.


Any hint on how to mark it up?

[J. H. Rasmussen]

Originally Posted by cosmicx

@RedScooter and @J. H. Rasmussen

Thank for for the inputs, I just tried to apply the ul with divs inside the li, since I saw it from youtube's page.

Do the both of you may share their tips in marking up a listing block for classifieds ads?

I can't seem to style my listing block without the div from the ul li.

Do you have any idea on how to style the listing block without using div and just the li tag with css styling?

Please refer to the image.



I've accomplished to do that one, using lots of div. One div for the image and another div for the listing title and other text.

Need your expert help in here.

Here is an example without divs:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Title</title>
<style type="text/css">
.adListings
{
	width: 300px;
	list-style:none;
	padding: 0px;
}

.adListings li,.adListings .sold
{
	border-radius: 10px;
	border: 1px solid black;
	background: white;
	margin: 10px;
	height: 100px;
	padding: 4px;
}

.adListings img
{
	float: left;
	padding: 4px;
	border: 1px solid silver;
	box-shadow: 3px 3px 3px black;
	width: 100px;
	height: 66px;
	margin: 4px;
	background: white;
	display: block;
}

.adListings .sold
{
	border: 1px solid darkgreen;
	background: #dff0d8;
}


.adText
{
	font-size: 12px;
	width: 150px;
	float: right;
	list-style:none;
	padding: 0px;
	
}

.adText li
{
	margin: 0px;
	border: 0px;
	height: auto;
	background: transparent;
}

.adText li p
{
	font-weight: bold;
	display: inline;
}

.adText li:last-child p:last-child
{
	color: white;
	background: green;
	border-radius: 5px;
	float: right;
}

.adText li:last-child p:first-child
{
	color: white;
	background: black;
	border-radius: 5px;
	float: left;
}

.adText li:last-child p
{
	padding: 4px;
}

</style>
</head>
<body>


<ul class="adListings">
	<li>
		<img src="/images/image.jpg" alt="" />
		<ul class="adText">
			<li>The Ad Title Goes Here</li>
			<li>By: <p>User</p></li>
			<li><p>Price: 1.000</p></li>
		</ul>
	</li>
	<li class="sold">
		<img src="/images/image.jpg" alt="" />
		<ul class="adText">
			<li>The Ad Title Goes Here</li>
			<li>By: <p>User</p></li>
			<li><p>Price: 1.000</p><p>SOLD</p></li>
		</ul>
	</li>
</ul>



</body>
</html>

[cosmicx]

@J. H. Rasmussen

Buddy, I like to buy you a drink for that, but the thing is. I'm a broke dude.

Anyhow, I admire your skill. I've seen your markup. It's simple from the html side, but complex from the css side.

I'ts nice I met you here, I wish I could be your apprentice.

Thanks for taking your time in posting those codes above.

[RedScooter]

I knew someone more advanced than me would figure out the LI solution. Thanks J.H.!

Cosmicx, I would recommend going through some CSS tutorials, books, videos, whatever way you learn best. It takes awhile to get fluent, but it is worth it. If you don't have it already you may want to get the Firefox plugin called Firebug - it'll let you inspect code on any website and see the CSS behind it.

And yes, all of your file sizes (CSS, JS, etc.) do impact SEO somewhat. The less the spiders and visitors have to download, the faster your site will run, and site speed is one factor among many that search engines consider.

[J. H. Rasmussen]

You're are both welcome.

@cosmicx
Webmastering is not my main income currently, so I'm not looking for employees. But thanks for the kind words :-)

[cosmicx]

@RedScooter

Yes, I read tutorials from other css resources. I resort to this forum when I really needed some direct answers like from you guys.

JH, when I marked up my blocks, I've used a lot of class names.

From now on, I'll always try to apply the pseudo classes things, so I may not forget to use it. For now, I don't know how to use yet the nth-of-type.

And this css technique, I don't know the term for it. it's like this,

selector[class*="someClassName"]

[J. H. Rasmussen]

Originally Posted by cosmicx

For now, I don't know how to use yet the nth-of-type.

Here is an example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Title</title>
<style type="text/css">

.theAdoptionBureau p:nth-child(1)/* Comment: first p-child of .theAdoptionBureau */
{
	background: yellow;
}

.theAdoptionBureau p:nth-child(2)/* Comment: second p-child of .theAdoptionBureau */
{
	background: green;
}

.theAdoptionBureau p:nth-child(3)/* Comment: third p-child of .theAdoptionBureau */
{
	background: red;
}


.theAdoptionBureau p:first-child/* Comment: first p-child of .theAdoptionBureau */
{
	font-size: 20px;
}

.theAdoptionBureau p:last-child/* Comment: last p-child of .theAdoptionBureau */
{
	font-size: 30px;
}
</style>
</head>
<body>



<div class="theAdoptionBureau">
<p>First p-child of .theAdoptionBureau: .theAdoptionBureau p:nth-child(1) or .theAdoptionBureau p:first-child</p>
<p>Second p-child of .theAdoptionBureau: .theAdoptionBureau p:nth-child(2)</p>
<p>Third and last p-child of .theAdoptionBureau: .theAdoptionBureau p:nth-child(3) or .theAdoptionBureau p:last-child</p>
</div>



</body>
</html>

Please note: nth-child() is not supported in older web browsers like ie8. So it might be a little early to use it. first-child and last-child have been around for a while, and should be safe to use.

[cosmicx]

@J. H. Rasmussen

Thanks, I've finally applied nth-child successfully in the td's of my table.

Have a look at the image. All the 2nd td's are floated to the right. And a striped table.


This Image

[J. H. Rasmussen]

Originally Posted by cosmicx

@J. H. Rasmussen

Thanks, I've finally applied nth-child successfully in the td's of my table.

Have a look at the image. All the 2nd td's are floated to the right. And a striped table.


This Image

It's looking good, you're on the right track. Still, i think you should try to avoid tables and instead use divs or an unordered list. When you load a webpage with a table, it often takes some time before a table looks correct on the page, a problem you don't have if you use divs or a list.

[cosmicx]

thanks,

and thanks for the tip. I just thought of using table since I am showing a table data.

[eagle12]

I disagree, what you are displaying is tabular data. In this case a table should be used. Too many people think that you shouldn't use tables at all, which is wrong, you should use tables for what they are made for tabular data. IMHO lists are being misused a lot too and are quickly becoming the new table.

[J. H. Rasmussen]

There exists some nice css ways to turn divs in to tables, like display: table-cell;, display: table-column;, etc.

I usually try to avoid using tables when i design webpages, but the biggest problems with tables, is if you use them for layout. So, this just might be a good example of where to use a table

So, again, it's probably a case of personal preference.

@cosmicx:
Good example

@eagle12:
Good post