How Do We Use HTML Templates?
Explore how to manage static HTML templates in Flask by using the render_template function to keep your application logic separate from presentation. This lesson helps you understand proper file structuring and rendering techniques to deliver HTML templates effectively in Flask projects.
Introduction
In this lesson, we will learn how to render static templates, instead of plain text, on the front-end using the Flask framework.
Static templates
Static templates are the HTML files which remain constant. In fact, the standard HTML files are static in nature. Whenever the same file is rendered, it shows the same output unless the file is updated.
In a real-world web application, we expect an HTML file to be returned and rendered on the browser screen from the view function instead of a String.
Note: We assume that you are already familiar with the basics of
HTMLandCSSin the context of all lessons of Flask you will be studying.
Rendering HTML templates
HTML can be rendered in Flask using the following two methods:
A String
We can use the HTML as a String in the view function.
from flask import Flask
app = Flask(__name__)
@app.route("/")
def home():
return "<h1>Welcome to the HomePage!</h1>"
if __name__ == "__main__":
app.run(debug=True, host="0.0.0.0", port=3000)render_template() function
Returning an HTML template as a String works perfectly—but it is not appropriate for practical applications. It is best to keep the code and the templates separate. Thus, we create separate files containing the HTML code for the templates. Then, these HTML files can be referred to inside the views by their names. Flask contains a function called render_template() which is used to render the desired HTML templates. This method has the following parameters:
template_name_or_list: the name of a template or an iterable list of templates (the method will render the first template in the list)context(optional): variables that should be available inside the template.
The output of the render_template() is then returned by the view instead of a simple String.
def view_name():
return render_template(template_name)
File structure strategies
The Flask framework looks for the HTML template files in a directory named \templates. This directory can be placed per the following file structures so that Flask can find it.
Module file structure
If we follow a modular file structure in our project (i.e the application logic is in one .py file), a separate directory called “templates” can be created in the same directory as the main module of the application (i.e app.py).
Package file structure
If the application logic is divided into separate modules (i.e., separate .py files), then these files are present in the same package. As you may know, in Python, a package is simply a directory containing a file named __init__.py. If this structure is being followed in our application, then we will create the templates directory inside the main application package.
Now, let’s use the module file structure approach and render the home.html template by using render_template() function in the example above.
An example using render_template()
Let’s take a look at the example application.
from flask import Flask, render_template
app = Flask(__name__)
@app.route("/")
def home():
return render_template("home.html")
if __name__ == "__main__":
app.run(debug=True, host="0.0.0.0", port=3000)Explanation
In this application, we have created a templates directory containing an HTML file called home.html.
Then, in the application module, app.py, we first import the render_template function in line 1. Then, the view function home() renders the home.html template by passing its name to render_template() and returning the output in line 6.