<a> element appearing inside even though I put it outside - html

Question

I have django template file called card.html
In this file the anchor tag is on the outside.
<a class="url d-block" href="{% if content_type == 'book' %} {% url 'book' content.id|default:1 %} {% else %} {% url 'article' content.id|default:1 %} {% endif %}">
<div class="card d-flex flex-column border border-1 rounded">
<div class="p-5 bg-light">
<img src="{{ content.thumbnail }}" class="thumbnail img-fluid rounded">
</div>
<div class="flex-grow-1 p-4 border-top border-1">
<h3 class="category fs-5 text-secondary">{{ content.category.first }}</h3>
<h2 class="title fs-4 mb-2 text-dark">{{ content.title }}</h2>
{% if content_type == "book" %}
<a class="book-author fs-5 fw-bold" href="https://www.google.com/search?q={{content.book_author|default:''}}">By {{ content.book_author }}</a>
<h3 class="author fs-5 text-dark">Summarized by {{ content.author }}</h3>
{% else %}
<h3 class="author fs-5 text-dark">Created by {{ content.author }}</h3>
{% endif %}
</div>
<div class="flex-shrink-1 pt-3 d-flex justify-content-evenly border border-1">
<p class="date-created d-inline">{{ content.date_created }}</p>
<i class="fa-solid fa-star mt-1"></i>
<i class="fa-solid fa-ellipsis-vertical mt-1"></i>
</div>
</div>
</a>
card.html is included in this template (the div is inside a body).
<div id="list-container" class="d-flex flex-wrap justify-content-center gap-4 pb-5 px-5">
{% for content in content_list %}
{% include "app/card.html" with visibility="visible" %}
{% empty %}
<h2>No {{ content_type }} for now..</h2>
{% endfor %}
</div>
When rendered, it looks like this.
The anchor tag somehow close by itself and got inside the div.
<a class="url" href=" /books/1 "></a>
<div class="card d-flex flex-column border border-1 rounded">
<a class="url" href=" /books/1 ">
<div class="p-5 bg-light">
<img src="img.jpg" class="thumbnail img-fluid rounded">
</div>
</a>
<div class="flex-grow-1 p-4 border-top border-1">
<a class="url" href=" /books/1 ">
<h3 class="category fs-5 text-secondary">Example Category</h3>
<h2 class="title fs-4 mb-2 text-dark">Title</h2>
</a>
<a class="book-author fs-5 fw-bold" href="https://www.google.com/search?q=Name">By Name</a>
<h3 class="author fs-5 text-dark">Summarized by Archer</h3>
</div>
<div class="flex-shrink-1 pt-3 d-flex justify-content-evenly border border-1">
<p class="date-created d-inline">May 3, 2022, 9 a.m.</p>
<i class="fa-solid fa-star mt-1"></i>
<i class="fa-solid fa-ellipsis-vertical mt-1"></i>
</div>
</div>

Answer 1

You cannot use <a> tag inside <a> tag. HTML don't allow nested tag.
You can use onclick event but you have to check with javascript which element clicked because parent element is a wrapper.