Template Inheritance (Extends)

Template inheritance is how you avoid repeating HTML like headers/navbars/footers.

diagram what a child template may and may not contain mermaid

  flowchart TD
  A["child: {% extends 'base.html' %}"] --> B["Jinja renders BASE, not the child"]
  B --> C{"base reaches a block"}
  C -->|"child defines it"| D["the child's version is used"]
  C -->|"child does not"| E["the base's default is used"]
  D --> F{"does the child call super()?"}
  F -->|yes| G["base content, then the child's -- appended"]
  F -->|no| H["the base content is replaced"]
  A --> I["text in the child outside any block"]
  I --> J["silently discarded -- it never appears"]

A child does not add to the base, it fills holes in it. Anything the child writes outside a block is discarded without a warning -- the base decides the layout, and only the named blocks are yours. Calling super() inside a block is how you keep the base content and add to it rather than replacing it.

Verified with Jinja2. Given a base of [base-start]{% block body %}BASE{% endblock %}[base-end]:

Child template	Renders as
`{% block body %}CHILD{% endblock %}`	`[base-start]CHILD[base-end]`
`{% block body %}{{ super() }}+CHILD{% endblock %}`	`[base-start]BASE+CHILD[base-end]`
`OUTSIDE{% block body %}X{% endblock %}`	`[base-start]X[base-end]`

The third row is the one that wastes an afternoon. The word OUTSIDE is gone — no error, no warning, no empty space. When a child extends a base, the base is what gets rendered, and the only text of yours that survives is what sits inside a {% block %}.

So if content you wrote in a child is not showing, check that it is inside a block before checking anything else.

Create a base layout

templates/base.html:

html

<!doctype html>
<html>
  <head>
    <title>{% block title %}My Site{% endblock %}</title>
  </head>
  <body>
    <nav>
      <a href="/">Home</a>
      <a href="/about">About</a>
    </nav>
 
    <main>
      {% block content %}{% endblock %}
    </main>
  </body>
</html>

Extend it in a page

templates/home.html:

html

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

Template Inheritance (Extends)

Create a base layout

Extend it in a page

Why this matters

🧪 Try It Yourself

Exercise 1 – Create a Flask App

Exercise 2 – Dynamic Route

Exercise 3 – Return JSON

pch.feedbackHeading