SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict skunkbad's Avatar
    Join Date
    Apr 2008
    Location
    Temecula, CA
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Do menus always belong as lists?

    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:

    Code:
    <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.

  2. #2
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  3. #3
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by skunkbad View Post
    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.

  4. #4
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    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.

  5. #5
    SitePoint Addict skunkbad's Avatar
    Join Date
    Apr 2008
    Location
    Temecula, CA
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

    Code:
    #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;}

  6. #6
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •