Link tag appearing in a completely different spot than where I placed it. Best guess because of Craft

Question

I am trying to add a link around a section of code that I have made previously because the client wanted me to. The problem is the link doesn't work how it should. Instead of appearing around the the div it is appearing inside of the div but not only that it is appearing multiple times and has even rearranged elements of the div. I believe that this must have something to do with Craft because it is not an issue I have ever come across before.

The code I am using is this:

{% for entry in craft.entries.section('courses') %}
    <li>
        <a class="course-link" href="/courses/course">
            <h3 class="grey-box-h3">{{ entry.title }}</h3>

            {% for instructors in entry.instructor %}
                <p class="teacher">{{ instructors.title }}</p>
            {% endfor %}

            <img src="{{ entry.banner[0].getUrl('courseImage') }}" width="{{ entry.image[0].getWidth('courseImage') }}" height="{{ entry.image[0].getHeight('courseImage') }}">

            <div class="list-info">
                <div class="price">
                    <p>{{ entry.price }}</p>
                    <p>WACOM included*</p>
                </div>

                {% for block in entry.terms.limit(1) %}
                    <ul class="dates">
                        <li>{{ block.time }} ({{ block.hours }} hrs)</li>
                        <li>{{ block.date }} {{ block.year }}</li>
                        <li>8 Weeks - {{ block.day }}</li>
                    </ul>
                {% endfor %}

                <p class="desc">{{ entry.shortCourseDescription }}</p>
                <div class="req">
                    <p>Req:</p>

                    {% if entry.requiredPrograms.contains('Photoshop') %}
                        <a class="photoshop" target="_blank" href="http://www.adobe.com/au/products/photoshop.html">Photoshop</a>
                    {% endif %}                                    

                    {% if entry.requiredPrograms.contains('Sketch Up') %}
                        <a class="sketch-up" target="_blank" href="http://www.sketchup.com/">Sketch Up</a>
                    {% endif %}                      

                    {% if entry.requiredPrograms.contains('Maya') %}
                        <a class="maya" target="_blank" href="http://www.autodesk.com.au/products/maya/overview">Maya</a>
                    {% endif %}                   

                    {% if entry.requiredPrograms.contains('Zbrush') %}
                        <a class="zbrush" target="_blank" href="http://pixologic.com/">Zbrush</a>
                    {% endif %}  

                    {% if entry.requiredPrograms.contains('After Effects') %}
                        <a class="after-effects" target="_blank" href="http://www.adobe.com/au/products/aftereffects.html">After Effects</a>
                    {% endif %}                      

                    {% if entry.requiredPrograms.contains('Mud Box') %}
                        <a class="mudbox" target="_blank" href="http://www.autodesk.com/products/mudbox/overview">Mud Box</a>
                    {% endif %} </div>

                    <a class="button" href="{{ entry.getURL }}">More Info</a>

                </div>
        </a>
    </li>
{% endfor %}

But the code that is appearing is this

<li>
  <a class="course-link" href="/courses/course">
  <h3 class="grey-box-h3">Intro to Drawing and Character Design</h3>
  <p class="teacher">Tim McBurnie</p>
  <img src="http://cdwstudios.com/uploads/images/banners/_courseImage/course-introCHARACTER.jpg" width="350" height="165"> </a>
  <div class="list-info"><a class="course-link" href="/courses/course">
    <div class="price">
      <p>$595.00</p>
      <p>WACOM included*</p>
    </div>
    <ul class="dates">
      <li>Time</li>
      <li>Date</li>
      <li>Date2</li>
    </ul>
    <p class="desc">content</p>
    </a>
    <div class="req">
    <a class="course-link" href="/courses/course">
      <p>Req:</p>
      </a>
    <a class="photoshop" target="_blank" href="http://www.adobe.com/au/products/photoshop.html">Photoshop</a> 
    </div>
    <a class="button" href="http://cdwstudios.com/courses/introduction-to-drawing-character-design">More Info</a> 
    </div>
</li> 

Notice how the is appearing multiple times and has actually change the order of the divs.

Does anyone know why it is doing this?

Answer 1

Was just cleaning up the formatting of your HTML and noticed that you seem to be missing the closing </div> for <div class="list-info">.

It also looks like you've got nested anchor tags, which W3 defines as illegal:

Links and anchors defined by the A element must not be nested; an A element must not contain any other A elements.

Since the DTD defines the LINK element to be empty, LINK elements may not be nested either.