Skip to content

Template Inheritance (Extends)

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

Create a base layout

templates/base.htmltemplates/base.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>

<!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.htmltemplates/home.html:

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

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

Why this matters

One place to change your global layout
Consistent design
Easier to maintain as pages grow

🧪 Try It Yourself

Exercise 1 – Create a Flask App

Exercise 2 – Dynamic Route

Exercise 3 – Return JSON

If this helped you, consider buying me a coffee ☕

Buy me a coffee