Nesting h3 inside anchor - how is this valid?

Question

<li class="vcard">
  <a class="url" href="/about/us/">
    <img class="photo" alt="some" src="/img/nicething.png">
    <h3>hello</h3>
  </a>
  <p class="role meta">Something here</p>
</li>

I've seen this code, I've validated and it returns VALID on w3c HTML5 validation.

I tough that we couldn't have h3 inside an anchor.

It seems that this became valid if we display:block; the anchor ?

Coadjutor

No. It's not valid on HTML 4.01, but in HTML5 it's always correct, no matter display. CSS are independent of HTML in HTML validation. – Ibby

Answer 1

If you look at the HTML5 spec, there is a section on the <a> tag:

The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links).

I can't find anything in the HTML4 spec that says that putting block-level tags inside of inline-level tags is invalid, but I do remember reading it somewhere.

Forcefeed

It's all in the HTML4 DTD. That says "<!-- HTML has two basic content models: %inline; character level elements and text strings: %block; block-like elements e.g. paragraphs and lists -->". The DTD part for the a element says <!ELEMENT A - - (%inline;)* -(A)> which means a must contain only inline elements and not another a element. – Stoner

As far as I am aware, the HTML4 spec nowhere explicitly says that block-level element inside of inline-level elements is invalid. It's more a emergent property of the accumulation of the individual DTD rules. – Stoner

Answer 2

It’s declared valid in HTML5, since its definition of the a element has “transparent” content model. So when an a element appears in a context where h3 would be allowed, then the a element is allowed to contain an h3 element.

This deviates from HTML 4.01 spec, where the a element is allowed to have “inline” content only (no headings for example). All previous HTML specifications take the same position.

However, browsers actually let you nest h3 inside a, too, so HTML5 is effectively just echoing browser practice. Note, however, that there is a functional difference: you can see this by clicking on some point to the right of the heading text. (The reason is that if you nest h3 inside a, the link takes the full available width, extending past the text.)

Any CSS settings are immaterial here. HTML validity does not depend on them, or even on the existence of CSS.

Beem

Answer 3

hello

Something here

you got to add display:bloock to the the vcard class

after that you will have a valid w3 document because in the W3 standard you can't have a block element(h3) inside an inline element(a) so you must turn the tag that is the container of the block element into a block element insted of inline element

Kiesha

That is not correct. You can't change an element from inline to block (with HTML). Only the element specification decides whether it is inline or block (and in what context). However, you can change the display from inline to block (with CSS), but that doesn't concern validity. – Expunge