SitePoint Sponsor

User Tag List

Results 1 to 11 of 11

Thread: more semantic?

  1. #1
    SitePoint Guru
    Join Date
    Sep 2004
    Location
    NY, USA
    Posts
    712
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    more semantic?

    Hi, I saw this in another thread, however rather than hi-jack that thread, I decided to make a separate one... as it was not the main point of that other thread.

    here is a snippet from a hobby site of mine...

    HTML Code:
    <div id="nav">
      <a href="/mission.php" title="Mission Statement">&nbsp; Mission</a>
      <a href="/debate.php" title="The Great Debate">&nbsp; The Great Debate</a>
      <a href="/fart.php" title="The Fart Factor">&nbsp; The Fart Factor</a>
      <a href="/quotes.php" title="(Not so) Famous Quotes">&nbsp; Quotes</a>
      <a href="/recipes.php" title="Recipes from fellow meat lovers">&nbsp; Recipes</a>
      <a href="/diagrams.php" title="Animal Diagrams">&nbsp; Diagrams</a>
      <a href="/merchandise.php" title="Merchandise">&nbsp; Merchandise</a>
      <a href="/charity.php" title="Help the Needy">&nbsp; Charities</a>
      <a href="/join.php" title="Join">&nbsp; Join</a>
      <a href="/contact.php" title="Contact">&nbsp; Contact</a>
      <a href="/friend.php" title="Tell a friend about us">&nbsp; Tell a Friend</a>
    </div>
    Now then... some people have said it is "more semantic" to have my links laid out in an unordered list. I don't see the point. CSS does everything I want it to do so the links render correctly across browsers. Why add the extra layer of heirarchy of an unordered list to the menu?

    I'm stumped. It would make absolutely no difference to my visual presentation... it would make the page no more usable or accessible as far as I know. It would just add extra code.

    Can anyone sell me on why my menu links should be list elements?

    While we're at it... Can anyone explain to me what "more semantic" means? That buzz word has over taken this business over the past few years... and honestly I don't quite understand it, this whole "semantically correct" movement. I'm not ashamed to admit it. I have over 5 years in this business... but something tells me people throw around the magic "semantic" word without really understanding it in full. That's not directed at anyone in particular (I just have a hunch that I'm not the only one, that's all.)

    Thanks, I feel like I am missing something... so many people seem to be in agreement that a navigation menu must be an unordered list (with heavy use of CSS). But CSS can be applied directly to the menu without <li> surrounding every link.

    I'm really curious. Thanks, cringer.

  2. #2
    doing my best to help c2uk's Avatar
    Join Date
    May 2005
    Location
    Cardiff
    Posts
    1,832
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by cringer
    HTML Code:
    <div id="nav">
      <a href="/mission.php" title="Mission Statement">&nbsp; Mission</a>
      <a href="/debate.php" title="The Great Debate">&nbsp; The Great Debate</a>
      <a href="/fart.php" title="The Fart Factor">&nbsp; The Fart Factor</a>
      <a href="/quotes.php" title="(Not so) Famous Quotes">&nbsp; Quotes</a>
      <a href="/recipes.php" title="Recipes from fellow meat lovers">&nbsp; Recipes</a>
      <a href="/diagrams.php" title="Animal Diagrams">&nbsp; Diagrams</a>
      <a href="/merchandise.php" title="Merchandise">&nbsp; Merchandise</a>
      <a href="/charity.php" title="Help the Needy">&nbsp; Charities</a>
      <a href="/join.php" title="Join">&nbsp; Join</a>
      <a href="/contact.php" title="Contact">&nbsp; Contact</a>
      <a href="/friend.php" title="Tell a friend about us">&nbsp; Tell a Friend</a>
    </div>
    Answer one question: What do we see here?

    The obviouse answer maybe would be: "This is my navigation". But there is another point of view to it: We also see a list of links. Right a list, as in unordered list.

    But it needs someone else to explain you the semantic thing about it, I'm just too tired right now to explain it in good English. Sorry for that...

  3. #3
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's a list of links, so an UL might be considered more semantic, i.e. it conveys the structure of the document better.

    You say that CSS does all you want, but consider this: not all user agents support CSS. Your markup would be displayed as a contiguous sequence of links in a text browser like Lynx, and there would be no way to visually discern one link from the next without actually navigating to it. With an unordered list, even Lynx would put one link per line and prefix it with a '*' to indicate a list bullet.

    Remember that not everyone will see the page exactly like it looks in your browser, on your operating system, and on your monitor.
    Birnam wood is come to Dunsinane

  4. #4
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Turn off CSS or browse with lynx, then think again.

    Semantics and structure is what HTML is about. If you didn't care about semantics, you would only need two elements, DIV to apply styles upon (and even make it inline if you want), and A for links.

    So why do HTML offer many other elements, such as lists?

    Well, HTML should not depend on CSS. CSS is a presentational layer, so you can change the presentation of your document. But when you take away the presentational layer, the document should still stand on its own, make sense and be accessible.

    Also, how should Google be able to understand that it is a list? Google is blind.
    Simon Pieters

  5. #5
    SitePoint Guru
    Join Date
    Sep 2004
    Location
    NY, USA
    Posts
    712
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Makes sense. So the whole reason for putting navigation links into a list is for browsing devices that for one reason or another don't render the CSS.

    in those cases, instead of seeing

    link1 link2 link3

    they would see

    * link1
    * link2
    * link3

    Simple enough. Thanks

    One last question. Why would google care if my links were part of an unordered list or not?

  6. #6
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    Google probably wouldn't too much unless it wanted to rank the semantics of a UL over a plain sequence of hyperlinks.

  7. #7
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Perhaps it doesn't have much impact on rankings, but it is displayed a bit different in search results. Doing this:
    Code:
    <div>
     <a>Mission</a>
     <a>The Great Debate</a>
     <a>The Fart Factor</a>
    </div>
    Will be displayed as
    Mission The Great Debate The Fart Factor
    While this:
    Code:
    <ul>
     <li><a>Mission</a></li>
     <li><a>The Great Debate</a></li>
     <li><a>The Fart Factor</a></li>
    </ul>
    Could be displayed as:
    Mission; The Great Debate; The Fart Factor.
    ...which is easier to follow for the user when scanning search results.
    Simon Pieters

  8. #8
    SitePoint Guru
    Join Date
    Sep 2004
    Location
    NY, USA
    Posts
    712
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks all. I knew there must be good reasons if everyone does it.

  9. #9
    SitePoint Guru bronze trophy blufive's Avatar
    Join Date
    Mar 2002
    Location
    Manchester, UK
    Posts
    853
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Google probably wouldn't too much unless it wanted to rank the semantics of a UL over a plain sequence of hyperlinks.
    http://labs.google.com/sets

    I'm not sure that relies purely on list markup, but I would be surprised if they weren't involved somewhere along the way...

  10. #10
    SitePoint Zealot ICO's Avatar
    Join Date
    May 2005
    Posts
    121
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Being organized has its advantages, I didn't need to hear a word I've never used or understood before to get sold on the concept of organizing and grouping code properly. though the word does make you sound savvy.

    I'd have still used unordered lists if they didn't do anything at all, of course I'd have to realize that links ARE an unordered list.

  11. #11
    SitePoint Guru
    Join Date
    Sep 2004
    Location
    NY, USA
    Posts
    712
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ICO
    Being organized has its advantages, I didn't need to hear a word I've never used or understood before to get sold on the concept of organizing and grouping code properly.
    Is the purpose of your post simply to toot your own horn? or make me look foolish in some way? or both... I don't touch client side code that much any more except for my hobby work, and I was genuinely curious about the "semantics" buzz word, and movement towards lists for menus.

    Years ago... lists were used for making bulleted or numbered lists. They were not used for navigation menus unless you wanted said navigation menu to appear as a bulleted list. Times have changed so I thought I'd ask the experts why it has become so important. That is all.

    Quote Originally Posted by ICO
    I'd have still used unordered lists if they didn't do anything at all.
    EDIT: Is that so?? You're the same person I was helping with your white space problems just 2 days ago... http://www.sitepoint.com/forums/showthread.php?t=267555

    You did not use an unordered list for your menu, until that mentor told you it was "more semantic". (That is indeed what inspired this thread).

    So I guess it didn't come to you naturally after all. Someone had to explain it to you.
    Last edited by cringer; Jun 1, 2005 at 07:40.


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
  •