Embedding h3 inside an anchor - how does it work?

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 saw this code, I checked and returns VALID on w3c HTML5 check.

It is difficult for me that we could not h3 inside the anchor .

It seems that this has become valid if we display:block; anchor?

Answer 1

If you look at the HTML5 specification , you will see a section of the <a> tag:

The a element can be wrapped around all paragraphs, lists, tables, etc. even entire sections if they do not have interactive content (for example, buttons or other links).

I can't find anything in the HTML4 specification that says putting tags at the block level inside tags at the linear level is not valid, but I remember reading it somewhere.

Answer 2

It has been declared valid in HTML5 because its definition of element a has a “transparent” content model. Therefore, when the element a appears in the context where h3 allowed, then the element a may contain the element h3 .

This deviates from the HTML 4.01 specification, where the a element is only allowed to have inline content (such as headers). All previous HTML specifications take the same position.

However, browsers actually allow you to embed h3 inside a , so HTML5 effectively just follows browser practice. Note, however, that there is a functional difference: you can see this by clicking on some point to the right of the title text. (The reason is that if you are in the h3 slot inside a , the link takes up all the available width that passes the text.)

All CSS settings are irrelevant here. HTML validity does not depend on them or even on the existence of CSS.

Answer 3

hello

Something here

you need to add a mapping: bloock to the vcard class

, after that you will have a valid w3 document, because in the W3 standard you cannot have a block element (h3) inside an inline element (a) so you have to turn the tag that is the container of the block element into a block element embedded in the inline element