DjangoHow-ToBeginner · 3 min read

How to Use extends in Django Template for Layout Inheritance

Use the {% extends 'base.html' %} tag at the top of a Django template to inherit from a base template. This lets you reuse common layout parts and override specific blocks with {% block %} tags.

📐

Syntax

The {% extends 'template_name.html' %} tag tells Django which base template to inherit from. It must be the first tag in your template. Inside the child template, you define {% block block_name %} sections to replace or add content to the base template's blocks.

Example parts:

{% extends 'base.html' %}: Inherit from base.html.
{% block content %}...{% endblock %}: Define content to fill the content block in the base.

django

{% extends 'base.html' %}

{% block content %}
  <p>Your page content here.</p>
{% endblock %}

💻

Example

This example shows a base template with a header and a content block, and a child template that extends it and fills the content block.

django

base.html:
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>{% block title %}My Site{% endblock %}</title>
</head>
<body>
  <header>
    <h1>Welcome to My Site</h1>
  </header>
  <main>
    {% block content %}{% endblock %}
  </main>
  <footer>
    <p>© 2024 My Site</p>
  </footer>
</body>
</html>

child.html:
{% extends 'base.html' %}

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

{% block content %}
  <p>This is the home page content.</p>
{% endblock %}

Output

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Home Page</title> </head> <body> <header> <h1>Welcome to My Site</h1> </header> <main> <p>This is the home page content.</p> </main> <footer> <p>© 2024 My Site</p> </footer> </body> </html>

⚠️

Common Pitfalls

Not placing {% extends %} at the very top: It must be the first tag, or Django will raise an error.
Forgetting to define matching {% block %} tags in the base template: Child templates can only override blocks that exist in the base.
Using incorrect template paths: The string in {% extends %} must match the template file location relative to your template directories.

django

{# Wrong: extends not first #}
<p>Intro text</p>
{% extends 'base.html' %}

{# Right: extends first #}
{% extends 'base.html' %}
<p>Intro text</p>

📊

Quick Reference

Tag	Purpose	Notes
{% extends 'template.html' %}	Inherit from a base template	Must be first tag in template
{% block block_name %}...{% endblock %}	Define content sections to override	Block names must match base template
{{ variable }}	Insert variables	Works inside blocks
{% include 'file.html' %}	Insert another template	Different from extends

✅

Key Takeaways

Always put {% extends %} as the very first tag in your Django template.

Use {% block %} tags in both base and child templates to define and override content areas.

The string in {% extends %} must correctly point to your base template file.

Extends helps reuse layout and keep templates DRY (Don't Repeat Yourself).

If you forget blocks in the base, child templates cannot override those sections.