1

Simply out of curiosity - I have been nailed in my previous question for trying to put button within an anchored image. I looked at documentations and other questions and although everyone is saying that it should not be done, they are not saying why.

Even the documentation http://www.w3.org/TR/html5/text-level-semantics.html#the-a-element states that there should be no interactive content within anchor, but does not tell me the reasoning.

Does anyone know why is it such a horrible practice to do so?

nick.jw.park
  • 199
  • 3
  • 12

1 Answers1

2

Imagine that situation:

<a href="http://google.com">
  <select>
    <option>V1</option>
    <option>V2</option>
  </select>
</a>

Now when you press on select element these actions will take effect (in order):

  1. Open select dropdown.
  2. Bubble click event to parent (<a> in this case).
  3. <a> element follows it's href value (at this point you leave current page).
  4. (after some delay by human body) You would select desired option (but you had already left website)
Justinas
  • 41,402
  • 5
  • 66
  • 96
  • oh I was trying to find a way around it, but I guess just re designing my code would be a better solution then! Thanks! – nick.jw.park Oct 26 '15 at 06:39