is it normal to have meta data outside head Django templates

September 2, 2022

i have three templates home, navbar, base and footer. navbar and footer are included in base and base in extended in every other template (home).

this is 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' %}

this template represents navbar.html and 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>

this is 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 %}

technically everything works fine from styling to html elements order in view, but when i inspect the elements in the browser it feels over crowded and unorganized

this is what i see when i inspect my site

when i extend base.html in home.html, everything in the head gets thrown right in the middle of the body, it works but ive never seen any other website like this.

my question is, is what i have ok, or is this happening due to bad a practice of mine and there is a right approach to eliminate this issue, is there something that i’am doing wrong?

thanks!

>Solution :

you can add more blocks to your templates:

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>

and 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 %}