Nesting heading tags within li tags

Question

Is it ever acceptable to nest heading tags within list item tags within the HTML5 nav element in an effort to have the navigation list items show up in outlines? This validates but is it semantically correct to have a heading on a navigation list item? Is there any way to get the navigation items to show up in outlines with HTML5? Or should I even care about this?

Metaplasia

w3c validator says it's nice. Documentation says nothing against. – Furnace

How did it happen, that you have headings inside navigation? Due to SE optimisation, no, it is bad idea. H tags are used as conclusion to text below. H1 should be at top, visible and in a single copy. h2 after h1, portraying it's text, separating site on small, more specific parts. SE use them to get information and they are, among title, description and keywords, are most "powerful" tags: I see h1, h2 and title in search output and keywords of my projects. Knows nothing about h3-h6, they are seldom. Maybe, you can use h3-h6 in navigation, but why? – Furnace

Answer 1

The HTML5 syntax rules allow heading elements h1, h2 etc. inside li elements. However, it (like all HTML specifications) define heading elements as being headings for something. This is implicit in earlier specs but made clearer in HTML5, which defines how headings participate in the division of a document into sections. A heading for an empty section, though formally valid, does not make sense, except perhaps as a temporary state where the content has not been inserted yet and will be added in a later version or with a script.

Technically, using <nav><li><h2>foo</h2></li>...</nav> would put “foo” into the outline, as if the document had a section with the title “foo”. But you would hardly gain anything that way, even if HTML5 outlines had some support. And they don’t; see he HTML5 Document Outline is a dangerous fiction.

Spindell

Answer 2

My answer would be to just make your own div and wrap your nav-items in it. You can thereby change your font-size and all the other things you're willing to make out of it. Forget the header tag is what I recommend, I wouldn't see it much of an useful element in lists.

In CSS:

.myDiv {
   font-size: 20px;
   display: block;
   border: 2px solid black;
}

And then assign it to the HTML

<div class="myDiv">Home</div>
<div class="myDiv">About</div>

and so forth. Hope this helps and that I understood your question!

Armitage

This does not address the question. It was about outline. – Spindell