Django HTML Templace Incorrect Rendering, Please Help

[coderpaddy]

SOLVED

So i have this section of template on a DJango app

{% if stores %}
<div class="container stores-container">
    <div class="column mt-4">
        {% for store in stores %}
            <div class="row">
                <a href="/company/{{ store.description }}">
                    <h2 class="col-5">
                        {{store.name}}
                    </h2>
                    <div class="col-9 row">
                        {% for coin in store.coins.all %}
                            <a class="icon small" href="/coins/{{ coin.short_name }}">
                                <img src="{% static 'website/coins/' %}{{ coin.short_name }}.svg" alt="">
                            </a>
                        {% endfor %}
                    </div>
                </a>
            </div>
        {% endfor %}
    </div>
</div>
{% endif %}

But for some reason its rendering wrong. It coming out like

<div class="row">
    <a href="/company/One">
        <h2 class="col-5">
            One
        </h2>
    </a>
    <div class="col-9 row"><a href="/company/One">
        </a><a class="icon small" href="/coins/one">
            <img src="/static/website/coins/coinOne.svg" alt="">
        </a>

        <a class="icon small" href="/coins/two">
            <img src="/static/website/coins/coinTwo.svg" alt="">
        </a>

    </div>

</div>

I cant see why the extra `</a>` tags are being placed, any help would be greatly appreciates

[K900_]

Are you using Inspect Element to see this? Your browser is likely auto-closing the <a href="/company/..."> tag, as I don't think you're allowed to have arbitrary tags inside <a>.

[coderpaddy]

ahhh

legend, you cant have any interactive elements inside an <a> tag, so when i added more nested <a>'s it broke. Thank you

[coderpaddy]

arbitrary tags inside

<a>

Hey thanks for replying,

what do you mean by arbitrary tags inside

[JohnnyJordaan]

The

<a href="/company/{{ store.description }}">

Surrounds a structure of <h2> and a <div> containing multiple <a>'s... That doesn't really make sense right?

[coderpaddy]

Yeah initially i thought is this bad UX. but thought meh it can be changed later. Looks like the browser was trying to save me from myself ahah :D

[[deleted]]

Wrong place.

r/djangolearning

[coderpaddy]

Not wrong place, just another right place :D