I have a bit of a confession to make. I steal code. Constantly. When I see a site that I like I almost always pop the hood and see whats inside. I figure, if the internet did not want me to do this they would not make it so easy to view source in any browser. I was snooping around in dribbble.com (I don’t have an account, so don’t ask me for an invite). Dribbble.com is a great site for looking through other peoples work, similar to ffffound.com or flickr but for graphic design. I was looking at how the have organize their front page, and more specifically, how they present their posts. The present alot of information in a small amount of space. It is also functional and pleasing. So I took a look and here is the basic idea…
<ul>
<li>
<label>Post Title</label>
<div>
Post Image
</div>
<ul class="innerul">
<li>views</li>
<li>likes</li>
<li>comments</li>
</ul>
</li>
</ul>
.innerul li {float:left;}
Nested unordered lists! ÊIt blew my mind. It was like watching the Matrix for the first time. I’m not a html expert, so maybe this is more common that I think, but I have been using this technique ever since and it works great. I would usually create a div instead of the ul and then either span’s or p tags, but this makes the code much easier to read and easier to style in my opinion. I have gone overboard on this a bit. I used this for some validation, which works, and looks great but is a bit controversial. I will explain in a minute.
<div>
<label for="username">Username</label>
<input id="username" type="text"/>
<ul>
<li class="success">
<img src="http://dl.dropbox.com/u/2450588/check.gif"/></li>
<li class="fail">
<img src="http://dl.dropbox.com/u/2450588/fail.gif"/></li>
</ul>
<label for="password">passwordÊ</label>
<input type="password" id="password"/>
<ul>
<li class="success">
<img src="http://dl.dropbox.com/u/2450588/check.gif"/></li>
<li class="fail">
<img src="http://dl.dropbox.com/u/2450588/fail.gif"/></li>
</ul>
</div>
In this code, I hide the inner ul and the reveal it depending on if the input box validates. You can view this in jsfiddle here. ÊIt definitly looks good to me. The problem is that it does add some complexity to the html code. Generally speaking, it is a good idea to keep your html to only content that is visible and relavent. There are actually a couple reasons for this: 1. ÊAccessability - I am not an expert in this area, but it is my understanding that this extra code can affect screenreaders. This makes the user experience for the blind much moreÊaggravating. 2. Code cleanliness- when someone else tries to read your code, it will be confusing when their is html that is not being shown on the page. I feel this is not a big deal, and can be easilyÊremediedÊby adding comments. But those comments also adds to the size of the html file, when the alternative is one or two lines of css. I happen to like this way because I feel it makes the code more balanced. I like having an equal amount of html, css and javascript. 
