Нормально ли иметь метаданные вне шаблонов голов Django

у меня есть три шаблона home, navbar, base и footer. navbar и footer включены в base, а base расширен в каждом другом шаблоне (home).

это base.html:

{% load static %}
<head> 
    <link rel="stylesheet" href="{% static 'base.css' %}">
    <link rel="stylesheet" href="{% static 'navbar.css' %}">
    <link rel="stylesheet" href="{% static 'footer.css' %}">
</head>
{% include 'navbar.html' %}
<div id="all">
<div id="bg">
    <img id="l1" src="{% static 'img/bg-layer-1.svg' %}">
    <img id="l2" src="{% static 'img/bg-layer-2.svg' %}">
</div>
  {% block content %}

  {% endblock %}
</div>
{% include 'footer.html' %}

этот шаблон представляет navbar.html и footer.html:

{% load static %}
<div class="wrapper">
    <ul id="navbar">
        <li class="left">
            <a href="{% url 'index'%}">Home</a>
        </li>
        <li class="right">
            <a href="{% url 'account'%}">Account Managment</a>
        </li>
        <li class="right">
            <a href="{% url 'contests'%}">Contests</a>
        </li>
    </ul>
</div>
<script src="{% static 'navbar.js' %}"></script>

это home.html:

{% extends 'base.html' %}
{% load static %}
<html lang="en">
  {% block content %}
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Home Page</title>
    <link rel="stylesheet" href="{% static 'home.css' %}">
  </head>
  <body>
    <div class="content">
      <table border="0">
         <tr>
        .
        .
        .
         </tr>
      </table>
    </div>
    </body>
    </html>
    {% endblock %}

технически все работает хорошо, от стилизации до порядка html элементов в просмотре, но когда я просматриваю элементы в браузере, они кажутся переполненными и неорганизованными

вот что я вижу, когда осматриваю свой сайт

когда я расширяю base.html в home.html, все, что находится в head, выбрасывается прямо в середину body, это работает, но я никогда не видел ни на одном другом сайте такого.

Мой вопрос в том, нормально ли то, что я имею, или это происходит из-за моей неправильной практики и есть правильный подход для устранения этой проблемы, есть ли что-то, что я делаю неправильно?

Спасибо!

вы можете добавить больше блоков в ваши шаблоны:

base.html:

<html>
    {% load static %}
    <head> 
        <link rel="stylesheet" href="{% static 'base.css' %}">
        <link rel="stylesheet" href="{% static 'navbar.css' %}">
        <link rel="stylesheet" href="{% static 'footer.css' %}">
    {% block head %}
    {% endblock %}
    </head>
<body>
    {% include 'navbar.html' %}
    <div id="all">
    <div id="bg">
        <img id="l1" src="{% static 'img/bg-layer-1.svg' %}">
        <img id="l2" src="{% static 'img/bg-layer-2.svg' %}">
    </div>
      {% block content %}
    
      {% endblock %}
    </div>
    {% include 'footer.html' %}
</body>
</html>

и home.html:

{% extends 'base.html' %}
{% load static %}
{% block head %}
 <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Home Page</title>
    <link rel="stylesheet" href="{% static 'home.css' %}">
{% endblock %}
  {% block content %}

    <div class="content">
      <table border="0">
         <tr>
        .
        .
        .
         </tr>
      </table>
    </div>
    {% endblock %}
Вернуться на верх