{{ post.url }} injects or puts anchor tags with the post url mutiple times randomly

Help
1

Hi, I’m new to jekyll and a new dev also. I don’t really know how to report an issue. It’s my first time. Hope you can help me. Here is my problem. I don’t really know what’s wrong but when I add the {{ post.url }} while for looping my posts to display all the posts of course, it randomly puts multiple anchor tags with the post url in my html file even though I’ve only called it once. it looks like this.

This is how I loop my posts:

---
layout: layout-blog
---

<div class="row">
  {% for post in site.posts %}
    <div class="col-4">
      <a href="{{ post.url }}">
        <div class="blog-card">
          <div class="featured-image" style="background-image: url('assets/images/uploads/conf-blog-header.jpg')">
            <img src="{{ post.image | absolute_url }}" alt="">
          </div>
          <div class="blog-article">
            <p class="category-time text-uppercase letter-spacing-0">Category | {{ post.time-to-read }} mins read</p>
            <p class="h5 letter-spacing-0 title">{{ post.title }}</p>
            <div class="blog-body-text letter-spacing-0">
              {{ post.content | markdownify}}
            </div>
          </div>
          <div class="author-div">
            <p class="name-and-position letter-spacing-0">by <span class="text-tanda-l">{{ post.author-name }}, {{ post.author-job-title }}</span></p>
            <p class="publish-date letter-spacing-0">published {{ post.publish-date }}</p>
          </div>
        </div>
      </a>
    </div>
  {% endfor %}
</div>

And this is the the output on my browser which is the problem

<div class="col-4">
  <a href="/2018/04/27/test.html"></a>
  <div class="blog-card">
    <a href="/2018/04/27/test.html">
      <div class="featured-image" style="background-image: url('assets/images/uploads/conf-blog-header.jpg')">
        <img src="http://192.168.1.125:4000//assets/images/uploads/conf-blog-header.jpg" alt="">
      </div>
    </a>
    <div class="blog-article">
      <a href="/2018/04/27/test.html">
        <p class="category-time text-uppercase letter-spacing-0">Category | 3 mins read</p>
        <p class="h5 letter-spacing-0 title">Lorem ipsum dolor sit amet consectetur adipisicing elit  Pariatur, impedit. Laboriosam, voluptate! Accusantium, voluptatibus necessitatibus!</p>
      </a>
      <div class="blog-body-text letter-spacing-0">
        <a href="/2018/04/27/test.html">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora possimus accusamus exercitationem facilis voluptatem labore earum deserunt quam, quasi commodi ipsum a veniam quas optio est impedit nobis placeat inventore.</p>
          <ol>
            <li>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Error quo eos, ea fuga molestiae nesciunt voluptas dolor fugit delectus facere quam enim tempora voluptatibus, doloremque blanditiis aut ab consequuntur repellat voluptates molestias veritatis dolorem? Ipsam ad dolore officia dolorum hic?</li>
            <li>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Error quo eos, ea fuga molestiae nesciunt voluptas dolor fugit delectus facere quam enim tempora voluptatibus, doloremque blanditiis aut ab consequuntur repellat voluptates molestias veritatis dolorem? Ipsam ad dolore officia dolorum hic?</li>
            <li>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Error quo eos, ea fuga molestiae nesciunt voluptas dolor fugit delectus facere quam enim tempora voluptatibus, doloremque blanditiis aut ab consequuntur repellat voluptates molestias veritatis dolorem? Ipsam ad dolore officia dolorum hic?</li>
          </ol>
          <blockquote>
            <p><strong><em>“Lorem ipsum, dolor sit amet consectetur adipisicing elit. Error quo eos, ea fuga molestiae nesciunt voluptas dolor fugit delectus facere quam enim tempora voluptatibus?”</em></strong></p>
          </blockquote>
        </a>
        <p><a href="/2018/04/27/test.html"></a><a href="www.test.com"><em>www.loremipsum.com</em></a></p>
      </div>
    </div>
    <div class="author-div">
      <p class="name-and-position letter-spacing-0">by <span class="text-tanda-l">Monic Del Rosario, Content Curator / Resident Wordsmith / Door Opener</span></p>
      <p class="publish-date letter-spacing-0">published April 27, 2018</p>
    </div>
  </div>
</div>

The Output I Wanted

