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

I have django template file called card.html

In this file the anchor tag is on the outside.

<a  href="{% if content_type == 'book' %} {% url 'book' content.id|default:1 %} {% else %} {% url 'article' content.id|default:1 %} {% endif %}">
    <div >
        <div >
            <img src="{{ content.thumbnail }}" >
        </div>
        <div >
            <h3 >{{ content.category.first }}</h3>
            <h2 >{{ content.title }}</h2>
            {% if content_type == "book" %}
                <a  href="https://www.google.com/search?q={{content.book_author|default:''}}">By {{ content.book_author }}</a>
                <h3 >Summarized by <a href="{% url 'user' content.author|default:'test' %}">{{ content.author }}</a></h3>
            {% else %}
                <h3 >Created by <a href="{% url 'user' content.author|default:'test' %}">{{ content.author }}</a></h3>
            {% endif %}
        </div>
        <div >
            <p >{{ content.date_created }}</p>
            <i ></i>
            <i ></i>
        </div>
    </div>
</a>

card.html is included in this template (the div is inside a body).

<div id="list-container" >
        {% 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  href=" /books/1 "></a>
<div >
    <a  href=" /books/1 ">
        <div >
            <img src="img.jpg" >
        </div>
    </a>
    <div >
        <a  href=" /books/1 ">
            <h3 >Example Category</h3>
            <h2 >Title</h2>
        </a>
        <a  href="https://www.google.com/search?q=Name">By Name</a>
        <h3 >Summarized by <a href="/user/Archer">Archer</a></h3>
        
    </div>
    <div >
        <p >May 3, 2022, 9 a.m.</p>
        <i ></i>
        <i ></i>
    </div>
</div>

CodePudding user response：

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.