Friday, August 29, 2025
HomeLanguagesTemplate Inheritance in Flask

Template Inheritance in Flask

Template inheritance is a very good feature of Jinja templating . Jinja is a web template engine for the Python programming language . We have seen that webpages of a website contains same footer , navigation bar etc.  So instead of making same footer and navigation bar in all webpages separately , we make use of template inheritance , which allows us to create the part which is same in all webpages (eg. footer,navigation bar) only once and we also don’t need to write the html , head , title tag again and again . Lets define the common structure of web pages in base.html file. First of all we will render  template using flask from main.py file .

Prerequisite –  Flask – (Creating first simple application)

 

Step 1 – Create a flask app to render the main template 

Python3




from flask import Flask, render_template
  
# Setting up the application
app = Flask(__name__)
  
# making route
  
  
@app.route('/')
def home():
    return render_template('home.html')
  
  
# running application
if __name__ == '__main__':
    app.run(debug=True)


Step 2 – Create HTML Files

Now we will set up our base.html file in which we have one heading which will be common in all webpages. 

Syntax : 

{% block content %}
{% endblock %}

The code above and below these lines will be the same for every web pages and the code between them will be for a specific web page . 

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <title>Template Inheritance</title>
</head>
<body>
    <h1> This heading is common in all webpages </h1>
    {% block content %}
    {% endblock %}
  
</body>
</html>


  

Now we will set up our home.html file in which we will inherit template from “base.html” file and will write some code for 

home page also . 

Syntax :

  {% extends "base.html" %}
        {% block content %}
          write code here for home page only 
        {% endblock %}

HTML




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


      

Run your main.py file . 

Output – 

Below is the output.

        

This article is just a simple example. We can also add navigation bar , footer , etc to base.html file and can inherit to home.html file and many others .

RELATED ARTICLES

Most Popular

Dominic
32249 POSTS0 COMMENTS
Milvus
80 POSTS0 COMMENTS
Nango Kala
6617 POSTS0 COMMENTS
Nicole Veronica
11789 POSTS0 COMMENTS
Nokonwaba Nkukhwana
11838 POSTS0 COMMENTS
Shaida Kate Naidoo
6731 POSTS0 COMMENTS
Ted Musemwa
7011 POSTS0 COMMENTS
Thapelo Manthata
6688 POSTS0 COMMENTS
Umr Jansen
6701 POSTS0 COMMENTS