Django Template Inheritance

Template inheritance is a Django feature that allows one template to reuse the structure of another template.

A common layout can be stored in a file such as base.html. Other pages can then extend that template.

Template inheritance helps us:

• Avoid repeating HTML code
• Create a common website layout
• Maintain headers and footers easily
• Reuse navigation menus
• Keep templates organized
• Make large websites easier to maintain

The base template contains the common structure of the website.

base.html

It may contain the HTML document structure, navigation, header, footer, and content blocks.

<!DOCTYPE html>
<html>

<head>
    <title>My Website</title>
</head>

<body>

    <header>
        My Website
    </header>

    {% block content %}
    {% endblock %}

    <footer>
        Copyright
    </footer>

</body>

</html>

The block tag defines an area that a child template can replace or fill.

{% block content %}
{% endblock %}

The name content is chosen by the developer and can be changed.

The extends tag tells Django that a template should inherit from another template.

{% extends 'base.html' %}

This is normally placed near the beginning of a child template.

Suppose we create a file called home.html.

{% extends 'base.html' %}

{% block content %}

<h1>Home Page</h1>

<p>Welcome to my website.</p>

{% endblock %}

The basic process is:

base.html
     ↓
home.html extends base.html
     ↓
Django combines the templates
     ↓
Final HTML page

The child template provides content for the blocks defined by the base template.

<header>

    <h1>My Website</h1>

    <nav>
        Home | About | Contact
    </nav>

</header>

Because this is inside the base template, child pages can reuse the header.

<footer>

    <p>Copyright 2026 My Website</p>

</footer>

The footer can be written once and shared by many pages.

A base template can contain multiple blocks.

<title>

{% block title %}
My Website
{% endblock %}

</title>

{% block content %}
{% endblock %}

A child template can replace the title block.

{% extends 'base.html' %}

{% block title %}
Home Page
{% endblock %}

{% block content %}

<h1>Welcome Home</h1>

{% endblock %}

A single base template can be extended by many pages.

base.html
    ↓
home.html
about.html
contact.html
services.html
blog.html

All these pages can share the same website structure.

myapp/
│
├── views.py
├── models.py
│
└── templates/
    ├── base.html
    ├── home.html
    ├── about.html
    └── contact.html

<!DOCTYPE html>
<html>

<head>
    <title>{% block title %}My Website{% endblock %}</title>
</head>

<body>

    <header>
        <h1>My Website</h1>
    </header>

    {% block content %}
    {% endblock %}

    <footer>
        <p>Footer</p>
    </footer>

</body>

</html>

{% extends 'base.html' %}

{% block title %}
Home
{% endblock %}

{% block content %}

<h2>Home Page</h2>

<p>Welcome to our website.</p>

{% endblock %}

The block.super variable can be used when a child template wants to keep the original content of a block and add additional content.

{% block content %}

{{ block.super }}

<p>Additional content</p>

{% endblock %}

For example, if the base template has:

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

A child template can preserve it using:

{% block content %}

{{ block.super }}

<p>Child content</p>

{% endblock %}

Template inheritance can be combined with the include tag.

{% include 'navbar.html' %}

{% block content %}
{% endblock %}

{% include 'footer.html' %}

This allows common components to be maintained separately.

Static CSS and JavaScript files can be included in the base template so that child pages automatically use the common resources.

{% load static %}

<link rel="stylesheet"
      href="{% static 'css/style.css' %}">

<nav>

    <a href="{% url 'home' %}">Home</a>

    <a href="{% url 'about' %}">About</a>

    <a href="{% url 'contact' %}">Contact</a>

</nav>

The navigation can then be shared by all child templates.

Views continue to render the child templates normally.

from django.shortcuts import render

def home(request):
    return render(request, 'home.html')

The child template extends the base template, and Django builds the final response.

View:

def home(request):

    data = {
        'name': 'Rahul'
    }

    return render(
        request,
        'home.html',
        data
    )

Child template:

{% extends 'base.html' %}

{% block content %}

<h1>Welcome {{ name }}</h1>

{% endblock %}

Django also allows a template to extend another child template.

base.html
    ↓
section.html
    ↓
article.html

This can be useful for larger websites with several levels of shared layouts.

A professional website may use a base template containing:

• DOCTYPE and HTML structure
• Meta information
• CSS files
• Navigation bar
• Header
• Main content block
• Footer
• JavaScript files

• Incorrect base template name
• Incorrect template path
• Forgetting {% extends %}
• Using a block name that does not exist in the parent
• Forgetting {% endblock %}
• Incorrect indentation or HTML structure
• Incorrect static file configuration

The extends tag should normally appear as the first template tag in a child template.

{% extends 'base.html' %}

{% block content %}
    <h1>Home Page</h1>
{% endblock %}

The child template then overrides the appropriate blocks.

templates/
│
├── base.html
├── home.html
├── about.html
├── contact.html
├── services.html
│
└── partials/
    ├── navbar.html
    └── footer.html

This structure can help organize reusable templates in a Django project.

base.html

{% load static %}

<!DOCTYPE html>
<html>

<head>

    <title>
        {% block title %}
        My Website
        {% endblock %}
    </title>

    <link rel="stylesheet"
          href="{% static 'css/style.css' %}">

</head>

<body>

    <header>
        <h1>My Website</h1>
    </header>

    <nav>
        <a href="{% url 'home' %}">Home</a>
        <a href="{% url 'about' %}">About</a>
    </nav>

    <main>

        {% block content %}
        {% endblock %}

    </main>

    <footer>
        <p>Copyright 2026</p>
    </footer>

</body>

</html>

home.html

{% extends 'base.html' %}

{% block title %}
Home Page
{% endblock %}

{% block content %}

<h2>Welcome to Home Page</h2>

<p>
This content is specific to the home page.
</p>

{% endblock %}

Django Template Inheritance is an important feature for creating reusable and maintainable website layouts.

• base.html commonly contains the shared layout.
• {% extends %} allows a child template to inherit a parent template.
• {% block %} defines replaceable sections.
• Multiple child templates can extend the same base template.
• block.super can preserve parent block content.
• {% include %} can reuse separate template components.
• Static files can be loaded in the base template.
• Named URLs can be used in shared navigation.
• Template inheritance reduces duplicate HTML code.