2

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

Improve this question
2
  • It's not clear just what exactly your question is. Do you want to know if links in lists is better for navigation menus than links in divs? Commented Sep 18, 2012 at 18:06
  • I would suggest sticking with semantic HTML. Commented Sep 18, 2012 at 18:08

4 Answers 4

Reset to default
3

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

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

3

the best practice of li ul in this case , for more explanation i think this post So is usefull for you Why should I use 'li' instead of 'div'?

Improve this answer

Comments

1

I dont think your 120 links either in div or within list will slow down your page, you can control div or list using css, you dont need js for formating them. Things to consider are.... How much content you have per page, who is hosting your site, how many images per page and their size, total size of html file, and most importantly database calls.

Improve this answer

2 Comments

js wasn't for formating. i thought about future about DOM traversing and stuff like that
Navigation menu is mostly static so mostly li worls, if you willing to use js for all 120 links then div will be easier to handle them compared to li.
1

Normally the navigation will not add too much to your page load time.

You should stick to the unordered lists for another reason. Some screen reader software and search engines have learned that unordered lists are used as navigation.

And people without CSS activated will recognise the lists as navigation,too.

If you use HTML5 additionally wrap the navigation in a <nav> tag

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.