Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-07-14T05:21:31.307Z
Answers.Text: Additionally, an `<a>` anchor tag is an **inline** element, and shouldn't be wrapped around **block** elements like `<h3>`, `<div>`, `<p>`, or `<ul>`.
Answers.UserDisplayName: Lindsey D
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-07-14T06:05:16.943Z
Answers.Text: @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 :)
Answers.UserDisplayName: Alec Ritson
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-07-14T06:12:14.957Z
Answers.Text: @AlecRitson Excellent, I didn't know that! Thanks. :)
Answers.UserDisplayName: Lindsey D
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-07-14T13:30:39.800Z
Answers.Text: 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.
Answers.UserDisplayName: JeffTalbot
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-07-14T16:20:42.633Z
Answers.Text: 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.
Answers.UserDisplayName: Marion Newlevant
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-07-15T05:53:45.550Z
Answers.Text: Okay so everything worked once I removed the links from within the links. Thanks guys.
Answers.UserDisplayName: JeffTalbot
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-07-14T02:39:43.930Z
Answers.LastActivityDate: 2015-07-14T02:39:43.930Z
Answers.LastEditDate: 2020-06-17T08:56:27.903Z
Answers.UserDisplayName: Brad Bell
Body: <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>
  
Tags: <templating><frontend>
Title: Link tag appearing in a completely different spot than where I placed it. Best guess because of Craft
ThreadText: # 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') %}
      <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?
  
  **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 `</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.
  
  > **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**: @username_2 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**: @username_3 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.  
  
  ---
  
  