a tag closing before it should

Below is a syntax html i have written for my project. I don't think anything is wrong with my code. however browser compiles it differently.

My code:


<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

<a href="#" class="m-news">
<div class="mn-title">
</div>
<div class="mn-content">
</div>
<div class="news-footer">
<a href="#"></a>
</div>
</a>

<!-- end snippet -->


How browser is compiling it:

<a href="#" class="m-news"><div class="mn-title"></div><div class="mn-content"></div></a><div class="news-footer"><a href="#" class="m-news"></a></div>

Can anyone tell me why is this happening? I did the removing js, removing css,a nd all other possible tests.i tested in opera internet explorer chrome .

It is forbidden to nest `<a>` elements.

The second `<a>` start tag is ignored, and the first `</a>` end tag, therefore, closes the first `<a>`.

If you had [used a validator](

[To see links please register here]

), it would have picked up this error.