Question

I’m making a ul-based horizontal navbar, but I want to have two levels heading in each item, a bit like this:

     Nav item1            Nav item2             Nav item3 Nav item1 subtitle    Nav item2 subtitle    Nav item3 subtitle 

The subtitle has to be in a different style to the main nav item. I did this first (naively?) by using a p nested inside the li, but W3C said I couldn’t nest a p inside an li.

Basically, I’m trying to avoid a br, mainly because that’s not proper semantics is it? Am I going about this the wrong way?

EDIT: I should have added, I want the nav item and it’s subtitle in the same anchor tag, because they are one link (and I want a:hover to work). This precludes the use of multiple heading tags within the li I think.

EDIT 2: The answers were useful, thanks. An interesting thing to note – although it was said that block span == div, that’s not the way the W3C validator sees it. You can always have a span nested inside an anchor, even if the span’s display:block, but you can’t e.g. have a display:inline h1 inside an anchor, because the validator doesn’t check the CSS and HTML files together.

Answer 1

You could use a span since that’s semantically inert, then style it with display: block.