SitePoint Sponsor

User Tag List

Results 1 to 21 of 21

Hybrid View

  1. #1
    SitePoint Wizard
    Join Date
    Jan 2005
    Location
    blahblahblah
    Posts
    1,447
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    <nav> vs. <div role="navigation">

    Hello,

    Which one would you pick over the other and why?

    Regards,

    -jj.

  2. #2
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    At this point, the div since HTML(5) support is still sketchy.

    In a few years when IE9 is the dying browser, I'd probably go with nav.

  3. #3
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    I would pick
    <ul role="navigation">

    because most of the time, your navigation is a list of links. If it isn't, I would tack the navigation role on whichever container was closest (nesting-wise) to whatever you are calling "navigational thingies". I would not include a site search form under this, even though it is a valid form of "navigation" for many people. Search forms should already have a role of "search", as a separate thing.

    Bruce Lawson and Remy Sharp's book on HTML5 really stretched the meaning of "navigation" and were advocating <nav> and navigation roles all over the place... but they have since scaled back, way back.

    A note: using a manual role of navigation on a nav tag has been known to screw up the NVDA screen reader (let alone Window-Eyes). Since eventually HTML5 wants to have native roles on most/all elements, in the unforseen future the nav tag should by default have a "navigation" role.

    When that happens, user agents should then be able to easily tell the difference between a native role and a landmark (ARIA) role.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    I would pick
    <ul role="navigation">
    Me too!

    Besides, <nav> is not an HTML element.

    Not yet, anyway.

  5. #5
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Me too!

    Besides, <nav> is not an HTML element.

    Not yet, anyway.
    role="" is not an HTML attribute either in that case.
    Simon Pieters

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by zcorpan View Post
    role="" is not an HTML attribute either in that case.
    At least it does something at this time.

    Are you not falling for the "living standard" indoctrination?
    Not really. I'm just saying that something needing a life support system to breathe at all is not really "living".

  7. #7
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Besides, <nav> is not an HTML element.
    HTML5 is not HTML??

    Are you not falling for the "living standard" indoctrination??? A pox upon thee and thyne house!

    role="" is not an HTML attribute either in that case.
    It's become my second source of invalid HTML4, right after the tabindex="-1" for either removing redundant links from tab order or making IE6 actually work with skip links : )

    And to think, I used to write valid HTML...

  8. #8
    SitePoint Enthusiast alexson's Avatar
    Join Date
    Jun 2010
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'd be inclined to use the <nav> but if you needed a <div> inside that to markup the content in the CSS I'd rely on that for styling/coding leaving the <nav> as a bonus for browsers/search engines that recognised it.

  9. #9
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    leaving the <nav> as a bonus for browsers/search engines that recognised it.
    Which currently, so far as I know, none do (FF has an experimental html5 parser that you can switch on... not sure if Opera's done the same yet).

  10. #10
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    Which currently, so far as I know, none do (FF has an experimental html5 parser that you can switch on... not sure if Opera's done the same yet).
    Firefox has shipped with the HTML5 parser enabled by default since FF4. Ragnarök hasn't shipped yet but can be tested in a Labs build.
    Simon Pieters

  11. #11
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Firefox has shipped with the HTML5 parser enabled by default since FF4.
    Ah I'm still on 3.6x.
    Ragnarök hasn't shipped yet but can be tested in a Labs build.
    OMIDOG THE END OF THE EARTH IN AN EPIC BATTLE OF FIRE AND ICE AND HTML5!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

    Where the hell have I been?

    When IE finally does it they should call it ARMAGEDDON

  12. #12
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    Ah I'm still on 3.6x.
    ... why?
    Simon Pieters

  13. #13
    SitePoint Enthusiast jackburd's Avatar
    Join Date
    Mar 2011
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    what is "role" for?

    I'll go with <nav> this is HTML5, the future of web design.
    just use ie fix javascript to make it compatible to idiot browsers.

  14. #14
    SitePoint Evangelist tetsuo shima's Avatar
    Join Date
    Oct 2005
    Location
    Switzerland
    Posts
    597
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ha ha, 20 role="complimentary". That's a good one. Note that I could find use for such a role, though.

    It seems that a lot of people keep on using "aside" when they mean "complementary" and, as you stated, "complementary" when they mean "contentinfo".
    The SEO Faq thread
    Dependency injection made easy: Phemto

  15. #15
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    It seems that a lot of people keep on using "aside" when they mean "complementary"
    Those two are awfully close, yes. Except if I were to use <aside> for say a sidebar, I'd only bother adding the role if it was a case where I'd want to add a skip link to it anyway (I'll add skip links for sighted keyboarders and older sr's either way).

    Or do you mean people are using role="aside"? Does such a role exist?

  16. #16
    ¬.¬ shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    Firefox 3.6 will be the next IE 6. Yuppers.
    Logic without the fatal effects.
    All code snippets are licensed under WTFPL.


  17. #17
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Firefox 3.6 will be the next IE 6. Yuppers.
    Without the scattered millions of shackled office workers tied to ancient and expensive Java applications.

    FF3.6 will be gone long before IE6 >:)


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
  •