views:

503

answers:

6

I found that quite a few "toolbar" in web page is implemented with HTML tag UL and LI with style "float:left".

Fore example, with the help of FireBug it is easy to find this pattern in http://www.yahoo.com/.

Is there any reason for that? I don't think that UL and LI are invented to create toolbar.

+17  A: 

HTML was intended for semantics (what things mean), not presentation (what they look like). Since <ul> represents an unordered list, and since a toolbar is conceptually just a list of items, this is sensible. Even StackOverflow does it!

<div class="nav">
  <ul>
    <li><a href="/questions">Questions</a></li>
    <li><a href="/tags">Tags</a></li>
    <li><a href="/users">Users</a></li>
    <li><a href="/badges">Badges</a></li>
    <li><a href="/unanswered">Unanswered</a></li>
  </ul>
</div>
John Feminella
<pendant>HTML has evolved to increasingly separate semantics from presentation</pendant>. At the start there was no separation (this can be seen in the <font>, <b> and <i> tags for instance).
Richard
Well, to clarify: The intention was there, but I think the presentational elements you're describing crept in because of practical considerations in place at the time. CSS wasn't invented yet, for example. In any case, we've come a long way since then (and thank goodness for that).
John Feminella
The DIV isn't necessary...
J-P
@JimmyP: Hey, I didn't write StackOverflow! ;)
John Feminella
Good answer. I would also add that, AFAIK, the reason <ul> was chosen specifically (instead of say <dl>) is because screen readers for the visually impaired handle <ul> very well.
jhs
+3  A: 

UL and LI are for lists. And you are listing a bunch of links (sub-navigation, tools(?), etc.)

stesch
A: 

One possible reason - they have reasonable fallback behaviour one low-grade clients - i.e. it becomes a tree. But in reality <ul> and <li> really just describe nested list data; with css controlling the layout, their original intent is, largely, just a convenience.

Marc Gravell
A: 

Probably because someone who believes web standards are the one true way marked them up as such. After all, a toolbar is a list of icons!

But my personal approach to markup is that when you're creating a web app that involves some app UI element like a toolbar, you shouldn't necessarily have to build everything according to HTML web standards since they weren't created for marking up applications, but for documents. In which case, just use whatever works best for you (like a div with a list of spans, using classnames to specify contextual semantics for your app).

Note: my answer refers specifically to the use of toolbars, not regular navigation in websites.

Rahul
Why did this get voted down? If you vote something down, please explain why.
Rahul
Wasn't me, but my guess is: 1) your advise not to follow the web standards and 2) your argument for this because of a difference between web documents and web apps. I disagree with both (but not strongly enought to downvote myself)
Treb
A: 

One reason not yet mentioned is that writing menus as lists helps search engines parse your site better. Top of the line search engines will be able to figure out nested divs and even tables (in some cases) but it's always better to make the crawler's job easier to avoid possible confusion.

EDIT:

Links as requested:

http://blog.fryewiles.com/seo/03-04-2008/ul-titles-nesting-uls-for-better-seo http://importantseotips.blogspot.com/2008/09/why-using-div-is-better-than-table-seo.html http://webdev.entheosweb.com/2008/02/24/why-i-switched-to-a-tableless-design/

I actually couldn't find many articles specifically addressing ul tags for SEO, so I will have to qualify my answer by declaring my opinion.

I am of the opinion that using an unordered list to present menuing will assist crawlers in correctly parsing and indexing your site. Generally, well organized data (such as a list) lends itself to better and speedier crawlability. Organizing your data well will significantly improve the likelihood of a bot correctly finding your keywords, and ranking your site.

(Now if only my opinion on the subject were as valuable as Larry Page's. ;-) )

Joel Potter
i've never heard of search engines having troubles with tables, nested divs or any other form of markup... do you have any links to more info?
nickf
I've read it a few places. I'm on my phone right now which doesn't have copy/paste but I'll get you a few links when I get back to a regular computer.
Joel Potter
@nick: links and clarification added.
Joel Potter
A: 

By allowing use of border-left/right, it also avoids the practice of forcing unsemantic separators (e.g. vertical bars) into your code for presentation purposes, which also adds unnecessary content for screen readers to read out. e.g.

<div class="nav">
    <a href="/questions">Questions</a> |
    <a href="/tags">Tags</a> |
    <a href="/users">Users</a> |
    <a href="/badges">Badges</a> |
    <a href="/unanswered">Unanswered</a>
</div>
Alistair Knock