0

So this is quite interesting to me. I've got the following example markup:

<a href="test.html">
  <h2>Hello World</h2>
  <div>
    <p>Hello again</p>
  </div>
</a>

When I have my Google Chrome (Version 26) rendering this, it shows me exactly this markup. But when I add an anchor inside the div like this:

<a href="test.html">
  <h2>Hello World</h2>
  <div>
    <p>Hello again</p>
    <a href="something-else"></a>
  </div>
</a>

The browser outputs the following:

<a href="test.html">
  <h2>Hello World</h2>
  </a>
<div>
  <a href="test.html">
    <p>Hello again</p>
  </a>
  <a href="something-else"></a>
</div>

So this is absolutely not what I want. I can imagine it might makes sense in order to be able to click the inner link, that the anchors are only applied to some elements, but I would need it just how i wrote it there. It makes sense, because I have to copy the inner div to another position via JavaScript. But when I do that, the code is already messed up and shows the first link.

Does anybody know how to deal with this?

Many thanks in advance!

amann
  • 5,449
  • 4
  • 38
  • 46
  • I guess I will have to add a class to the first link and then remove every anchor with that class when i clone the HTML element via jQuery.. – amann Apr 24 '13 at 11:30

1 Answers1

0

It is not allowed to nest a elements:

Content model:
Transparent, but there must be no interactive content descendant.

Interactive content is "content that is specifically intended for user interaction". For example a, button, input, audio, ….

unor
  • 92,415
  • 26
  • 211
  • 360
  • thanks for the info! I've altered the markup now accordingly. I've used a code like `
    ` now and changed the element to an anchor with jQuery.
     – amann Apr 25 '13 at 20:08