Day 7 — Mastering Template Inheritance in Flask
Learn how to reuse layouts and eliminate duplicate HTML code using Jinja template inheritance
Day 7 — Mastering Template Inheritance in Flask
Learn how to reuse layouts and eliminate duplicate HTML code using Jinja template inheritance
Image Designed by the Author on Canva
Not a Medium member? Have free access to this story via this link.
Read the previous part of the series **here.**
Imagine you’re building a website with ten pages.
Each page shares the same navigation bar, footer, CSS links, and overall HTML structure.
If you copy and paste the same HTML code into every template, maintaining the website quickly becomes difficult. Even a simple change to the navigation menu might require you to edit ten separate files.
That’s exactly where template inheritance in Flask comes in.
In today’s article, we’ll learn what template inheritance is, why it’s useful, and how to implement it using Jinja templates.
Alright, let’s get started!
What is Template Inheritance in Flask?
Template inheritance is a feature of Jinja that allows multiple HTML pages to share a common layout.
Instead of repeating the same HTML code in every template, we create a base template that contains the common parts of a website, such as the header, footer, and navigation bar. Other templates, called child templates, inherit from this base template and customize only the sections they need.
This approach makes Flask applications easier to maintain, organize, and scale.
Implementing Template Inheritance
Now, let’s see how to implement template inheritance in Flask with Jinja.
We’ll create a simple website with two pages:
- Home Page
- About Page
Our project structure will look like this:
my-app/
│
├── app.py
│
└── templates/
├── base.html
├── home.html
└── about.htmlThe relationship between these templates will look like this:
base.html
│
├── home.html
│
└── about.htmlStep 1: Set Up the Flask App
Create an app.py file and add the following code:
from flask import Flask, render_template
app = Flask(__name__)
@app.route("/")
def home():
return render_template("home.html")
@app.route("/about")
def about():
return render_template("about.html")
if __name__ == "__main__":
app.run(debug=True)Here, we define two routes:
/renders thehome.htmltemplate./aboutrenders theabout.htmltemplate.
Step 2: Create the Base Template (base.html)
Create a base.html file inside the /templates directory and add the following code:
<!DOCTYPE html>
<html>
<head>
<title>
{% block title %} {% endblock %}
</title>
</head>
<body>
<nav>
<a href="/">Home</a> | <a href="/about">About</a>
</nav>
<hr>
{% block content %}
{% endblock %}
<hr>
<footer>
<p>© 2026 My Flask Website</p>
</footer>
</body>
</html>Here:
{% block title %}defines a section where child templates can provide their own page titles.{% block content %}defines the main content area that child templates can customize.- Common elements, such as the navigation bar and footer, are defined only once in the base template and shared across all child templates.
Step 3: Create the Home Page Template (home.html)
Create a home.html file and add the following code:
{% extends "base.html" %}
{% block title %}
Home
{% endblock %}
{% block content %}
<h1>Welcome to the Home Page!</h1>
<p>
This page inherits its layout from base.html.
</p>
{% endblock %}Here:
{% extends “base.html” %}tells Jinja to usebase.htmlas the parent template and inherit its layout.{% block title %}and{% block content %}replace thetitleandcontentsections defined in the base template with their own content.
Step 4: Create the About Page Template (about.html)
Create an about.html file and add the following code:
{% extends "base.html" %}
{% block title %}
About
{% endblock %}
{% block content %}
<h1>About Us</h1>
<p>
This page also inherits its layout from base.html.
</p>
{% endblock %}The about.html template works exactly like home.html. It inherits the common layout from base.html and provides its own title and page content.
Running the App
Now, let’s run our application and see the output:
Using url_for() in Jinja Templates
In Flask, the url_for() function generates URLs dynamically using the names of view functions. We can use it directly inside Jinja templates.
For example, in our base.html template, we hardcoded the URLs for the navigation links:
<nav>
<a href="/">Home</a> | <a href="/about">About</a>
</nav>To generate them dynamically, we can replace these URLs with url_for() like this:
<nav>
<a href="{{ url_for('home') }}">Home</a> |
<a href="{{ url_for('about') }}">About</a>
</nav>Here, home and about are the names of the view functions defined in app.py.
Using url_for() is a best practice because Flask automatically generates the correct URLs for us. If we ever change a route, we only need to update the route definition, and our template links will continue to work without any changes.
Wrap Up
Today, we learned how template inheritance helps us build cleaner, more organized, and more maintainable Flask applications.
As your projects grow, template inheritance becomes an essential tool for keeping your layouts consistent and avoiding duplicated HTML code across multiple pages.
In the next article, we’ll learn how to work with static files in Flask, including CSS stylesheets, images, and JavaScript files.
Stay tuned for Day 8!
메타데이터
- post_id
- 19bb594ffd51
- slug
- day-7-mastering-template-inheritance-in-flask-19bb594ffd51
- url
- https://medium.com/python-for-everything/day-7-mastering-template-inheritance-in-flask-19bb594ffd51
- canonical_url
- https://medium.com/python-for-everything/day-7-mastering-template-inheritance-in-flask-19bb594ffd51
- author_url
- https://medium.com/@aliyannshaikhh
- status
- ok
- fetched_at
- 2026-07-09 04:10:03
