Are Unordered Lists (<ul>) SE Friendly yet?

Wondering what the current consensus is

[dataguy]

I've got some web site with HUGE menus and I'm considering using unordered lists with javascript to make the menus collapse and expand. These will be standard a href links, not javascript location links. I certainly don't want to hurt the rankings of any of my sites, so I'm wondering what the consensus is. Can crawlers (especially the G-bot) follow these links and give the same credit as a regular link?

Thanks!

[tedster]

Lists definitely make the best practice for menus, both semantically and for search engines. Just make sure your javascript is only used to make the sub-lists change in visibility (expand and contract the whole menu) and NOT to make the link itself work by changing the location with javascript.

Can you show a simplified example of the code? That's the only way I'd feel comfortable say "absolutely yes".

[dataguy]

Can you show a simplified example of the code? That's the only way I'd feel comfortable say "absolutely yes".

That would be great. Here is a snippet of the HTML:

<div onClick="JavaScript: outlineAction();">
<ul>
<li class="Main">Animals &amp; Pets
<ul>
<li class="Item"><a href="Category29.htm">Cats</a></li>
<li class="Item"><a href="Category30.htm">Dogs</a></li>
<li class="Item"><a href="Category31.htm">Horses / Livestock</a></li>
<li class="Item"><a href="Category102.htm">Other Pets</a></li>
<li class="Item"><a href="Category101.htm">Reptiles</a></li>
</ul>
</li>
<li class="Main">Arts &amp; Crafts
<ul>
<li class="Item"><a href="Category22.htm">Body Art</a></li>
<li class="Item"><a href="Category23.htm">Crafts</a></li>
<li class="Item"><a href="Category24.htm">Galleries</a></li>
<li class="Item"><a href="Category25.htm">Literature</a></li>
<li class="Item"><a href="Category26.htm">Organizations</a></li>
<li class="Item"><a href="Category27.htm">Photography</a></li>
<li class="Item"><a href="Category28.htm">Poetry</a></li>
</ul>
</li>
</ul>
</div>

[tedster]

Beautiful - right on the money semantically and for spiders. You are home free!

[bedlam]

Dataguy, one thing you may want to consider is altering your menu so that it doesn't include all those unnecessary class attributes on the <li>s.

The 'class="Main"' attributes on list items that contain lists are probably useful, but the 'class="item"' attribute on every list item is just not needed. Try something like this instead:

1. Add an attribute like 'id="navigation"' to the outermost <ul> (or its parent <div>)
   
2. Then, where your stylesheet currently has '.item { ... }', try this instead: '#navigation li { ... }
   
3. Enjoy the fact that your pages just became that much easier to edit, and that the text:markup ratio just moved in favour of text...
   

-B

[encyclo]

One little detail that might help out: you may well find that you can simplify your markup a bit. If you add the Item class to the

ul

element like this:

<div onClick="JavaScript: outlineAction();">
<ul>
<li class="Main">Animals &amp; Pets
<ul [b]class="Item"[/b]>
<li><a href="Category29.htm">Cats</a></li>
<li><a href="Category30.htm">Dogs</a></li>
<li><a href="Category31.htm">Horses / Livestock</a></li>
<li><a href="Category102.htm">Other Pets</a></li>
<li><a href="Category101.htm">Reptiles</a></li>
</ul>
</li>
<li class="Main">Arts &amp; Crafts
<ul [b]class="Item"[/b]>
<li><a href="Category22.htm">Body Art</a></li>
<li><a href="Category23.htm">Crafts</a></li>
<li><a href="Category24.htm">Galleries</a></li>
<li><a href="Category25.htm">Literature</a></li>
<li><a href="Category26.htm">Organizations</a></li>
<li><a href="Category27.htm">Photography</a></li>
<li><a href="Category28.htm">Poetry</a></li>
</ul>
</li>
</ul>
</div>

In your CSS you can style the list elements like this:

.Item li {
// your styles here
}

On a big list, that will save you a lot of markup weight. :)

[tedster]

javascript to make the menus collapse and expand.

This means that a single .class won't work - but you can still follow the basic advice here and give each ul its own #ID -- then get the javascript to switch the display characteristics of an entire ul by changing the display: rule for ID, rather than addressing each item.

[makzan]

What about html lists? Does it make a difference to search engines if it's just a straight html list or a javascript list?

[tedster]

What is important for spiders is that the url for the link is not inside some kind of javascript call. There must be a simple anchor tag <a href="[url goes here]">link text</a> somewhere on the page. If the href is set equal to a javascript function that, for example, changes the location, then no indexing can happen - because search engines cannot risk automatically parsing javascript. So <a href="#" onclick="location.href=[url]"> will not work.

If a url is readable as text within javascript, then spiders MAY try to spider it and perhaps include the page in the index. But in such a case link pop, pagerank etc will not be passed.

[dataguy]

This makes sense, it's just that I always read that you should NEVER use javascript with your links. Just wanted to confirm that this is OK.

[2by4]

If javascript is simply opening or closing statically coded HTML, like on chevrolet.com, there is no problem using javasript.

eg: <li><a href="link.htm" onclick="activate_menu">link 1</a></li>
If, on the other hand, the javascript is actually writing out the menu, like way too many menuing systems do, there is a huge problem using javascript.

[g1smd]

Good advice on using class on the parent.

[elgumbo]

Dataguy, have you seen the CSS menu by suckerfish (do a google search) it's practically all achieved by CSS, with just a few lines of javascript to help it along.

Could be a stylish solution to your problem.

[g1smd]

The menu on the Chevrolet site uses CSS and JS to very good effect.