skip to Main Content

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


  1. Chosen as BEST ANSWER

    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).


  2. 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.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search