CODEWITHSUNDEEP
htmldjangodjango-viewsdjango-templates
koxta
koxta

Reputation: 916

Why Django is encapsulating all the content inside the Body Tag

I have a problem that I am reproducing with a simple example.

No matter what I do I do always have a page with my content inside a body (js, footer, etc) like the image attached.

Can anyone help me to figure this out? Thank you.

If I remove the body tag from base.html, django include a body tag itself that encapsulates the remaining content.

base.html:

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="{% static 'css/styles.css' %}">
</head>
<body>
    {% block content %}

    {% endblock content %}
</body>

<footer>
    <h3>This is the footer</h3>
</footer>

<script src="{% static 'js/jquery-3.5.1.min.js' %}"></script>
<script src="{% static 'bootstrap-4.4.1/js/bootstrap.min.js' %}" ></script>

</html>

home.html:

{% extends 'base.html' %}

{% block content %}
<div>
    <h1>This is the home body</h1>
</div>
{% endblock content %}

The render result: enter image description here

Upvotes: 0

Views: 764

Answers (1)

Nicolas Appriou
Nicolas Appriou

Reputation: 2331

This is not a django issue.

The html tag can only have a head and body tag inside it. Your footer and script should go inside the body.

Your web browser have detected that the structure of your document is not valid and have corrected it.

If you check the HTML source code of your page (instead of using the dev tools), you will see that the template is rendered as you write it.

So move all your page content in the body tag.

Upvotes: 3

Related Questions