My site's h1 is also the "home" link, so obviously I put it within the nav tag. The other links in the nav were originally put in an unordered list, like this:
<nav>
<h1><a href="#" class="active">Site Name</a></h1>
<ul>
<li><a href="#">Nav Item 1</a>
<li><a href="#">Nav Item 2</a>
<li><a href="#">Nav Item 3</a>
</ul>
</nav>
Standard, right? As you can imagine, on subpages, the nav stays the same but the "active" class gets applied to the relavent Nav Item.
Here's the problem. At mobile screen widths, the nav compresses into a dropdown menu where the "active" link is the only link shown above the drop. That's fine on the homepage where the h1 is the active link, but it seems like my CSS is going to get super messy on subpages.
I've been noticing that some well respected frontend developers use list items free of ordered/unordered lists. These are folks who hold semantics in high esteem, so it made me wonder they might be thinking...
So I'm stuck. It seems wrong to put my h1 in the ul, but this also seems wrong:
<nav>
<li><h1><a href="#" class="active">Site Name</a></h1></li>
<li><a href="">Nav Item 1</a></li>
<li><a href="">Nav Item 1</a></li>
</nav>
I know that I can get the LOOK of what I want to achieve almost any way I markup the HTML, but I'd like to do it as semantically as possible while avoiding a CSS/JS nightmare / or any hacks.
Permitted parent elements :
ul, ol, menu
Any other use should be avoided as a browser might very well not support it.
The fact the norm prohibits it means there is no accepted semantic, apart the one each developer invents for his own use.