<div class="col-4">
  <a href="/2018/04/27/test.html">
    <div class="blog-card">
      <div class="featured-image" style="background-image: url('assets/images/uploads/conf-blog-header.jpg')">
        <img src="http://192.168.1.125:4000//assets/images/uploads/conf-blog-header.jpg" alt="">
      </div>
      <div class="blog-article">
        <p class="category-time text-uppercase letter-spacing-0">Category | 3 mins read</p>
        <p class="h5 letter-spacing-0 title">Lorem ipsum dolor sit amet consectetur adipisicing elit  Pariatur, impedit. Laboriosam, voluptate! Accusantium, voluptatibus necessitatibus!</p>
        <div class="blog-body-text letter-spacing-0">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora possimus accusamus exercitationem facilis voluptatem labore earum deserunt quam, quasi commodi ipsum a veniam quas optio est impedit nobis placeat inventore.</p>
          <ol>
            <li>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Error quo eos, ea fuga molestiae nesciunt voluptas dolor fugit delectus facere quam enim tempora voluptatibus, doloremque blanditiis aut ab consequuntur repellat voluptates molestias veritatis dolorem? Ipsam ad dolore officia dolorum hic?</li>
            <li>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Error quo eos, ea fuga molestiae nesciunt voluptas dolor fugit delectus facere quam enim tempora voluptatibus, doloremque blanditiis aut ab consequuntur repellat voluptates molestias veritatis dolorem? Ipsam ad dolore officia dolorum hic?</li>
            <li>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Error quo eos, ea fuga molestiae nesciunt voluptas dolor fugit delectus facere quam enim tempora voluptatibus, doloremque blanditiis aut ab consequuntur repellat voluptates molestias veritatis dolorem? Ipsam ad dolore officia dolorum hic?</li>
          </ol>
          <blockquote>
            <p><strong><em>“Lorem ipsum, dolor sit amet consectetur adipisicing elit. Error quo eos, ea fuga molestiae nesciunt voluptas dolor fugit delectus facere quam enim tempora voluptatibus?”</em></strong></p>
          </blockquote>
          <p><a href="www.test.com"><em>www.loremipsum.com</em></a></p>
        </div>
      </div>
      <div class="author-div">
        <p class="name-and-position letter-spacing-0">by <span class="text-tanda-l">Monic Del Rosario, Content Curator / Resident Wordsmith / Door Opener</span></p>
        <p class="publish-date letter-spacing-0">published April 27, 2018</p>
      </div>
    </div>
  </a>
</div>
2

you have this at the top, (line 4) but it isn’t closed until the bottom. So everything in there is an href. Not sure if this is the problem or not.

I wonder if the browser is doing that? what is the actual html in the file? what all should be surrounded by that first s tag?

3

The anchor tag at the top is closed. I thinks also that it’s the browser causing the problem because the generated html file is okay. Like there’s no unwanted injected anchor tag.

this the actual html file

<div class="col-4">
  <a href="/2018/04/27/test.html">
    <div class="blog-card">
      <div class="featured-image" style="background-image: url('assets/images/uploads/conf-blog-header.jpg')">
        <img src="http://192.168.1.125:4000//assets/images/uploads/conf-blog-header.jpg" alt="">
      </div>
      <div class="blog-article">
        <p class="category-time text-uppercase letter-spacing-0">Category | 3 mins read</p>
        <p class="h5 letter-spacing-0 title">Lorem ipsum dolor sit amet consectetur adipisicing elit  Pariatur, impedit. Laboriosam, voluptate! Accusantium, voluptatibus necessitatibus!</p>
        <div class="blog-body-text letter-spacing-0">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora possimus accusamus exercitationem facilis voluptatem labore earum deserunt quam, quasi commodi ipsum a veniam quas optio est impedit nobis placeat inventore.</p>
          <ol>
            <li>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Error quo eos, ea fuga molestiae nesciunt voluptas dolor fugit delectus facere quam enim tempora voluptatibus, doloremque blanditiis aut ab consequuntur repellat voluptates molestias veritatis dolorem? Ipsam ad dolore officia dolorum hic?</li>
            <li>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Error quo eos, ea fuga molestiae nesciunt voluptas dolor fugit delectus facere quam enim tempora voluptatibus, doloremque blanditiis aut ab consequuntur repellat voluptates molestias veritatis dolorem? Ipsam ad dolore officia dolorum hic?</li>
            <li>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Error quo eos, ea fuga molestiae nesciunt voluptas dolor fugit delectus facere quam enim tempora voluptatibus, doloremque blanditiis aut ab consequuntur repellat voluptates molestias veritatis dolorem? Ipsam ad dolore officia dolorum hic?</li>
          </ol>
          <blockquote>
            <p><strong><em>“Lorem ipsum, dolor sit amet consectetur adipisicing elit. Error quo eos, ea fuga molestiae nesciunt voluptas dolor fugit delectus facere quam enim tempora voluptatibus?”</em></strong></p>
          </blockquote>
          <p><a href="www.test.com"><em>www.loremipsum.com</em></a></p>
        </div>
      </div>
      <div class="author-div">
        <p class="name-and-position letter-spacing-0">by <span class="text-tanda-l">Monic Del Rosario, Content Curator / Resident Wordsmith / Door Opener</span></p>
        <p class="publish-date letter-spacing-0">published April 27, 2018</p>
      </div>
    </div>
  </a>
</div>
4

where is this closed at the top? I don’t see a </a> until the 2nd to last line.

5

I’ve seen this sort of thing happen with CMS’s that don’t follow the HTML5 spec which allows block elements like <div>, <p>, etc. to be wrapped with an anchor. So they end up getting confused and add <a> around all of the children instead of the parent <div>.

Wonder if that’s what the browser is doing. What do you have your page doctype set at in the <head></head>?

6

Ah. That’s where it is really closed because it’s a card that when you click anywhere on the card you will be redirected to the article.

7

@mmistakes Browsers get confused with nested anchors in an anchor… even with an HTML5 DOCTYPE.

Even something benign like the following can be confusing for browsers

  <a class="foo">
    <div><a class="bar">FOOBAR</a></div>
  </a>
8

Thanks for the help and for the new learning! I found a workaround for it. I don’t know if I should or can close this topic like on github though.