<a> tag created from nothing - html

Question

This is really weird to me. Here's my code
<section class="work">
<div class="scw">
<div class="work-entry">
<a href="#" class="work-link">
<img src="project.jpg" alt="yeah yeah yeahhhh" />
<div class="work-desc">
<h2>Project</h2>
<p>This is a project</p>
View project
</div>
</a>
</div>
</div>
</section>
If you have a look here http://jsfiddle.net/H2YxH/1/ and inspect the h2 tag, you will (hopefully) see it everything inside work-desc wrapped in a tag. Why is this being generated, when it's not in my code?

Answer 1

When the browser sees the other <a> tag inside the first one, it concludes that it has to close the first tag before it can open a new one.
<a href="#" class="work-link">
<img src="project.jpg" alt="yeah yeah yeahhhh" />
<div class="work-desc">
<h2>Project</h2>
<p>This is a project</p>
</a>
View project
But this is an invalid DOM structure: the div has to be closed before the anchor can be closed. Because closing the div now would be rather destructive (and there'd still be a stray </div> up ahead to handle), it decides that it's better to duplicate the anchor so that everything it encloses in the markup is enclosed in the DOM too.
This is what happens in Chrome. Other browsers might behave differently. With invalid HTML browser behavior is undefined and can be whatever the browser considers best.

Answer 2

You can't encapsulate links/ "a"-tags in each other. Although it makes sense sometimes, it's generally a bad idea.
In addition:
You probably use "Right-click"->"Inspect Element"? The code you will see may not be the code you've written. This is because the code you will see is the code, that the browser creates during parsing and the code you see may change on-the-fly (e.g. you change an attribute with JavaScript). To see your actual code you always have to use "show sourcecode" in the contextmenu, but this probably doesn't work on jsfiddle.

Answer 3

Please read the comments in the code below first...
<section class="work">
<div class="scw">
<div class="work-entry">
<a href="#" class="work-link">
<img src="project.jpg" alt="yeah yeah yeahhhh" /></a><!--// You might want to close your anchor here... //-->
<div class="work-desc">
<h2>Project</h2>
<p>This is a project</p>
View project
</div>
<!--// </a> and remove this one ;-) //-->
</div>
</div>
</section>
You can't open an anchor twice if you did not close the first anchor, so I kindly ask to close an open anchor before you open a new anchor, I hope this will be helpful to you. Happy coding!