I’m trying to make a clickable tile using an anchor tag, this code seems to work just fine:
<a href="#">
<span>label</span>
<address>
address detail
</address>
</a>
However, when I wrap this block with a paragraph, the code breaks – when I "inspect element" in Chrome (v116, latest) the address tag is moved outside of the paragraph.
I believe I should be able to place an address
element (or any other block level element) inside an anchor element, but if I switch out the address
element for an inline element the problem is resolved.
Is this valid HTML? Why does it work except when wrapped with a paragraph?
2
Answers
This was my mistake - I had a broken template tag at the top of my page which broke the html doctype. Somewhat interestingly, I saw no evidence of this until I encountered this issue.
I believe the problem was that all my other code was still valid, but the broken doctype meant the page was interpreted as HTML 4 instead of 5 (block level elements inside an anchor element only became valid in html5).
Note that it’s invalid to wrap an
<address>
with a<p>
. The paragraph element cannot contain block-level elements. Even if the doctype is HTML5, when a parser encounters an address element before an open paragraph is closed it will automatically close the paragraph.