The actual question should be, why would you intentionally feed the browser with invalid HTML?
But back on-topic. Historically, HTML has been a jerky markup language. People without notion of DOM would write HTML such as:
<B><U>hi, </B> shall I be underlined or not?</U>
The above is clearly invalid HTML. However, the browser won't vomit if you feed it with invalid HTML. It will attempt to recover the document in the way it thinks the author intended.
Elements in the DOM (which is what the inspector shows you) can only have one parent element. So logically, the <U>
must be closed before <B>
is closed. But <U>
hasn't been closed by the author, so the browser assumes the rest of the text shall too be underlined. Hence, the invalid HTML is recovered to approximately the following DOM structure:
<B><U>hi, </U></B><U> shall I be underlined or not?</U>
And in your specific case, <a>
tags cannot be self-closed in HTML, so:
<a>...<a/>
The /
is interpreted as syntactic sugar and the browser thinks you've opened a second <a>
element without closing the first. It will most likely spawn the anchor element through the whole document until encountering the necessary closing </a>
's in the recover process.