block element in inline element

Question

I have been attempting to dissect some of the css on the behance.net site. I've looked through it in the chrome inspector pretty thoroughly, but some things I just don't understand.

On the top navigation bar, there is text that says "Discover", "Galleries", "Jobs". I notice that "Discover" is a div inside of an anchor tag. I was under the impression that block level elements could not inhabit inline level elements. But this is a pretty professional looking site, and they're doing it. Does it not break in some browsers?

<a    class="nav-link" href="/"><div class="nav-text nav-sprite nav-sprite-discover">Discover</div></a>

Thanks!

Answer 1

If Behance were using a HTML5 doctype, this would be valid (as zzzzBov says, a elements have a transparent content model in the current draft of the HTML5 spec, meaning they can contain block-level elements).

However, as they're using an XHTML doctype, their usage in this context is invalid. It won't break on (most) browsers, but it's not strictly correct and I wouldn't emulate it.

Answer 2

As per the HTML5 documentation, <a> elements have a transparent content model, which means they're allowed to contain block level elements.

_{In HTML4 and below, <a> elements were inline elements, which could not contain block content.}