Template Inheritance

Share a base layout across pages with {% extends %} and {% block %}.

Syntax{% extends "base.html" %}

Most pages share a header, footer and navigation. Define a base template with {% block %} placeholders, then let each page {% extends %} it and override only the blocks it needs.

This keeps your HTML DRY — change the layout once and every page updates.

Example

Example · python
<!-- base.html -->
<!DOCTYPE html>
<html>
<head><title>{% block title %}Site{% endblock %}</title></head>
<body>
    <nav>My Site</nav>
    {% block content %}{% endblock %}
</body>
</html>

<!-- home.html -->
{% extends "base.html" %}
{% block title %}Home{% endblock %}
{% block content %}
    <h1>Welcome home</h1>
{% endblock %}

When to use it

  • A developer creates a base.html with a common navbar and footer that all other templates extend.
  • A team keeps the site layout in one place using template inheritance so a branding change updates every page.
  • A developer defines {% block content %} in the base and overrides it in each child template for page-specific content.

More examples

Define a base template

Declares named blocks that child templates can fill with page-specific content.

Example · html
<!-- templates/base.html -->
<!DOCTYPE html>
<html>
<head><title>{% block title %}My Site{% endblock %}</title></head>
<body>
  <nav>...</nav>
  {% block content %}{% endblock %}
  <footer>...</footer>
</body>
</html>

Extend the base template

Uses {% extends %} to inherit the base layout and fills in title and content blocks.

Example · html
<!-- templates/blog/post_list.html -->
{% extends "base.html" %}

{% block title %}Blog Posts{% endblock %}

{% block content %}
  {% for post in posts %}
    <h2>{{ post.title }}</h2>
  {% endfor %}
{% endblock %}

Include a reusable partial

Uses {% include %} to insert a reusable pagination partial with passed context variables.

Example · html
<!-- In any template -->
{% include "partials/pagination.html" with page_obj=page_obj %}

<!-- partials/pagination.html -->
{% if page_obj.has_previous %}
  <a href="?page={{ page_obj.previous_page_number }}">Prev</a>
{% endif %}

Discussion

  • Be the first to comment on this lesson.