<p>Was just cleaning up the formatting of your HTML and noticed that you seem to be missing the closing <code>&lt;/div&gt;</code> for <code>&lt;div class=&quot;list-info&quot;&gt;</code>.</p>
<p>It also looks like you've got nested anchor tags, which W3 defines as illegal:</p>
<blockquote>
<p>Links and anchors defined by the A element must not be nested; an A element must not contain any other A elements.</p>
<p>Since the DTD defines the LINK element to be empty, LINK elements may not be nested either.</p>
</blockquote>

CC BY-SA 3.0
2015-07-14T05:21:31.307Z
Additionally, an `<a>` anchor tag is an **inline** element, and shouldn't be wrapped around **block** elements like `<h3>`, `<div>`, `<p>`, or `<ul>`.
Lindsey D
CC BY-SA 3.0
2015-07-14T06:05:16.943Z
@LindseyD if you go from the new HTML5 spec, this isn't the case anymore. "The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links)" http://www.w3.org/TR/html51/semantics.html#the-a-element :)
Alec Ritson
CC BY-SA 3.0
2015-07-14T06:12:14.957Z
@AlecRitson Excellent, I didn't know that! Thanks. :)
Lindsey D
CC BY-SA 3.0
2015-07-14T13:30:39.800Z
What's the best way to do to have links within links? I don't really want to do it but the client specifically wants the entire area to be a link but also for there to be the specific and different links with that area. 

I'll have a look at the missing `</div>` and try see what I can do with the links first thing in the morning and will get back to you. Thanks for the help.
JeffTalbot
CC BY-SA 3.0
2015-07-14T16:20:42.633Z
Links within links? I would have two like so: `<a>...</a><a>...</a>` and then absolutely position the 2nd one on top of the 1st one.
Marion Newlevant
CC BY-SA 3.0
2015-07-15T05:53:45.550Z
Okay so everything worked once I removed the links from within the links. Thanks guys.
JeffTalbot
CC BY-SA 3.0
2015-07-14T02:39:43.930Z
2015-07-14T02:39:43.930Z
2020-06-17T08:56:27.903Z
Brad Bell
<p>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.</p>

<p>The code I am using is this:</p>

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

            {% for instructors in entry.instructor %}
                &lt;p class="teacher"&gt;{{ instructors.title }}&lt;/p&gt;
            {% endfor %}

            &lt;img src="{{ entry.banner[0].getUrl('courseImage') }}" width="{{ entry.image[0].getWidth('courseImage') }}" height="{{ entry.image[0].getHeight('courseImage') }}"&gt;

            &lt;div class="list-info"&gt;
                &lt;div class="price"&gt;
                    &lt;p&gt;{{ entry.price }}&lt;/p&gt;
                    &lt;p&gt;WACOM included*&lt;/p&gt;
                &lt;/div&gt;

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

                &lt;p class="desc"&gt;{{ entry.shortCourseDescription }}&lt;/p&gt;
                &lt;div class="req"&gt;
                    &lt;p&gt;Req:&lt;/p&gt;

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

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

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

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

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

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

                    &lt;a class="button" href="{{ entry.getURL }}"&gt;More Info&lt;/a&gt;

                &lt;/div&gt;
        &lt;/a&gt;
    &lt;/li&gt;
{% endfor %}
</code></pre>

<p>But the code that is appearing is this</p>

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

<p>Notice how the  is appearing multiple times and has actually change the order of the divs. </p>

<p>Does anyone know why it is doing this?</p>

<templating><frontend>
Link tag appearing in a completely different spot than where I placed it. Best guess because of Craft
# Link tag appearing in a completely different spot than where I placed it. Best guess because of Craft

(Asked by: username_0 on 2015-07-14)

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') %}
    
        
            {{ entry.title }}

            {% for instructors in entry.instructor %}
                {{ instructors.title }}
            {% endfor %}

            

            
                
                    {{ entry.price }}
                    WACOM included*
                

                {% for block in entry.terms.limit(1) %}
                    
                        {{ block.time }} ({{ block.hours }} hrs)
                        {{ block.date }} {{ block.year }}
                        8 Weeks - {{ block.day }}
                    
                {% endfor %}

                {{ entry.shortCourseDescription }}
                
                    Req:

                    {% if entry.requiredPrograms.contains('Photoshop') %}
                        Photoshop
                    {% endif %}                                    

                    {% if entry.requiredPrograms.contains('Sketch Up') %}
                        Sketch Up
                    {% endif %}                      

                    {% if entry.requiredPrograms.contains('Maya') %}
                        Maya
                    {% endif %}                   

                    {% if entry.requiredPrograms.contains('Zbrush') %}
                        Zbrush
                    {% endif %}  

                    {% if entry.requiredPrograms.contains('After Effects') %}
                        After Effects
                    {% endif %}                      

                    {% if entry.requiredPrograms.contains('Mud Box') %}
                        Mud Box
                    {% endif %} 

                    More Info

                
        
    
{% endfor %}

But the code that is appearing is this

  
  Intro to Drawing and Character Design
  Tim McBurnie
   
  
    
      $595.00
      WACOM included*
    
    
      Time
      Date
      Date2
    
    content
    
    
    
      Req:
      
    Photoshop 
    
    More Info 
    
 

Notice how the  is appearing multiple times and has actually change the order of the divs. 
Does anyone know why it is doing this?

**Tags:** templating, frontend


---

## 1 answers

### Answer by username_1 on 2015-07-14. Score: 2 | Accepted answer

Was just cleaning up the formatting of your HTML and noticed that you seem to be missing the closing  for .

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.

> **Comments:**
> **username_2**: Additionally, an `<a>` anchor tag is an **inline** element, and shouldn't be wrapped around **block** elements like `<h3>`, `<div>`, `<p>`, or `<ul>`.  
> **username_3**: @LindseyD if you go from the new HTML5 spec, this isn't the case anymore. "The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links)" http://www.w3.org/TR/html51/semantics.html#the-a-element :)  
> **username_2**: @AlecRitson Excellent, I didn't know that! Thanks. :)  
> **username_0**: What's the best way to do to have links within links? I don't really want to do it but the client specifically wants the entire area to be a link but also for there to be the specific and different links with that area.   I'll have a look at the missing `</div>` and try see what I can do with the links first thing in the morning and will get back to you. Thanks for the help.  
> **username_4**: Links within links? I would have two like so: `<a>...</a><a>...</a>` and then absolutely position the 2nd one on top of the 1st one.  
> **username_0**: Okay so everything worked once I removed the links from within the links. Thanks guys.  

---

