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 ?

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.

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.

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