Nesting h3 inside anchor - how is this valid?

Question

  
    
    
hello&         


        

Answer 1

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 2

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 3

hello

Something here