H1 inside NAV?

HTML & CSS
1

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.



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


<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

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

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 
<head class="mast">
     <nav class="LogoAndNav">
     ...
</head>

Maybe

<header class="mast">
     <nav class="LogoAndNav">
     ...
</header>

:wink:

5

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

Yes, it does apply to the nav, as I understand it.