SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Thread: H1 inside NAV?

  1. #1
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,820
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)

    H1 inside NAV?

    Ugh the HTML5 recommendation seems like the wild west. Valid code doesnt necessarily seem like good code and I was curious about where the experts would stand on this practice.


    Often, when I code the masthead of a page I wrap the logo and navigation UL in a container; extra wrappers may be needed as hooks depending on the situation but lets assume that they are not needed. Think of floating the logo to the left and then a hz. nav bar floated to the right.. so that both elements are aligned at the top.

    Code:
    <div class="mast">
    	<div class="LogoAndNav">
    	        <h1 class="logo">Co. Name</h1>
    	        <ul  class='nav'>...</ul>
    	</div>
        <p class="brand">...</p>
    </div>
    <div class='cont'></div>

    It occurred to me that in HTML5 I could do this:

    Code:
    <head class="mast">
    	<nav class="LogoAndNav">
    	        <h1 class="logo">Co. Name</h1>
    	        <ul  class='nav'>...</ul>
    	</nav>
        <p class="brand">...</p>
    </head>
    <main class='cont'></main>
    On the one hand... NAV elements are NOT like list elements in which they allow things other than list items within them. Also, thinking HTML4 the Heading element demarks the semantics of the elements that FOLLOW it in the mark up. But HTML5 is NOT HTML4.

    The HTML5 spec even has a code sample similar to what i have posted here , but the specs fail to address what my concern is: that despite it being valid code.. it has a DIFFERENT SEMANTIC MEANING from what I intend since HTML5 heading do not necessarily denote document wide hierarchy.

    In another words the heading inside the NAV element is not intended to mean "navigation" but "Some company's site". I mean I have put the NAV inside a HEAD element ( that's a direct child of the root element) but it still feels ambiguous.

    What do the forum experts think. I would love to get some opinions on this practice.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Because the <nav> is a sectioning element, it is meant to have a heading inside it ... which seems ridiculous to me. But if you don't, then one day (if the new document outline ever gets implemented, which is in doubt, even by Hickson), the document outline will report a missing/empty/undefined heading inside that <nav> ... or something like that.

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,820
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    But if you don't, then one day (if the new document outline ever gets implemented
    But when/if it does get implemented doesn't it stand to reason that the heading would apply to the NAV section and not the document or even the HEAD section?

  4. #4
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)
    HTML Code:
    <head class="mast">
         <nav class="LogoAndNav">
         ...
    </head>
    Maybe
    HTML Code:
    <header class="mast">
         <nav class="LogoAndNav">
         ...
    </header>

  5. #5
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    I done it. It felt icky, but I had an h1 on a Single-Page-Site-thingy where the h1 encompassed a link to the top of the page (but also the name of the page and therefore the h1).

    it was more a matter of convenience plus I couldn't think of a better way, given the design from designers...

    Maybe the answer'll come to me after watching a cheech and chong marathon or something...

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    But when/if it does get implemented doesn't it stand to reason that the heading would apply to the NAV section and not the document or even the HEAD section?
    Yes, it does apply to the nav, as I understand it.


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
  •