I’m developing a website and i used to use unordered lists for my navigation but some time ago i came across some article from from yahoo developer blog. In this article they explain how to improve your loading time and there are plenty of performance improvement tipps and tricks. Now i’ve tried to google about semantic of html and wheter to use ul lists of links or just a bunch of ‘a’ tags within a ‘div’ or any other semantically apropriate for the purpose element. Actually everybody encourages to use them and for me it already feels natural, but i’ve counted my links and approximately i already have about 120 (maybe more) links(each inside list element). What whould you suggest? or could someone suggest good article about it?
<ul>
<li>
<a href="#">Link</a>
</li>
</ul>
or
<div>
<a href="#">Link</a>
</div>
P.S. Oh, and don’t be surprised about my links they are there for a reason:)
From the CSS Rendering point of view, I’d go with the unordered lists because I think it leads to cleaner CSS; also, there’s probably way more div’s in your site so when the browser is searching for a match it doesn’t have to attempt to match to every div style. However, this really is a micro-optimization and you shouldn’t worry much about it unless you profile the page and see its a problem.
As for improving page performance, there are many other avenues to go down (cache, minifying, reducing round trips). I suggest you reading this. It’s Google’s thoughts on best practices for web performance. Also, check out some of the profiling tools in your favorite web browser (which should be Chrome).