Open In App

Template Inheritance in Flask

Last Updated : 15 Jul, 2025
Suggest changes
Share
Like Article
Like
Report

Template inheritance is a powerful feature in Jinja, the templating engine used in Flask. It allows us to define a common structure for web pages, such as headers, footers, and navigation bars, in a base template. This prevents redundant code and makes managing multiple pages easier.

Prerequisite -  Flask – (Creating first simple application)

 Features of Template Inheritance

  • Code Reusability: Write common HTML structure once and reuse it across multiple pages.
  • Better Maintainability: Updating the base template updates all inherited templates automatically.
  • Separation of Concerns: Keeps the structure and content of web pages separate for better organization.
  • Scalability: Easily add new pages without duplicating code.

Implementing Template Inheritance

Step 1: Set Up a Flask App

Create a basic Flask application that renders an HTML template.

Python 
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)

Step 2: Create a Base Template

The base.html file contains the common structure for all web pages. The {% block content %} {% endblock %} section is where unique content for each page will go.

Python 
<!DOCTYPE html> <html lang="en"> <head> <title>My Flask App</title> </head> <body> <h1>Welcome to My Website</h1> <nav> <a href="/">Home</a> | <a href="/about">About</a> </nav> {% block content %}{% endblock %} </body> </html>

Step 3: Create Child Templates

Now, let's create home.html and about.html, which inherit from base.html using {% extends "base.html" %}. The {% block content %} section contains unique content for each page.

home.html

Python 
{% extends "base.html" %} {% block content %} <h2>Home Page</h2> <p>Welcome to the homepage of our Flask app!</p> {% endblock %}

about.html

Python 
{% extends "base.html" %} {% block content %} <h2>About Us</h2> <p>This is the about page of our Flask app.</p> {% endblock %}

Running the Application

  1. Save base.html, home.html, and about.html inside the templates folder.
  2. Run your Flask app using- python app.py command.
  3. Open http://127.0.0.1:5000/ for the homepage and http://127.0.0.1:5000/about for the about page.

Below is the snapshot of the app in development server.

home-page
Snapshot of Home Page
about-us
Snapshot of About Us page

Working:

  • When you visit different routes (/, /about, /contact), Flask dynamically renders the appropriate template.
  • The common structure from base.html is reused.
  • The {% block content %} placeholder is replaced with each page’s specific content.
  • This ensures a consistent layout across multiple pages.

D
dontstockplease
Article Tags :

Explore

Lightbox