Why is my block content on django displaying below the footer?

this is the base.html

the block content is between the header and the footer

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>header</h1>

    {% block content %}
    
    {% endblock content %}


    <h1>footer</h1>
    
</body>
</html>

this is index that include the base html

{% include "base.html" %}
{% load static %}


{% block content %}
<p> body </p>
{% endblock content %}

the p tag boby should display in the middle

expected output

header body footer

the output

header footer fghj

the p tag should be in the middle right or is there something i missed?

Solution

Try using extends, not include. Templates are created using the first variant. Include just brings the whole html over your second one.

{% extends "base.html" %}
{% load static %}

{% block content %}
<p> body </p>
{% endblock content %}