Why is it common to create toolbar with tag <UL> and <LI>?

Question

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.

Answer 1

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>

Answer 2

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

Answer 3

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.

Answer 4

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.

Answer 5

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

Answer 6

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>