CODEWITHSUNDEEP
htmldjango-templates
Saber
Saber

Reputation: 3

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

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 <a href="{% url 'user' content.author|default:'test' %}">{{ content.author }}</a></h3>
            {% else %}
                <h3 class="author fs-5 text-dark">Created by <a href="{% url 'user' content.author|default:'test' %}">{{ content.author }}</a></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 <a href="/user/Archer">Archer</a></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>

Upvotes: 0

Views: 30

Answers (1)

flanders
flanders

Reputation: 80

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.

Upvotes: 1

Related Questions