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!

W3C doesn't seem to be a fan of it http://validator.w3.org/check?uri=behance.net+&charset=%28detect+automatically%29&doctype=Inline&group=0 — j08691, Sep 25 '12 at 15:44
Exact duplicate of http://stackoverflow.com/q/1827965/1085285 — Ashish Gupta, Sep 25 '12 at 15:44
See full discussion of this issue [here][1] [1]: http://stackoverflow.com/questions/746531/is-it-wrong-to-change-a-block-element-to-inline-with-css-if-it-contains-another — Hazem Salama, Sep 25 '12 at 15:45

score 3 · Accepted Answer · answered Sep 25 '12 at 15:44

3

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.}

answered Sep 25 '12 at 15:44

zzzzBov

174,988
54
320
367

@AshishGupta, if you read the link you'll note that it is a reference to the *HTML5* documentation. That previous answer, while correct, is out of date. – zzzzBov Sep 25 '12 at 15:46
@BoltClock . OP never mentioned HTML5 – Ashish Gupta Sep 25 '12 at 15:48
@AshishGupta, OP never mentioned HTML4, which means that the latest relevant version is assumed, which is at this point HTML5. – zzzzBov Sep 25 '12 at 15:48
Is it practicable to give the HTML 4 document to some browsers and 5 to others? Is that what's being done here? – 1252748 Sep 25 '12 at 15:56
@thomas, Browsers do their best to render invalid markup. Because of this, the newer HTML5 spec includes some changes and details as to how browsers can *consistently* render invalid markup. Most browsers will allow you to place block elements in inline containers and render them relatively consistently, whether or not the markup is valid. – zzzzBov Sep 25 '12 at 16:01

score 1 · Answer 2 · answered Sep 25 '12 at 15:49

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.

block element in inline element

2 Answers2