SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    848
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Semantically correct menu

    Hi I have made the menu below, is it ok to leave it as it is or is it better to have it in an unordered list for correct semantics and SEO? If the list option is the way to go how would the new code look? thanks

    Code:
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    
    <link rel="stylesheet" href="css/sifr.css" type="text/css">
    <script src="js/sifr.js" type="text/javascript"></script>
    <script src="js/sifr-config.js" type="text/javascript"></script>
    
    
    
    <style>
    a.rollover {
    	display: block;
    	margin-bottom: 15px;
    	width: 128px;
    	height: 43px;
    	text-decoration: none;
    	color: #FFF;	
    	background: url("img/buttonback.gif");
    	}
    
    a.rollover span {
    	display: block;
    	padding-top: 11px; /* the center level */
    	line-height: 1.2;
    	text-align: center;
    	text-transform: uppercase;
    	}
    
    a.rollover:hover {
    	background-position: -128px 0;
    	}
    
    
    </style>
    
    </head>
    
    <body>
    <a href="#" class="rollover" title="Home"><span>Home</span></a>
    <a href="#" class="rollover" title="About"><span>About</span></a>
    </body>
    </html>

  2. #2
    @alexstanford Alex's Avatar
    Join Date
    Apr 2004
    Location
    Jacksonville, Florida
    Posts
    757
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I would recommend using an unordered list for the sake of semantics.

    It would look something like this...

    Code:
    <ul>
    <li><a href="#" class="rollover" title="Home"><span>Home</span></a></li>
    <li><a href="#" class="rollover" title="Home"><span>Home</span></a></li>
    </ul>
    Best of luck,
    Alex
    Alex Stanford @alexstanford tumblog about.me in fb G+ K
    TechTalkin The Premier Community for Technology Enthusiasts and Professionals
    Full Ambit Media Zero Sacrifice Web Design & Development; Made in the USA @fullambit in fb G+ K

  3. #3
    SitePoint Enthusiast AmateurNight's Avatar
    Join Date
    May 2009
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Alex View Post
    I would recommend using an unordered list for the sake of semantics.

    It would look something like this...

    Code:
    <ul>
    <li><a href="#" class="rollover" title="Home"><span>Home</span></a></li>
    <li><a href="#" class="rollover" title="Home"><span>Home</span></a></li>
    </ul>
    Best of luck,
    Alex
    I would agree. Semantics and SEO.

  4. #4
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    848
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cheers!

  5. #5
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It should be an unordered list of links, since that's what a menu is, semantically.

    Also, you shouldn't need the class on each item. Just set an ID on the list itself and use contextual selectors:
    Code HTML4Strict:
    <ul id="menu">
      <li><a href="#">Home</a></li>
      <li><a href="#">Home</a></li>
    </ul>
    You can target the links with a selector like this,
    Code CSS:
    #menu a {
      ...
    }
     
    #menu a:hover {
      ...
    }

    Having a title attribute identical to the link text is unnecessary bloat. Also, I don't see any reason for the extra <span>.
    Birnam wood is come to Dunsinane

  6. #6
    @alexstanford Alex's Avatar
    Join Date
    Apr 2004
    Location
    Jacksonville, Florida
    Posts
    757
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    It should be an unordered list of links, since that's what a menu is, semantically.

    Also, you shouldn't need the class on each item. Just set an ID on the list itself and use contextual selectors:
    Code HTML4Strict:
    <ul id="menu">
      <li><a href="#">Home</a></li>
      <li><a href="#">Home</a></li>
    </ul>
    You can target the links with a selector like this,
    Code CSS:
    #menu a {
      ...
    }
     
    #menu a:hover {
      ...
    }

    Having a title attribute identical to the link text is unnecessary bloat. Also, I don't see any reason for the extra <span>.
    @AutisticCuckoo: I believe he was planning to implement a CSS tooltip that was based on that code.

    Alex
    Alex Stanford @alexstanford tumblog about.me in fb G+ K
    TechTalkin The Premier Community for Technology Enthusiasts and Professionals
    Full Ambit Media Zero Sacrifice Web Design & Development; Made in the USA @fullambit in fb G+ K

  7. #7
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    848
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    is there a way of eliminating the unsightly dotted white border appearing when you click on the sifr text of these buttons in the menu?

    http://ihostmalta.com/sifr/menu.html

  8. #8
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    is there a way of eliminating the unsightly dotted white border appearing when you click on the sifr text of these buttons in the menu?
    There sure is. However, that ugly border is there for a reason, so if you remove it (#the_element {outline: 0;}) then you need to replace it with something else. You see it after clicking because when you click there, your :focus gets moved there-- the outline is to show people focussing with the TAB (or whatever) key where they are. Usually whatever you're doing for :hover, you can add :focus to it. To simply remove the outline and do nothing else is a bad idea.

    Though I didn't see it when I clicked on your buttons OR when I tabbed there.

  9. #9
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The javascript apparently kills the active state, thus the link does not gain focus.
    Code:
    this.isActive=false;
    cheers,

    gary
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials

  10. #10
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AmateurNight View Post
    I would agree. Semantics and SEO.
    It has no SEO benefit.


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
  •