Do menus always belong as lists?

[skunkbad]

In my current project, I've come across the desire, perhaps due to laziness, or perhaps because it's just easy, to create some horizontal menus that are nothing more than text links with bullets:

<p>
	<a href="/terms">Terms of Use</a><span> • </span>
	<a href="/privacy">Privacy</a><span> • </span>
	<a href="/accessibility">Accessibility</a><span> • </span>
	<a href="/sitemap">Sitemap</a><span> • </span>
	<a href="/contact_us">Contact Us</a>
</p>

I'm just having issues with what I feel is my ethical obligation to provide my customer with quality code, and not what just looks good on screen. Does it really matter? Do you think that there are any SEO benefits either way? Is accessibility effected either way?

The one thing I see as a benefit is the reduction of CSS required to create the menu. There is very little CSS required to style the code compared to the equivalent as a list.

[noonnope]

it's not semantic. you may or may not have a <p> in there somewhere, but what you're describing is a list. a list of links. which then you can call it a menu. horizontal or otherwise, that's not html's job. that's css's job.

since there are many ways to simulate a design, relying on semantics is what keeps a good markup above.

i see that you are probably looking at controlling the appearance by markup. but that's css's job. and if you think about what happens when there is no css possible or applied, or you don't like how the lists look rendered, you need to trust UAs and the default appearance. you need to worry about semantics when it comes to html and css when it comes to appearance.

a list can easily became a horizontal menu. it only needs css. though there are a few cases when css may not be possible, and may look like the default appearance it's causing you a disadvantage, you should stick to the recommendations: semantic html, css for presentation. don't try to fix it by ruining your markup.

i don't know about SEO, but accessibility is affected for sure by your wrong element in the wrong place serving a wrong purpose. how about when you look at a menu at the restaurant, and you have a continuous line of courses that you can't distinguish among.

[Stevie D]

I'm just having issues with what I feel is my ethical obligation to provide my customer with quality code, and not what just looks good on screen. Does it really matter? Do you think that there are any SEO benefits either way? Is accessibility effected either way?

There is no reason why you can't achieve the same effect using CSS on a list, which would be a better way of doing it. For a start, it streamlines the HTML and gets rid of the cruft whose only purpose is to set a particular layout - which is an inappropriate use of HTML.

It will definitely affect accessibility if you use HTML elements incorrectly, as you have done here - assistive technology relies on content being given the right semantic markup, and failing to do so will make it harder for people using those systems to access and navigate your site.

It may have a small impact on SEO, in that it will help search engines to understand that that bit is your site navigation so it knows how to treat the links, but to be honest, Google is so used to working around bad code that it will be able to deal with the setup you've got pretty well.

[AlexDawson]

I would say the accessibility reasons are stronger than the semantic reasons.

Screen readers can jump between list items fairly easily, ensuring that your menus are marked up correctly will just make the whole process more logical.

[skunkbad]

I decided to convert my menus to lists, based on all of your comments. I ended up using a background image for the bullet, because I need to support IE6 and 7, so :before or :after wasn't an option. If there was some javascript that made IE6 and IE7 know what :before and :after are, that would be really cool, but I also try not to rely on javascript. I guess the markup isn't too extensive, and I was just being lazy.

#footer-text ul li{display:inline;padding-right:.1em;}
#footer-text ul li.bull{background:url(/img/theme/original/bullet.gif) no-repeat 0 .4em; padding-left:.9em;}
#footer-text ul li a {color:#fff;text-decoration:none;font-size:108%;font-weight:bold;}

[Stomme poes]

I just use background images for cross-browser fun. Though you could give one more try and see if, after stating display: inline, you restate display: list-item on the li's and see if IE picks it back up.

I learned about a month? ago that apparently it's totally legal (and works) to put display: list-item on just about anything. Even the anchors themselves.